Which Riverpod Provider should one use to handle navigation state in combination with Navigator 2.0?

user_5778751 0
Viewed 1981

I'm developing a fairly complex cross-platform (Android / iOS / web) app in Flutter. I'm new to Flutter, coming to it from a background of native development for Android and iOS.

I have been researching the best way to handle navigation and state management in Flutter, and my conclusion so far is that the best approach would be to use the Navigator 2.0 API in combination with the Riverpod state management library. As far as I can see, these seem to be the most up-to-date and powerful libraries for navigation and state management in Flutter.

However, I have not found it easy to figure out how to integrate Riverpod with Navigator 2.0. As someone who is new to both libraries and indeed to Flutter in general, I would ideally like to have found some canonical example in the docs (either the Navigator or the Riverpod ones) which shows how this should be done, but I haven't found such an example. In the absence of that, I would be really grateful for any guidance about how to do this, and in particular about which of the many types of Riverpod Providers is best suited to the job of handling navigation state. For example, what would be a reason to prefer ChangeNotifierProvider over StateNotifierProvider, or vice versa? Is there some other kind of Riverpod Provider that would work better than either of these?

riverpod flutter-navigation flutter
2 Answers

I was overcomplicating this issue a lot and even made a huge router to get around it (ray wenderlich has an example of a flutter router along with some other tutorials). I also tried some other packages meant for routing and it would always mess with my UI in some way

It actually came down to I had to pass context to my sub-classes. So in the constructor for anything not directly in your MaterialApp routes you would do MyClass(BuildContext context,{required this.whatever}); and then call it as MyClass(context, whatever whatever). The rest is working fine for me with a Navigator.pushnamed(context, routename). I have app bars plus a menu with navigation options so it is more complicated.

I hope that makes some sense. Flutter's website has information on setting up the MaterialApp() as well as named routes.

You could always set up your own list as a stack, they mention some of that in the flutter documentation but it sounds like it'd be a more complicated way to handle it. I know Providers work with classes so by extension I think they'd do fine with a list.

user_135738840

I use

final intendedPathProvider = StateProvider<TypedPath>((_) => <TypedSegment>[]);

The navigator then listens to the ongoingPathProvider change.

TypedSegment is an immutable class that represents single item in flutter navigation stack. You change the navigation by call e.g:

navigator.navigate([HomeSegment(), BooksSegment(), BookSegment(id:1)]);

You can see an example of this approach here: https://pavelpz.github.io/doc_simple/#home.

Source code is here: https://github.com/PavelPZ/riverpod_navigator/blob/main/examples/doc/lib/simple.dart

user_82204610
Related