Flutter – Named Routes

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:

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

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 {
  const firstRoute({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('GFG First Route'),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text('Launch screen'),
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
        ), // Elevated

        // RaisedButton is deprecated now
        // child: RaisedButton(
        //   child: const Text('Launch screen'),
        //   onPressed: () {
        //     Navigator.pushNamed(context, '/second');
        //   },
        // ),
      ),
    );
  }
}

// ignore: camel_case_types
class secondRoute extends StatelessWidget {
  const secondRoute({Key? key}) : super(key: key);

  @override
  // ignore: dead_code
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("GFG Second Route"),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: const Text('Go back!'),
        ), // ElevatedButton
      ),

      // RaisedButton is deprecated now
      // child: RaisedButton(
      //   onPressed: () {
      //     Navigator.pop(context);
      //   },
      //   child: const 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) => const firstRoute(),
      '/second': (context) => const secondRoute(),
    },
  ));
}

// ignore: camel_case_types
class firstRoute extends StatelessWidget {
  const firstRoute({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('GFG First Route'),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text('Launch screen'),
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
        ), // Elevated

        // RaisedButton is deprecated now
        // child: RaisedButton(
        //   child: const Text('Launch screen'),
        //   onPressed: () {
        //     Navigator.pushNamed(context, '/second');
        //   },
        // ),
      ),
    );
  }
}

// ignore: camel_case_types
class secondRoute extends StatelessWidget {
  const secondRoute({Key? key}) : super(key: key);

  @override
  // ignore: dead_code
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("GFG Second Route"),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: const Text('Go back!'),
        ), // ElevatedButton
      ),

      // RaisedButton is deprecated now
      // child: RaisedButton(
      //   onPressed: () {
      //     Navigator.pop(context);
      //   },
      //   child: const Text('Go back!'),
      // ),
    );
  }
}

Output: