Flutter Navigator 1.0

Navigation is very important for any application. It provides a uniform abstraction over navigation APIs provided by various platforms. Flutter provides two types of APIs for navigation: imperative and declarative.

In this lesson, we will cover the imperative approach (Navigator 1.0) and use it for the "Movie Time" app.

Later, we will dive deeper into the declarative approach (Navigator 2.0).

In Flutter, navigation consists of a stack of widgets in which widgets are pushed on top and popped from the top as well.

  1. Flutter Navigator class
  2. The Navigator class provides all the navigation capabilities in a Flutter app.

    Navigator provides methods to mutate the stack by a push to stack or by popping from the stack. The Navigator.push method is for navigating to a newer page and Navigator.pop is for going back from the current page.

    Here is a basic example of pop and push:

    The push method takes BuildContext as the first argument and the second argument is a PageBuilder.

    The pop method only takes BuildContext and changes the current route.

    This example uses MaterialPageRoute, which provides the transition animation and handles route changes:


    import 'package:flutter/material.dart';

     

    void main() {

      runApp(const MyApp());

    }

     

    class MyApp extends StatelessWidget {

      const MyApp({Keykey}) : super(keykey);

     

      @override

      Widget build(BuildContext context) {

        return MaterialApp(

          title'Flutter Demo',

          themeThemeData(

            primarySwatchColors.green,

          ),

          homeconst MainPage(),

        );

      }

    }

     

    class MainPage extends StatelessWidget {

      const MainPage({Keykey}) : super(keykey);

     

      @override

      Widget build(BuildContext context) {

        return Scaffold(

          appBarAppBar(

            titleconst Text("Main Page"),

          ),

          bodyCenter(

            childOutlinedButton(

              childconst Text("Go To Second Page"),

              onPressed: () {

                Navigator.push(

                    contextMaterialPageRoute(builder: (context) => SecondPage()));

              },

            ),

          ),

        );

      }

    }

     

    class SecondPage extends StatelessWidget {

      const SecondPage({Keykey}) : super(keykey);

     

      @override

      Widget build(BuildContext context) {

        return Scaffold(

          appBarAppBar(

            titleconst Text("Second Page"),

            backgroundColorColors.red,

          ),

          bodyCenter(

            childOutlinedButton(

              childconst Text("Go Back To Main Page"),

              onPressed: () {

                Navigator.pop(context);

              },

            ),

          ),

        );

      }

    }






    Navigator provides more methods, including pushReplacement, that make arguments similar to push. It will replace the current route, so navigating back to the older route is not possible. For example, upon successful login, you would want to use pushReplacement to prevent the user from returning to the login screen.



  3. Named routes
  4. Named Routes allow you to change the path by using strings instead of providing component classes, which in turn enables you to reuse code.

    Named routes are defined as a map on MaterialApp. These routes are usable from any part of the application.

    • Defining routes
    • The route is a map with string keys and values such as builders that are passed to the routes property on MaterialApp:


          MaterialApp(

            title'Flutter Navigator 1.0',

            themeThemeData(

              primarySwatchColors.green,

            ),

            homeconst MainPage(),

            routes: {

              "second": (context) => SecondPage(),

              "third": (context) => ThirdPage()

            },

          );




    • Using named routes
    • Instead of push, pushNamed is used to change to a new route.

      Similarly, pushReplacementNamed is used instead of pushReplacement. The pop method is the same for all the routes.


      import 'package:flutter/material.dart';

       

      void main() {

        runApp(const MyApp());

      }

       

      class MyApp extends StatelessWidget {

        const MyApp({Keykey}) : super(keykey);

       

        @override

        Widget build(BuildContext context) {

          return 

          MaterialApp(

            title'Flutter Navigator 1.0',

            themeThemeData(

              primarySwatchColors.green,

            ),

            homeconst MainPage(),

            routes: {

              "second": (context) => SecondPage(),

              "third": (context) => ThirdPage()

            },

          );

        }

      }

       

      class MainPage extends StatelessWidget {

        const MainPage({Keykey}) : super(keykey);

       

        @override

        Widget build(BuildContext context) {

          return Scaffold(

            appBarAppBar(

              titleconst Text("Main Page"),

            ),

            bodyCenter(

                childColumn(

              children: [

                OutlinedButton(

                  childconst Text("Go  To Second Page"),

                  onPressed: () {

                    Navigator.pushNamed(context"second");

                  },

                ),

                OutlinedButton(

                  childconst Text("Go To Third Page"),

                  onPressed: () {

                    Navigator.pushNamed(context"third");

                  },

                )

              ],

            )),

          );

        }

      }

       

      class SecondPage extends StatelessWidget {

        const SecondPage({Keykey}) : super(keykey);

       

        @override

        Widget build(BuildContext context) {

          return Scaffold(

            appBarAppBar(

              titleconst Text("Second Page"),

              backgroundColorColors.red,

            ),

            bodyCenter(

                childColumn(

              children: [

                OutlinedButton(

                  childconst Text("Go Back To Main Page"),

                  onPressed: () {

                    Navigator.pop(context);

                  },

                ),

                OutlinedButton(

                  childconst Text("Go To Third Page"),

                  onPressed: () {

                    Navigator.pushReplacementNamed(context"third");

                  },

                )

              ],

            )),

          );

        }

      }

       

      class ThirdPage extends StatelessWidget {

        const ThirdPage({Keykey}) : super(keykey);

       

        @override

        Widget build(BuildContext context) {

          return Scaffold(

            appBarAppBar(

              titleconst Text("Second Page"),

              backgroundColorColors.blueGrey,

            ),

            bodyCenter(

                childColumn(

              children: [

                OutlinedButton(

                  childconst Text("Go Back To Main Page"),

                  onPressed: () {

                    Navigator.pop(context);

                  },

                ),

                OutlinedButton(

                  childconst Text("Go To Second Page"),

                  onPressed: () {

                    Navigator.pushReplacementNamed(context"second");

                  },

                )

              ],

            )),

          );

        }

      }













Soruces :

Understanding Flutter navigation and routing
Learning Flutter’s new navigation and routing system