Flutter Navigation: A Comprehensive Guide on Routing

Navigating between screens

To navigate between screens in Flutter, you can use the Navigator class. The Navigator class is responsible for managing the stack of screens that are currently displayed.

To navigate to a new screen, you can use the push() method. The push() method takes a Route object as a parameter. A Route object represents a single screen in the navigation stack.

For example, the following code navigates to a new screen called MyScreen:

final route = MaterialPageRoute(builder: (context) => MyScreen());
Navigator.push(context, route);

To navigate back to the previous screen, you can use the pop() method. The pop() method removes the top screen from the navigation stack.

For example, the following code navigates back to the previous screen:

Navigator.pop(context);

Here is an example of how to navigate between two screens. The example shows the navigation between home screen and settings screen.

import 'package:flutter/material.dart';
class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: Text('This is the home screen.'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Navigate to the settings screen.
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => SettingsScreen()),
          );
        },
        tooltip: 'Settings',
        child: Icon(Icons.settings),
      ),
    );
  }
}
class SettingsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Settings Screen'),
      ),
      body: Center(
        child: Text('This is the settings screen.'),
      ),
    );
  }
}

Routing arguments

You can pass arguments to a new screen using the arguments property of the Route object. For example, the following code navigates to a new screen called MyScreen and passes the value 'Hello, world!' as an argument:

final route = MaterialPageRoute(builder: (context) => MyScreen(arguments: 'Hello, world!'));
Navigator.push(context, route);

To access the routing arguments in the new screen, you can use the ModalRoute.of() method. The ModalRoute.of() method returns the Route object for the current screen.

For example, the following code gets the routing arguments from the current screen:

final arguments = ModalRoute.of(context)?.settings?.arguments;

You can pass arguments to a screen when you navigate to it using the Navigator.pushNamed() method. To pass an argument, you need to specify the name of the argument and the value of the argument.

Here is an example of how to pass an argument to a screen:

import 'package:flutter/material.dart';
class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: Text('This is the home screen.'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Navigate to the settings screen, passing the value "John Doe" as the argument.
          Navigator.pushNamed(context, '/settings', arguments: 'John Doe');
        },
        tooltip: 'Settings',
        child: Icon(Icons.settings),
      ),
    );
  }
}
class SettingsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Get the argument that was passed to the screen.
    final name = ModalRoute.of(context)!.settings.arguments as String;
    return Scaffold(
      appBar: AppBar(
        title: Text('Settings Screen'),
      ),
      body: Center(
        child: Text('Hello, $name!'),
      ),
    );
  }
}

Named routes

You can also define named routes in your Flutter app. Named routes are a convenient way to navigate to screens without having to create a Route object each time.

To define a named route, you can use the routes property of the MaterialApp or CupertinoApp widget. The routes property is a map of named routes to Route objects.

For example, the following code defines a named route called my_screen:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: {
        'my_screen': (context) => MyScreen(),
      },
    );
  }
}

Once you have defined a named route, you can navigate to it using the Navigator.pushNamed() method. The Navigator.pushNamed() method takes the name of the route as a parameter.

For example, the following code navigates to the my_screen route:

Navigator.pushNamed(context, 'my_screen');

Named routes allow you to define routes for your screens and then navigate to those routes using the Navigator.pushNamed() method.

To define a named route, you need to add a routes property to your MaterialApp widget. The routes property is a map of route names to routes.

Each route is a function that takes a BuildContext object and returns a Widget.

Here is an example of how to define named routes:

import 'package:flutter/material.dart';
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      routes: {
        '/': (context) => HomeScreen(),
        '/settings': (context) => SettingsScreen(),
      },
    );
  }
}
class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: Text('This is the home screen.'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Navigate to the settings screen.
          Navigator.pushNamed(context, '/settings');
        },
        tooltip: 'Settings',
        child: Icon(Icons.settings),
      ),
    );
  }
}
class SettingsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Settings Screen'),
      ),
      body: Center(
        // The argument passed to the screen is not captured in this example.
        child: Text('Hello, !'),
      ),
    );
  }
}

To navigate to the settings screen, you can use the Navigator.pushNamed() method, as shown below:

Navigator.pushNamed(context, '/settings');

This will push the SettingsScreen onto the stack of screens that are currently displayed.

To pass an argument to the settings screen, you can use the arguments parameter to the Navigator.pushNamed() method.

For example, the following code will navigate to the settings screen and pass the value “John Doe” as the argument:

Navigator.pushNamed(context, '/settings', arguments: 'John Doe');

The argument can be accessed on the settings screen using the ModalRoute.of(context)!.settings.arguments property.

For example, the following code will display the value of the argument on the settings screen:

// Get the argument that was passed to the screen.
final name = ModalRoute.of(context)!.settings.arguments as String;

// Display the value of the argument.
Text('Hello, $name!');

Named routes are a convenient way to navigate between screens in your Flutter app. They allow you to define routes for your screens and then navigate to those routes using the Navigator.pushNamed() method.

Bottom navigation bars and tabs

Bottom navigation bars and tabs are a common way to navigate between screens in Flutter apps. To create a bottom navigation bar, you can use the BottomNavigationBar widget.

The BottomNavigationBar widget takes a list of BottomNavigationBarItem widgets as a parameter. Each BottomNavigationBarItem widget represents a tab in the bottom navigation bar.

For example, the following code creates a bottom navigation bar with two tabs:

BottomNavigationBar(
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Home',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.settings),
      label: 'Settings',
    ),
  ],
),

When the user taps a tab in the bottom navigation bar, the Navigator class navigates to the corresponding screen.

Conclusion

Navigation is an important part of any Flutter app. By understanding navigation, you can create apps with easy-to-use and intuitive user interfaces.

In the next article, we will learn how to make HTTP requests and parse JSON responses in Flutter apps.