Flutter Navigation and Routing
Flutter Navigation
We learned how to create a new route and manage it using the Navigator to navigate to a new screen. The Navigator keeps track of a route’s stack-based history. This strategy is not advantageous if you need to browse to the same screen in other places of the app because it leads in code duplication. The solution to this problem can be eliminated by designing named routes and using them for navigation.
The Navigator.pushNamed() function can be used to interact with named routes. There are two necessary arguments (build context and string) and one optional argument for this function. Furthermore, we are aware of the MaterialPageRoute, which is in charge of page transition. It is tough to alter the page if we do not use this.
Example:
import 'package:flutter/material.dart';
void main() {
runApp(Nav2App());
}
class Nav2App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
routes: {
'/': (context) => HomeScreen(),
'/details': (context) => DetailScreen(),
},
);
}
}
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: FlatButton(
child: Text('View Details'),
onPressed: () {
Navigator.pushNamed(
context,
'/details',
);
},
),
),
);
}
}
class DetailScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: FlatButton(
child: Text('Pop!'),
onPressed: () {
Navigator.pop(context);
},
),
),
);
}
}
Flutter Routing
The screens and pages in Flutter are referred to as routes, and these routes are simply widgets. A route is analogous to an Activity in Android, but it is equivalent to a ViewController in iOS.
The workflow of any mobile app is defined by going between different pages, and the method of handling navigation is known as routing. MaterialPageRoute is a basic routing class in Flutter, with two methods to travel between two routes: Navigator.push() and Navigator.pop(). To get started with navigation in your app, you’ll need to take the steps below.
Creating Route
We’re going to make two navigation routes here. Only one button has been created in both ways. It will travel to the second page if we tap the button on the first page. When we hit the button on the second page again, we are taken back to the original page. In the Flutter application, the code snippet below establishes two routes.
Example:
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
title: 'Flutter Navigation',
theme: ThemeData(
// This is the theme of your application.
primarySwatch: Colors.blue,
),
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'),
),
),
);
}
}
