Flutter – Named Routes

A app has to display multiple screens depending upon the user 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:

  1. Create two routes.
  2. Navigate to the second route using Navigator.push().
  3. Return to the first route using Navigator.pop()

Let’s explore them in detail.

Creating Two Routes:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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!'),
        ),
      ),
    );
  }
}

chevron_right


Navigating with Navigator.push(). to the second route:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

// onPressed action
onPressed: () {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SecondRoute()),
  );
}

chevron_right


Return to the first route using Navigator.pop():

To implement a return to the original route, update the onPressed() callback in the second Route as below:

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

// onPressed action in second route
onPressed: () {
  Navigator.pop(context);
}

chevron_right


Complete Source Code:

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

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!'),
        ),
      ),
    );
  }
}

chevron_right


 
 

Output:

 

 




My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.