App Drawer Flutter, E Com App 20

What is an App Drawer in Flutter? In short, it helps us to navigate to another page. But how does it help us in the e-commerce app?

We’ll try to answer this question in this section.

Before explaining the App Drawer, we must describe why we need it. Right? 

Firstly, in any Material Design we have two options to navigate. One is Tab in the AppBar, or Drawer.

Now, an AppBar does not always give us enough space to accommodate many Tabs. 

In that case, drawers come to our help.

Secondly, App Drawer gives us enough space to place many items. As a result, we can place many navigations.

Now in any e-commerce app, orders always play an important role. And we know a Flutter e-commerce app is no exception.

We have already provided and tackled orders separately. 

Why? 

Because, we haven’t  inserted orders into our products class. 

Rather we wanted to relate the order object to the cart object.

In addition we have discussed the cart sections before.

There is a common relation between them. It is because the cart page has its answer. 

As a result, in the cart page we get all the added products. Therefore, when we press the “order now” button, the cart clears up and we place the order at the same time.

And we see the all the products we have ordered in one place.

However, before that we have seen the navigation options in the App Drawer.

So that we can tap the orders page to see what products we have ordered.

How App Drawer works

We use the Drawer widget in combination with a Scaffold widget. It requires us to follow certain steps. 

First we create a Scaffold widget, and then we add a Drawer widget. Next, we populate the drawer with items.

Finally, we close the drawer by calling Navigator.pop(context).

Let’s see the code. Because that will perhaps explain the process better than words.

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);
            },
          ),
        ],
      ),
    );
  }
}

As you see, we have added the content using the Column widget.

If we had more content to place we could have used a ListView.

Why? Because when there is more content we can scroll through the drawer.

In the previous section we have discussed the “push replacement named navigation method”.

Therefore we are not discussing it anymore.

However, in the next section we will discuss the workflow of the whole process.

So please stay tuned.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

GitHub repository

TensorFlow, Machine Learning, AI and Data Science

Twitter