Flutter Navigator Route — Part 1

Welcome to Flutter Tutorial Series!!

In Flutter everything is widget so as this navigator route is also a widget. So the navigator is a widget which manages pages in our application like stack like format, It behaves like normal stack implementation.

A good application has multiple pages which make the app beautiful.

Navigator route is used to show content on new pages or screens, which is similar In android and iOS where for the android route is equivalent to activity, and for iOS it is viewController.

There are two ways to use the route

1. Navigator.push(): The push method is used to add another route onto the top of the current stack. The new page is displayed over the previous one.
2. Navigator.pop(): As the Navigator works like a stack, it uses the LIFO (Last-In, First-Out) principle. The pop method removes the topmost route from the stack. This displays the previous page to the user.

Now, we will directly jump to its coding part where we will see how a user can navigate from one screen over other.

First, create two pages which are a stateless widget, where the First screen having one button called “Go to second screen” which will be used to launch second screen.

First Screen

The second screen will also have one button with the text “Go Back” which will be used to navigate the user to the previous page.

Second Screen

Code Snippet for above screenshot:

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Routes",
      home: new FirstScreen(),
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text("First Widget"),
      ),
      body: Center(
        child: RaisedButton(onPressed: () {
        },
        child: Text("Go to second screen"),),
      ),
    );
  }
}


class SecondScreen extends StatelessWidget {
static String tag = "second_widget";
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text("Second Widget"),
      ),
      body: Center(
        child: RaisedButton(onPressed: () {
        },
          child: Text("Go Back"),),
      ),
    );
  }
}

Above code only going to create two stateless pages with one button. Now we will be going to see how we can push and pop the route explicitly.

Push Route for First Screen:

body: RaisedButton(onPressed: () {
    Navigator.push(context, MaterialPageRoute(builder: (context) => SecondWidget()));
  },
  child: Text("Go to second screen"),),
);

By adding above code will push your second widget on top of the stack, MaterialPageRoute will be used to provide default animation effects for navigation from one screen to another.

Pop Route for Second Screen:

body: RaisedButton(onPressed: () {
    Navigator.pop(context);
  },
    child: Text("Go Back"),),
);

By adding the above code will pop your current page from the stack and will navigate you to the previous page.

Now we will be going to see named route which another way to navigate from one page to another.

Mobile apps often manage a large number of routes and it’s often easiest to refer to them by name. Route names, by convention, use a path-like structure (for example, ‘/a/b/c’). The app’s home page route is named ‘/’ by default.

The MaterialApp can be created with a Map<String, WidgetBuilder> which maps from a route's name to a builder function that will create it.

Create navigator routes:

final routes = <String, WidgetBuilder> {
  SecondScreen.tag:(context) => SecondScreen(),
  // Add many routes in same format 
};

Above routes, the map will help flutter to decide which pages/screen you would like to navigate in the future. Once you assigned those route in your MaterialApp only that can be used. If other that is used flutter give you an exception for the invalid route.

class MyApp extends StatelessWidget {
  final routes = <String, WidgetBuilder> {
    SecondScreen.tag:(context) => SecondScreen(),
  };

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Routes",
      home: new FirstScreen(),
      routes: routes, // Only change from explicit route 
    );
  }
}

Above code shows you the usage of the route, where we declared this while initializing of application.

Push route for navigating to another screen:

body: RaisedButton(onPressed: () {
  Navigator.of(context).pushNamed(SecondScreen.tag);
},

SecondScreen.tag is a static field which we have added SecondScreen class for declaring routes and use the same for pushing it on navigator stack.

Note: Navigator.pop() not going to change for both explicit route and named route.

Github Link:
https://github.com/jitsm555/Flutter-Tutorial/tree/master/session_04_navigation_route

Youtube Link: