Flutter Navigation

Mobile Apps Development A-Z Guide.

Give us a message if you’re interested in Blockchain and FinTech software development or just say Hi at Pharos Production Inc.

Or follow us on Youtube to know more about Software Architecture, Distributed Systems, Blockchain, High-load Systems, Microservices, and Enterprise Design Patterns.

Pharos Production Youtube channel

In this article, I decided to describe in detail the methods of navigation and transfer of parameters between the screens of the application. When I started writing the first application, I was a little confused, but now I realized that this is a fairly simple task. Class Navigator is responsible for the stack of so-called Routes. More information about this class can be found at this link.

So, let’s take a simple application as an example of the basic implementation of navigation.

Navigator.push()&pop()

The easiest way to go from one page to another is to use the static function push();

Navigator.push(context, MaterialPageRoute(builder: (context) => SimplePageTwo()));

during the transition, this route is added to the stack. Accordingly, the static function pop() is used to go back.

Navigator.pop(context);

“OnActivityResult”

Suppose we have two pages. A classic example is choosing a phone number from a list or choosing a date from a calendar. Accordingly, the first page expects some information from the second. In the Android system, this is implemented by overriding the onActiviteResult(); In Flatter, we just need to wait until we return from the second page to the first.

final result = await Navigator.push(context, MaterialPageRoute(builder: (context) => SimplePageTwo()));

The data we are waiting for on the first page is transmitted as an optional parameter:

final result = "data"
Navigator.pop(context, result);

“Navigation with named routes”

In the application, there are certain screens that can be accessed from different places. Accordingly, to avoid code duplication, named routes are used.

Parent widget — MaterialApp has a variable in the constructor witch names routes. There is also a parameter, an initialRoute — it is responsible for opening the first page at the start of the application.

Thus, the MaterialApp class will have the next appearance:

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: HomePage.route,
      routes: {
        HomePage.route: (context) => HomePage(),
        SimplePageOne.route: (context) => SimplePageOne(),
        NamedPageExtracted.route: (context) => NamedPageExtracted(),
      },
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
    );
  }
}

Now to implement the transition from one page to another we use the static method:

Navigator.pushNamed(context, NamedPageExtracted.route);

“Passing the arguments to named route”

There are several ways to transfer data between pages. So let’s consider them.

1.ModalRoute.

The pushNamed method as an optional parameter has variable arguments. As an example, create a class, an instance of which will be passed.

class NamedPageArguments {
  final String argument1;
  final String argument2;
  NamedPageArguments(this.argument1, this.argument2);
}

Button widget, which, when clicked, switches to another page:

Widget _namedNavigationButtonPassed(BuildContext context) {
  return RaisedButton(
    child: Text('Named Routing Passed'),
    onPressed: () {
      final arguments = NamedPageArguments('Passed One', 'Passed Two');
      Navigator.pushNamed(context, NamedPagePassed.route, arguments: arguments);
    },
  );
}

Now, to access these arguments, you need to use the class ModalRoute:

final NamedPageArguments args = ModalRoute.of(context).settings.arguments;

2. OnGenerateRoute

The second method of transmitting parameters is accomplished by passing parameters to the widget’s constructor at the level of the root widget. Arguments are also passed through an optional variable, but they are passed to the widget using a constructor.

onGenerateRoute: (settings) {
  if (settings.name == NamedPagePassed.route) {
    final NamedPageArguments args = settings.arguments;
    print(args);
    return MaterialPageRoute(
      builder: (context) {
        return NamedPagePassed(argument1: args.argument1, argument2: args.argument2);
      },
    );
  }
},

An example of code you can find on the link below:

PharosProduction/tutorial-flutter-navigation

Thanks for reading.