Multi Page Applications in Flutter

Introduction: Apps are widely used by humans in this techie world. The number of apps in the app store are increasing day by day. Due to this competition, app developers have started to add a number of features to their apps. To reduce this complexity, the content of the app is mostly divided into various pages so that the user can navigate between these pages with ease.

Flutter is an open source mobile app SDK, that is used to develop cross platform mobile applications. Flutter is becoming popular these years because of its stunning features like hot reload, attractive UIs, etc. In Flutter, everything is a Widget.

Routes and Navigators: In Flutter, pages/screens are called as Routes. The process of navigating from one route to another is performed by a widget called the Navigator. The navigator maintains all its child route in the form of stacks. It has many methods like push() and pop() which works under stack discipline. But, for multi page application, we are going to use a unique method called the pushNamed(). This method mainly follows object-oriented concepts.

The Navigator.pushNamed() method is used to call a route, whose class has been created and defined beforehand. It is just like calling a class when needed in OOPs. Now, lets move on creating our Multi-Page Application.

Multi Page Application:



  • Creating a Route: Routes are mainly created in the form of classes. Each route has a unique class with unique contents and UI in them. Here, we are going to create three routes namely, HomeRoute(), SecondRoute() and ThirdRoute(). Each route will have an App bar containing a unique title and a raised button for navigating between the routes. A route can be created 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: Column(
              children: <Widget>[
              RaisedButton(
                child: Text('Click Me!'),
                onPressed: () {
                  /* Contains the code that helps us
                 navigate to the second route. */
                },
              ),
              RaisedButton(
                child: Text('Tap Me!'),
                onPressed: () {
                  /* Contains the code that helps us
                 navigate to the third route. */
                },
              ),
            ],
          )),
        );
      }
    }

    chevron_right

    
    

  •  
     

  • Defining the Routes: Before navigating between routes, it is highly essential to define them in the MaterialApp widget. This helps us to access and call them as easily as possible. Since, we are initializing the first route, it is not necessary for us to mention the home route. The routes can be defined as follows:
     

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    void main() {
      runApp(MaterialApp(
        initialRoute: '/',
        routes: {
          '/': (context) => HomeRoute(),
          '/second': (context) => SecondRoute(),
          '/third': (context) => ThirdRoute(),
        },
      ));
    }

    chevron_right

    
    

    From the code, it is understood that each route has been named uniquely. So, when the navigator widget encounters any of these names in the route class then it navigates to the respective route. The initialRoute in this code specifies the starting route of the app and it is symbolized by ‘/’ symbol.  It is a mandatory thing to initialize the home page in this widget. 

  • Navigating to a Page: The Navigator.pushNamed() method comes into play in this segment. This method calls the name of a particular route in a route class. Thereby, initializing the navigation process. The navigation can be done as follows:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    onPressed: () {
      Navigator.pushNamed(context, '/second');
    }

    chevron_right

    
    

  • Navigating back: But, when it comes to visiting the most recent route visited, Navigator.pop() method can be used. It helps us to navigate back to the last route. In this case, the stack discipline is as followed. The pop method is used as follows:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    onPressed: () {
      Navigator.pop(context);
    }

    chevron_right

    
    

So, now let’s see how it’s all these codes have been combined to create this Multi-Page Application.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

import 'package:flutter/material.dart';
  
void main() {
  runApp(MaterialApp(
    initialRoute: '/',
    routes: {
      '/': (context) => HomeRoute(),
      '/second': (context) => SecondRoute(),
      '/third': (context) => ThirdRoute(),
    },
  ));
}
  
class HomeRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Geeks for Geeks'),
        backgroundColor: Colors.green,
      ),
      body: Center(
          child: Column(
          children: <Widget>[
          RaisedButton(
            child: Text('Click Me!'),
            onPressed: () {
              Navigator.pushNamed(context, '/second');
            },
          ),
          RaisedButton(
            child: Text('Tap Me!'),
            onPressed: () {
              Navigator.pushNamed(context, '/third');
            },
          ),
        ],
      )),
    );
  }
}
  
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('Back!'),
        ),
      ),
    );
  }
}
  
class ThirdRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Tap Me Page"),
        backgroundColor: Colors.green,
      ),
    );
  }
}

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.