Flutter routes, named routes | Navigator Routes

 

Flutter Routes :

Flutter Routes, navigator widget is used to move from one screen to another, the navigator manages route objects and provide the two way routing maintaining a stack of them.

As flutter supports multiple platforms in android there will be a back button to return to previous screen where as iOS don’t have so a back button is added to AppBar for user navigation.

In app we have different screens so it’s easier to manage the flutter routes for them with their respective names as for example first screen as ‘/first’ and so on.. called to be named navigator routes.

We can maintain a constant class for routes or create a separate class for specifying routes so that we can use the routes from any part of the app.

In this tutorial we will get to know the easy way of implementing the routes in flutter app this can be also applicable for flutter web apps as well.

 

Flutter Routes Video Tutorial :

Go through the below tutorial for more detailed information on flutter routes implementation in flutter.

 

 

Project Structure :

This image depicts the project structure for flutter routes implementation.

 

routes.dart :

Declare the routes globally so that we can use them throughout the app.

class Routes {
  static const String homeRoute = '/';
  static const String aboutRoute = '/about';
  static const String settingsRoute = '/settings';
}

 

 

Now we will add two screens by using which we can navigate form main screen to them and vice versa.

 

about.dart :

Add a screen about with a simple text widget stating about screen

import 'package:flutter/material.dart';

class About extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("About"),
      ),
      body: Center(
        child: Container(
          child: Text(
            "About",
            style: TextStyle(
              fontSize: 24,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    );
  }
}

 

 

settings.dart :

Add a screen settings with a simple text widget stating setting screen

import 'package:flutter/material.dart';

class Settings extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Settings"),
      ),
      body: Center(
        child: Container(
          child: Text(
            "Settings",
            style: TextStyle(
              fontSize: 24,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    );
  }
}

 

 

main.dart :

Initialize with void main() and specify the default class MyApp().

void main() {
  runApp(MyApp());
}

 

 

Add a initial route

initialRoute: '/',

 

 

Access the routes from routes class

routes: {
  Routes.aboutRoute: (context) => About(),
  Routes.settingsRoute: (context) => Settings(),
},

 

 

and define them in material app

MaterialApp(
  initialRoute: '/', // Set the initial route of the application
  routes: {
    Routes.aboutRoute: (context) => About(),      // Define the 'aboutRoute' and associated widget
    Routes.settingsRoute: (context) => Settings(), // Define the 'settingsRoute' and associated widget
  },
  home: MyHome(), // Specify the default widget to be displayed as the home screen
)

 

Add two buttons using which we can navigate through screens

ElevatedButton(
  onPressed: () {
    Navigator.pushNamed(context, Routes.aboutRoute);
  },
  child: Text("About"),
),

ElevatedButton(
  onPressed: () {
    Navigator.pushNamed(context, Routes.settingsRoute);
  },
  child: Text("Settings"),
)

 

 

Full Code :

Providing the full code for flutter routes implementation.

import 'package:flutter/material.dart';
import 'package:flutter_routes/about.dart';
import 'package:flutter_routes/settings.dart';
import 'package:flutter_routes/routes.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        Routes.aboutRoute: (context) => About(),
        Routes.settingsRoute: (context) => Settings(),
      },
      home: MyHome(),
    );
  }
}

class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Routes"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              "Routes Demo",
              style: TextStyle(fontSize: 30),
            ),
            SizedBox(height: 50),
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, Routes.aboutRoute);
              },
              child: Text("About"),
            ),
            SizedBox(height: 30),
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, Routes.settingsRoute);
              },
              child: Text("Settings"),
            ),
          ],
        ),
      ),
    );
  }
}

 

 

Flutter Routes Output :

This screen depicts the usage of routes using named navigator routes

 

If you have any questions, feel free to drop them in the comments below. If you enjoyed this tutorial, show us some love by liking and sharing for more exciting updates