Flutter - Named Routes - GeeksforGeeks

30 Jun, 2021
An app has to display multiple screens depending upon the user’s needs. A user needs to back and forth from the multiple screens to the home screen. In, Flutter this is done with the help of Navigator.
Note: In Flutter, screens and pages are called routes. 
In this article, we will explore the process of navigating through two named routes. To do so follow the below steps:
Create two routes.Navigate to the second route using Navigator.push().Return to the first route using Navigator.pop()
Create two routes.
Navigate to the second route using Navigator.push().
Return to the first route using Navigator.pop()
Let’s explore them in detail.
Here we will create two routes, the first route will have a single button that on tap leads to the second route, and similarly, the second route will have a single button that brings the user back to the first route. To do so follow the below code:
Dart
class FirstRoute extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text('First Route'),      ),      body: Center(        child: RaisedButton(          child: Text('Open route'),          onPressed: () {            // Navigation to second route          },        ),      ),    );  }} class SecondRoute extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text("Second Route"),      ),      body: Center(        child: RaisedButton(          onPressed: () {            // Navigation to first route          },          child: Text('Go back!'),        ),      ),    );  }}
To switch to a new route, use the Navigator.push() method. The push() method adds a Route to the stack of routes managed by the Navigator. In the build() method of the first Route widget, update the onPressed() callback to lead to the second route as below:
Dart
// onPressed actiononPressed: () {  Navigator.push(    context,    MaterialPageRoute(builder: (context) => SecondRoute()),  );}
To implement a return to the original route, update the onPressed() callback in the second Route as below:
Dart
// onPressed action in second routeonPressed: () {  Navigator.pop(context);}
Complete Source Code:
Dart
import 'package:flutter/material.dart'; void main() {  runApp(MaterialApp(    title: 'Named Routes',    initialRoute: '/',    routes: {      '/': (context) => First_route(),      '/second': (context) => Second_route(),    },  ));} class First_route extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text('GFG First Route'),        backgroundColor: Colors.green,      ),      body: Center(        child: RaisedButton(          child: Text('Launch screen'),          onPressed: () {            Navigator.pushNamed(context, '/second');          },        ),      ),    );  }} class Second_route extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text("GFG Second Route"),        backgroundColor: Colors.green,      ),      body: Center(        child: RaisedButton(          onPressed: () {            Navigator.pop(context);          },          child: Text('Go back!'),        ),      ),    );  }}
Output:
Media error: Format(s) not supported or source(s) not found
hanifullah007
android
Flutter
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Listview.builder in Flutter
Flutter - DropDownButton Widget
Flutter - Asset Image
Splash Screen in Flutter
Flutter - Custom Bottom Navigation Bar
Flutter - DropDownButton Widget
Flutter - Custom Bottom Navigation Bar
Flutter - Checkbox Widget
Flutter - Flexible Widget
Flutter - BoxShadow Widget