Scribd
Upload
10 views8 pages

Week10 2

Uploaded by

amir.raza537918
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
10 views8 pages

Week10 2

Uploaded by

amir.raza537918
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 8

Navigation and Routes

Navigation and Routes


Every mobile application contains several screens and pages and each
screen/pages known as routes (Activity in Android, and ViewController
in iOS).
In any mobile app, navigating to different pages defines the workflow of
the application, and the way to handle the navigation is known
as routing.
To navigate between two routes, Flutter provides a basic routing
class MaterialPageRoute and two methods
1. Navigator.push()
2. Navigator.pop()
Navigator.push()
Navigate using Navigator.push() method
The Navigator.push() method is used to navigate/switch to a new
route/page/screen. Here, below in code, the push() method adds a
page/route on the stack and then manage it by using the Navigator.

TextButton(onPressed: () {
Navigator.push(context, MaterialPageRoute(builder: (context)=> sroutApp()));
},
Navigator.pop()
Return to the first route using Navigator.pop() method.
Navigator.pop() method pop-up or close the second route from the
stack and return to the first route.
To return to the original route, Navigator.pop() method will be call
inside onPressed() callback method in the SecondRoute widget.

TextButton(onPressed: () {
Navigator.pop(context);
},
Navigation Route
class SecondRoute extends StatelessWidget { class FirstRoute extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Scaffold(
appBar: AppBar( AppBar: AppBar(
title: Text("Second Screen"), title: Text('First Screen'),
), ),
body: Center( body: Center(
child: RaisedButton( child: RaisedButton(
color: Colors.blueGrey, child: Text('Click Here'),
onPressed: () { color: Colors.orangeAccent,
Navigator.pop(context); onPressed: () {
}, Navigator.push(
child: Text('Go back'), context,
), ), ); MaterialPageRoute(builder: (context) => SecondRoute()
} } ), ); },
),), ); } }
Navigation with Route Named Route
The Navigator maintains the stack-based history of routes. If there is a
need to navigate to the same screen in many parts of the app or we
want to move from first screen to third and from third to fifth. We can
work with named routes by using the Navigator.pushNamed() function
and initialRoute properties
initialRoute and Named route
The initialRoute property defines which route the app should start with.
The routes property defines the available named routes and the widgets to
build when navigating to those routes. InitialRoute is the loaded when
MaterialApp is instantiated.

initialRoute: '/',
routes: {
// When navigating to the "/" route, build the HomeScreen widget.
'/': (context) => HomeScreen(),
// When navigating to the "/second" route, build the SecondScreen widget.
'/second': (context) => SecondScreen(),
},
Navigator.push()
The Navigator.push() method is used to navigate/switch to a new
route/page/screen. The push() method adds a page/route on the
stack.
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondRoute()),
);
}

You might also like