Navigation

Navigation in Flutter is a complex topic, and it's not directly related to state management. However, AsyncRedux lets you navigate your app by dispatching actions, mainly because this makes it easy to write unit tests to test navigation.

Using AsyncRedux for navigation is completely optional. If you prefer to handle navigation in another way, you can skip this page.

At the moment, navigation support is only available for Navigator 1. If you use a newer navigation package, you can create your own actions for it, or simply avoid using AsyncRedux for navigation.

Setup

AsyncRedux provides a NavigateAction that you can dispatch to navigate your Flutter app.

To make this work, you first need to create a "navigator key" during app initialization and inject it into the navigation action:

final navigatorKey = GlobalKey<NavigatorState>();

void main() async {
  NavigateAction.setNavigatorKey(navigatorKey);
  ...
}

You must also use this same key in your MaterialApp:

return StoreProvider<AppState>(
  store: store,
  child: MaterialApp(
    ...
    navigatorKey: navigatorKey, // Here!
    initialRoute: '/',
    onGenerateRoute: ...
  ),
);

How to use it

The NavigateAction class provides most of the common Navigator methods. For example, to push a named route:

dispatch(NavigateAction.pushNamed("myRoute"));

Current route

Sometimes you may need to get the current route name in your app. It's best not to store the current route name in the app state, as that can cause issues.

Instead, use this static method from NavigateAction:

String routeName = NavigateAction.getCurrentNavigatorRouteName(context);

Try running the: Navigate Example.