Skip to content
Related Articles

Related Articles

Improve Article
Flutter – Named Routes
  • Last Updated : 10 Sep, 2020

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




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

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




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

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




// onPressed action in second route
onPressed: () {
  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:

 

 

Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!



My Personal Notes arrow_drop_up
Recommended Articles
Page :