Routes and Navigator in Flutter

Introduction: Flutter is an open source mobile app SDK created by Google. Flutter uses Dart language for creating mobile apps, that follows object oriented concepts. Flutter have a very good reach among mobile app developers because of it’s striking features like cross platform development, hot reload, hot restart, eye catching UI, etc. In flutter, from text till padding, everything is a widget. Everything in Flutter, is a widget.

Route: Apps are the new trend. The number of apps available in the play stores nowadays are quite a lot. The apps display their content in a full-screen container called pages or screens. In flutter, the pages or screens are called as the Routes. In android, these pages/screens are referred as Activity and in iOS, it is referred as ViewController. But, in flutter, routes are referred as Widgets. In Flutter, a Page / Screen is called as a Route.

Creating routes: A route can be written in the form of a “Class” in Dart using object-oriented concepts. Each route can be written as a separate class having its own contents and UI.

Now let’s create two routes, each having unique App Bars and Raised Buttons. The code are as follows:

filter_none

edit
close

play_arrow

link
brightness_4
code

class HomeRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Geeks for Geeks'),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Click Me!'),
          onPressed: () {
            /* Contains the code that helps us
             navigate to the second route. */
          },
        ),
      ),
    );
  }
}
  
class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Click Me Page"),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            /* Contains the code that helps us
             navigate to first route. */
          },
          child: Text('Home!'),
        ),
      ),
    );
  }
}

chevron_right


Navigator: As the name suggests, Navigator is a widget that helps us to navigate between the routes. The navigator follows stack method when dealing with the routes. Based on the actions made by the user, the routes are stacked one over the other and when pressed back, it goes to the most recently visited route. Navigator is a widget that follows a stack discipline.



Defining Home: While navigating, the first thing that we need to do is to define or initialize the “home page”. The home page can be any route according to our need. The home usually will be placed in the bottom of the navigator stack. Now let’s see how to initialize our HomeRoute() as our home page:

filter_none

edit
close

play_arrow

link
brightness_4
code

void main() {
  runApp(MaterialApp(
    home: HomeRoute(),
  ));
}

chevron_right


Navigating to a Page: Since, we have defined our Home, all the remaining is to navigate from home to another route of the app. For that the navigator widget has a method called Navigator.push(). This method pushes the route on top of the home, thereby displaying the second route. The code for pushing a route into the stack is as follows:

filter_none

edit
close

play_arrow

link
brightness_4
code

// Within the `HomeRoute` widget
onPressed: () {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SecondRoute()),
  );
}

chevron_right


Navigating Back to Home: Now we have arrived to our destination, but how do we go back home? For that, the navigator has a method called Navigator.pop(). This helps us to remove the present route from the stack, so that we go back to our home route. This can be done as follows:

filter_none

edit
close

play_arrow

link
brightness_4
code

// Within the SecondRoute widget
onPressed: () {
  Navigator.pop(context);
}

chevron_right


Example: So, this is how we can navigate between two pages in an app. The whole code for the above flutter app is as follows:

filter_none

edit
close

play_arrow

link
brightness_4
code

import 'package:flutter/material.dart';
  
void main() {
  runApp(MaterialApp(
    home: HomeRoute(),
  ));
}
  
class HomeRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Geeks for Geeks'),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Click Me!'),
          onPressed: () {
              Navigator.push(
              context,
              MaterialPageRoute(builder: 
                (context) => SecondRoute()),
              );
          }
        ),
      ),
    );
  }
}
  
class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Click Me Page"),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
              Navigator.pop(context);
          },
          child: Text('Home!'),
        ),
      ),
    );
  }
}

chevron_right


Output:




My Personal Notes arrow_drop_up

A Passionate Neophile

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.