Navigation And Routing In Flutter

Navigation and Routing in Flutter

Navigation and routing are important for an app with multiple pages and screens. In your first task, you developed an app with a single screen, contained in a single file, called main.dart. In this task, you will be required to create an app with multiple screens, with navigations.

Navigation

Many apps have a navigator near the top of their widget hierarchy to display their logical history using an Overlay with the most recently visited pages visually on top of the older pages. Using this pattern lets the navigator visually transition from one page to another by moving the widgets around in the overlay. Similarly, the navigator can show a Dialog by positioning the Dialog widget above the current page.
To navigate to a different page or a different part of an app, we use the Navigator class. We generally link the navigation code as a callback function to an event. For example, if a button is pressed or a particular task is complete, a transaction will navigate to a different page after completion. Here is an example to link a callback on a button, to navigate to another page.

...
onPressed: () {
    Navigator.push(
        context,
        MaterialPageRoute(
            builder: (context) => NextPage(),
        ));
   },
...

Here a callback function is created for a widget, for example, RaisedButton, inside the onPressed property of the widget. Here we used the push() function of the Navigator class to navigate to the widget in the NextPage class. To navigate back to the previous route in the navigation stack, you can use the pop() function. You can use different functions of the Navigator class as per the routing need.

Routes

You can also create named routes as an alternative for the bulky code inside the push() function. Some parts of the code change when adding named routes. Instead of defining the home parameter of the MaterialApp widget, you need to define initialRoute.

MaterialApp(
  // Start the app with the "/" named route. In this case, the app starts
  // on the FirstScreen widget.
  initialRoute: '/',
  routes: {
    // When navigating to the "/" route, build the FirstScreen widget.
    '/': (context) => FirstScreen(),
    // When navigating to the "/second" route, build the SecondScreen widget.
    '/second': (context) => SecondScreen(),
  },
);

To navigate to the SecondScreen page, instead of using the push() function, you will need to use the pushNamed() function.

onPressed: () {
  // Navigate to the second screen using a named route.
  Navigator.pushNamed(context, '/second');
}

You can also animate your page transition to different curves, tweens and durations. You can find it in the resources section.

Managing and Organizing the Folder Structure

Until now, you have been writing all your code in the main.dart file with a single class, most usually the HomePage class. But, as you write longer code, with increasing complexity, it will be harder for you to include all your classes, functions and widgets into the same main.dart file.
To make the code less complex and readable for the developer, we create separate .dart files to keep different classes and Widgets. The general convention is to keep a single class in a single .dart file and place these files into different folders according to their functions. For example, if we have a set of classes handling the login and sign up of a user in a social media app, we will organise the files in a folder with a name similar to the tasks they perform which in this case is Authentication. Similarly, the classes and widgets constituting the social media app's home page can be classified into the folder name Home.

Generally, we name the files so that it maintains similarity to the name of the class inside it.

Resources

• Navigate to a new screen and back
• Navigate with named routes
• Animate a page route transition
• Navigation in Flutter