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

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

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: '/',
    routes: {
      Routes.aboutRoute: (context) => About(),
      Routes.settingsRoute: (context) => Settings(),
    },
    home: MyHome());

Add two buttons using which we can navigate through screens

RaisedButton(
    onPressed: () => {Navigator.pushNamed(context, Routes.aboutRoute)},
    child: Text("About")),

RaisedButton(
    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),
            RaisedButton(
                onPressed: () => {Navigator.pushNamed(context, Routes.aboutRoute)},
                child: Text("About")),
            SizedBox(height: 30),
            RaisedButton(
                onPressed: () => {Navigator.pushNamed(context, Routes.settingsRoute)},
                child: Text("Settings"))
          ],
        ),
      ),
    );
  }
}