Open In App

Flutter - Named Routes

Last Updated : 15 Jul, 2025
Comments
Improve
Suggest changes
10 Likes
Like
Report

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:



D

ddeevviissaavviittaa
Improve
Article Tags :

Explore

Lightbox