Flutter Navigation and Routing
Navigation and routing are some of the most important concepts of all applications, which helps us to move between pages. We know that every application contains several screens displaying different types of information. For example, An app with a Home page with login and signup option so we want to move between these three pages and after login there will be more pages.
In Flutter, these screens and pages are called routes, and these routes are just widgets.
In any mobile app, navigating between pages defines the workflow of an application, and the way to handle this is known as routing. Flutter provides a basic routing class MaterialPageRoute with two methods Navigator.push() and Navigator.pop() that are used to navigate between routes.
Let us take a simple example to understand the navigation between different pages:
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
title: 'Flutter Navigation',
theme: ThemeData(
// This is the theme of your application.
primarySwatch: Colors.green,
),
home: FirstRoute(),
));
}
class FirstRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('First Screen'),
),
body: Center(
child: RaisedButton(
child: Text('Click Here'),
color: Colors.orangeAccent,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondRoute()),
);
},
),
),
);
}
}
class SecondRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Second Screen"),
),
body: Center(
child: RaisedButton(
color: Colors.blueGrey,
onPressed: () {
Navigator.pop(context);
},
child: Text('Go back'),
),
),
);
}
}
Output
Click Click Here button and you will be navigated to a second screen as shown below. Next we can click Go Back, to return to the first page.
Navigation with Named Routes
Now We have learned how to navigate between screens using the Navigator. The Navigator widget maintains a stack-based history of all routes we move through. If there is a need to move between many screens, this approach is not very useful because it will result in code duplication. The solution to this problem is by defining named routes which can be used for navigation.
Named routes can be used by using the Navigator.pushNamed() function. This function takes two required parameters: build context and name of the route and an optional argument. Also, the MaterialPageRoute will be responsible for the page transitions. If we don’t use this, it will be difficult to change the page.
Lets see an example to understand
import 'package:flutter/material.dart';
void main() {
runApp( MaterialApp(
title: 'Named Route Navigation',
theme: ThemeData(
// This is the theme of your application.
primarySwatch: Colors.green,
),
// Start the app with the "/" named route. In this case, the app starts
// on the FirstScreen widget.
initialRoute: '/',
routes: {
// When navigating to the "/" route, build the FirstScreen widget.
'/': (context) => HomeScreen(),
// When navigating to the "/second" route, build the SecondScreen widget.
'/second': (context) => SecondScreen(),
},
));
}
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home Screen'),
),
body: Center(
child: RaisedButton(
child: Text('Click Here'),
color: Colors.orangeAccent,
onPressed: () {
Navigator.pushNamed(context, '/second');
},
),
),
);
}
}
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Second Screen"),
),
body: Center(
child: RaisedButton(
color: Colors.blueGrey,
onPressed: () {
Navigator.pop(context);
},
child: Text('Go back!'),
),
),
);
}
}
Output
Click Click Here button and you will be navigated to a second screen as shown below. Next we can click Go Back, to return to the first page.
