navigator_cubit
Simple, stateful navigation using Cubit.
❓ Why?
Not everyone needs an incredibly complex navigation API. But most people could definitely benefit from using a navigation system which supports nested Navigators, and declarative state.
navigator_cubit
is intended to provide a simple navigation API which makes it easy to implement stateful, nested navigation. It doesn't support the Router API, or navigation via paths. But it can be argued that many apps don't need either of these things. Not including them makes the navigator_cubit
package much simpler and easier to implement.
🚀 Installation
Install from pub.dev:
dependencies:
flutter_bloc: ^7.0.0
navigator_cubit: ^1.0.0
🔨 Usage
Step 1: Extend NavigatorCubit
Each navigator you use must have its own class of NavigatorCubit
. This class provides basic methods like push
, pop
, replace
etc.
A minimal implementation looks like this:
class HomeNavigatorCubit extends NavigatorCubit {
HomeNavigatorCubit({required Page root}) : super(root: root);
}
You can add your own methods if you like for more specific navigation transactions:
class HomeNavigatorCubit extends NavigatorCubit {
HomeNavigatorCubit({required Page root}) : super(root: root);
void popTwice() {
if (state.length > 2) {
emit(state.take(state.length - 2).toList());
return true;
} else {
return false;
}
}
}
Note: the state
of a NavigatorCubit
is simply the lits of Page
s.
Step 2: Add a CubitNavigator
widget to your tree
The CubitNavigator
widget handles the navigation state. You can nest them too!
class HomeWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CubitNavigator<HomeNavigatorCubit>(
createCubit: (context) => HomeNavigatorCubit(
root: DashboardWidget(),
),
);
}
}
Step 3: Access the navigator cubit in children
You have a couple of options for accessing the Navigator instance.
Option 1 is to use the BlocProvider.of
method from the Bloc library:
final navigator = BlocProvider.of<HomeNavigatorCubit>(context);
Alternatively, for something a bit more readable:
final navigator = context.navigatorCubit<HomeNavigatorCubit>();
Either way, getting access to a Navigator
instance allows you to perform navigation actions:
navigator.push(
MaterialPage(child: DetailWidget()),
);
navigator.pop();
navigator.replace(
MaterialPage(child: AnotherWidget()),
);
👨🏻💻 Authors
Libraries
- Simple, stateful navigation using Cubit.