In this tutorial, we’ll cover the Routing in Flutter.
Flutter Navigator class
The Navigator class provides all the navigation capabilities in a Flutter app.
Navigator offers ways to push objects to the stack or remove objects from the stack. Navigator.pop allows you to return from the current page and Navigator.push allows you to navigate to a more recent version of the page.
It’s a basic example of pop and push method. The push method takes BuildContext as the first argument and the second argument is a PageBuilder.
You can also check out our Flutter app development services for more Flutter App Development.
|
1 2 3 4 5 6 7 |
Navigator.of(context).push( MaterialPageRoute( builder: (context) => const SCREEN_NAME(song: song), ), ); |
This is a basic example of pop the method. The pop method takes BuildContext and removes the Item/Page from the stack of navigation.
|
1 2 3 |
Navigator.pop(context); |
NOTE: Navigator provides more methods including pushReplacement, which make arguments similar to push. It will replace the current route, so navigating back to the older route is not possible.
Named routes in flutter
The named route allows you to change the path by using strings instead of providing component classes, which in turn enables you to reuse the navigation code.
Routes are defined as a map on MaterialApp. These routes are accessible in the whole application.
Intializing routes
The route is a map with string keys and values such as builders that are passed to the routes property on MaterialApp:
|
1 2 3 4 5 6 7 8 9 10 11 |
void main() { runApp(MaterialApp( title: 'My App', home: Main(), /// Routes defined here routes: { "/":(context)=> FirstScreen() "second":(context)=> SecondScreen() }, )); } |
Using of named routes
Instead of push, pushNamed is used to change to a new route. Similarly, pushReplacementNamed is used instead of pushReplacement. The pop the method is the same for all the routes.
|
1 2 |
Navigator.pushNamed(context, '/second'); Navigator.pushReplacementNamed(context, "second"); |
NOTE: You can pass the value to pop method. here is an example.
|
1 2 3 |
Navigator.pop(context, ADD_VALUE_HERE); |
Here is another way to define your routes and keep your code more cleaner.
We need to create a class named AppRoutes.dart
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
class AppRoutes { static const String splash = 'splash'; static const String home = 'homePage'; static const String dismissiblePage = 'dismissiblePage'; static Route<dynamic> generateRoute(RouteSettings settings) { switch (settings.name) { case splash: return MaterialPageRoute(builder: (_) => MyHomePage()); case home: return MaterialPageRoute( builder: (_) => const KeyboardFocusDemo(), ); case dismissiblePage: return MaterialPageRoute( builder: (_) => const DismissibleWidgetFlutter(), ); default: return _errorRoute(); } } static Route<dynamic> _errorRoute() { return MaterialPageRoute(builder: (_) { return Scaffold( appBar: AppBar( title: const Text('Error'), ), body: const Text("No Page Found"), ); }); } } |
Implement this class in our main.dart class
|
1 2 3 4 5 6 7 8 9 10 11 12 |
MaterialApp( title: 'Flutter Demo', debugShowCheckedModeBanner: false, theme: ThemeData( colorScheme: ColorScheme.fromSeed(seedColor: Colors.orange), useMaterial3: true, ), onGenerateRoute: AppRoutes.generateRoute, initialRoute: AppRoutes.splash, ) |
Thanks for reading.
Happy Coding 🙂
For more flutter tutorials, visit mobikul blog