Flutter - Named Routes

Last Updated : 07 Mar, 2025

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.

Steps to Implement Named Routes in Flutter

Step 1 : Create a new flutter application

Create a new Flutter application using command Prompt. For creating a new app, write flutter create YOUR_APP_NAME and run this command.

flutter create routes_flutter

To know more about it refer this article: Creating a Simple Application in Flutter

Step 2 : 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');
          },
        ),
      ),
    );
  }
}

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

Step 3 : Navigating with Navigator.pushNamed(). to the second route

To switch to a new route, use the Navigator.pushNamed() method. The pushNamed() method push a named route onto the navigator that most tightly encloses the given context, update the onPressed() callback to lead to the second route as below:

Dart

 onPressed: () {
            Navigator.pushNamed(context, '/second');
},

Step 4 : 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: () {
  Navigator.pop(context);
}

Complete Source Code

main.dart:

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Named Routes',
    debugShowCheckedModeBanner: false,
    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,
        foregroundColor: Colors.white,
      ),
      body: Center(
        child: ElevatedButton(
          style: ElevatedButton.styleFrom(
              backgroundColor: Colors.green, foregroundColor: Colors.white),
          child: const Text('Launch screen'),
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
        ), // Elevated
      ),
    );
  }
}

// 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,
        foregroundColor: Colors.white,
      ),
      body: Center(
        child: ElevatedButton(
          style: ElevatedButton.styleFrom(
              backgroundColor: Colors.green, foregroundColor: Colors.white),
          onPressed: () {
            Navigator.pop(context);
          },
          child: const Text('Go back!'),
        ), // ElevatedButton
      ),
    );
  }
}

To know more about ElevatedButton in flutter refer this article : Flutter – ElevatedButton Widget

Output:

Flutter - Arguments in Named Routes

ddeevviissaavviittaa

Improve

Article Tags :

Flutter - Named Routes

Steps to Implement Named Routes in Flutter

Step 1 : Create a new flutter application

Step 2 : Creating Two Routes

Step 3 : Navigating with Navigator.pushNamed(). to the second route

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

Complete Source Code

Similar Reads

Basics

Key Widgets

UI Components

Design & Animations

Forms & Gestures

Navigation & Routing

Hardware Interaction

Sample Flutter Apps

Advance Concepts

Thank You!

What kind of Experience do you want to share?