Modal Route Flutter, E-Com App 4

What is the Modal Route in Flutter? How can we pass arguments from one screen to the other while navigating?

We’ll try to answer these questions in this section.

In the previous section we have seen how we can navigate to a new screen with the product detail. Certainly without the Modal Route class, it was not possible. 

As a result, when we tap any product on the home page, it takes us to the product detail page.

But how does the Navigator provide the ability to navigate to a named route from any part of the E-Commerce app that we’ve been building?

In fact, we have not only navigated to a new screen, we’ve passed the required argument.

Let us first take a look at the E-Commerce app that we’ve been building.

This is our home page, and we can tap any image and navigate to the particular product detail page.

Let’s try to understand this process from scratch. 

It’s necessary because we will pass arguments again from any part of the app to another part of the app.

For example, we might wish for any route like “/cart” to clear the cart, or pass any argument.

Firstly, we need the “arguments” parameter of the Navigator.pushNamed() method.

Secondly, we extract the arguments using the ModalRoute.of() method.Finally, we need to declare the route inside the MaterialApp or CupertinoApp constructor.

These are the steps that we want to follow step by step.

Modal Route declaration in Flutter

First, we will define the arguments in Flutter that we want to pass. 

Second, we need to ask where to pass? As a result, we’ll declare the route property inside the Material App.

// first step
class Message {
  final String title;
  final String message;

  Message(this.title, this.message);
}
//second step
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final theme = ThemeProvider.of(context);
    return MaterialApp(
      title: 'E Commerce App',
      theme: theme.dark(settings.value.sourceColor),
      /* home: const ProductsOverviewScreen(),
      routes: {
        ProductDetailScreen.routeName: (ctx) => const ProductDetailScreen(),
      }, */
      home: const DeliverMessage(),
      routes: {
        ExtractingMessage.routeName: (ctx) => const ExtractingMessage(),
      },
    );
  }
}

Therefore we have defined the class properties that we will pass as arguments. 

Next we have defined the home page and route property where we will send our arguments.

Let’s first see the home page from where we want to navigate and send the arguments.

class DeliverMessage extends StatelessWidget {
  const DeliverMessage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Deliver Message'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(
              context,
              ExtractingMessage.routeName,
              arguments: Message(
                'This is Title',
                'This isMessage.',
              ),
            );
          },
          child: Text(
            'Navigate to extract Message',
            style: GoogleFonts.alexBrush(
              fontSize: 30.0,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    );
  }
}

The homepage is simple. We have only one Elevated Button where we have used the Navigator.pushNamed() method.

In addition, inside it, we have also defined the class constructors that we’re sending as arguments.

Let’s create the widget that extracts the arguments. That’s the final step.

class ExtractingMessage extends StatelessWidget {
  const ExtractingMessage({super.key});

  static const routeName = '/extractArguments';

  @override
  Widget build(BuildContext context) {
    final args = ModalRoute.of(context)!.settings.arguments as Message;

    return Scaffold(
      appBar: AppBar(
        title: Text(args.title),
      ),
      body: Center(
        child: Text(
          args.message,
          style: GoogleFonts.alexBrush(
            fontSize: 60.0,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}

However, in the above code, there are a few things to mention.

Firstly, we have defined the static constant route name which we have mentioned as the route property. Right?

Next, we have passed two pieces of data. One is the title, and the other is the message.Therefore, the above widget extracts the data as “args”. To access the data it uses the ModalRoute.of() method.

final args = ModalRoute.of(context)!.settings.arguments as Message;

This method returns the current route with the arguments.

As a result, we can show the title on the AppBar and the message on the body.

Exactly the same thing happens in our E-Commerce app. We have tapped the product and with the help of ModalRoute.of() method, we have extracted the arguments.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

Courses at Educative

GitHub repository

Python and Data Science

Twitter