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 Pages.

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

• @ptrbrynt at Netsells

Libraries

navigator_cubit

Simple, stateful navigation using Cubit.