Push replacement named Flutter, E Com App 19

The push replacement named is a navigation method. We will see how it works and why we need it, in a minute.

However, before that we would like to explain it. Why do we need this particular method in the E Commerce app? 

Firstly, we have seen how we can manage our orders. And to do that we have a separate order model class.

Secondly, once we have placed the order, we need to see that order in one page. Right? 

It’s like the following image.

Finally, we click the “orders” page in the App Drawer. As a result we see how many items we have ordered.

In addition we know the amount also.

Let’s take a look at the second image. That will clarify the whole thing.

Now we have a clear picture of what has been happening. However, we need to take a look at the code.

import 'package:flutter/material.dart';

import '../views/orders_screen.dart';

class AppDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Column(
        children: <Widget>[
          AppBar(
            title: const Text('Hello Friend!'),
            automaticallyImplyLeading: false,
          ),
          const Divider(),
          ListTile(
            leading: const Icon(Icons.shop),
            title: const Text('Shop'),
            onTap: () {
              Navigator.of(context).pushReplacementNamed('/');
            },
          ),
          const Divider(),
          ListTile(
            leading: const Icon(Icons.payment),
            title: const Text('Orders'),
            onTap: () {
              Navigator.of(context)
                  .pushReplacementNamed(OrdersScreen.routeName);
            },
          ),
        ],
      ),
    );
  }
}

The above code clearly shows one thing.

We can navigate to the home page or to the orders page.

But why did we use the push replacement named method?

Instead we could have used a Material Page route.

Let’s try to understand this.

Navigator push replacement method in Flutter

We need this special navigator method for some special reasons. 

Firstly, the push replacement method replaces the current route of the navigator. 

For example, we are on the home page. The context belongs to the home page at present.

When we push the new route, it disposes of the old route.

Flutter passes the route name to the Navigator.onGenerateRoute callback. As an outcome, it pushes the returned route into the Navigator.

This is the first step.

In the second step, Flutter notifies the new route and the removed-route.

If you take interest in learning more about this mechanism, you may see Route.didPush and Route.didChangeNext.

Almost the same thing happens if the Navigator has any Navigator.observers.

Most importantly, when we use the pushReplacementNamed method, we should provide a Navigator.onGenerateRoute callback.

In addition, we also provide arguments to the pushed route.

See the code below.

Navigator.of(context).pushReplacementNamed('/');

What is the argument?

In the above code we see that we have passed the RouteSettings.arguments. Therefore, we need to set the route name before and define it in the Material App routes property.

However, we can pass any object, such as String, int, etc.

In the next section we will discuss how App Drawer in Flutter works.

So stay tuned.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

GitHub repository

TensorFlow, Machine Learning, AI and Data Science

Twitter