Skip to content
Related Articles

Related Articles

Improve Article
Routes and Navigator in Flutter
  • Last Updated : 03 Jun, 2020

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:




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

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:




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

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:




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

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:




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

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:




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

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :