Navigation Drawer – Flutter Widget Guide By Flutter Agency

· 5 min read
Navigation Drawer - Flutter Widget Guide By Flutter Agency
Navigation Drawer - Flutter Widget Guide By Flutter Agency

Earlier, we have discussed Navigation Drawer in Scaffold article. In this article, we will get into detail for it and it’s page routing through the article.

Its concept comes from android native applications. In Native application, we were using Fragments and Drawer files for managing navigation but in a flutter, there is quite different to create page routes. This article will help you to understand the same.

What is Navigation Drawer in Flutter?

It is a  is one type of ListView Widget which is used for switch pages in the application as a user will select an option.

Different ways to create Drawer is as listed below :

1. Add only the body section with a list of actions.

2. Divide drawer into two sections: Header and body

3. Divide drawer into three sections: header, body, and footer.

We will understand the same by example.

In this article, we will understand how to add Left Navigation Drawer where the Drawer opens from the start side or right side and Right Navigation Drawer Where the Drawer layout which slides from the end or left side of the screen.

We would require the following Widgets to Create it.

  1. Scaffold Widget.
  2. ListView Widget.
  3. Divider Widget.
  4. ListTile Widget.
  5. Text Widget.
  6. Icon Widget.
  7. UserAccountsDrawerHeader Widget.
  8. Creating Scaffold.

Scaffold Widget :

The Scaffold Widget is used to implement Drawer, Snackbar, App Bar, Bottom Sheet, Bottom Navigation Bar and Floating Action Button.

Scaffold Widget has 2 properties for Drawer layouts in Flutter.

  1. drawer (for Left to Right Navigation Drawer): Drawer layout which expands from the left side.
  2. endDrawer(for Right to Left Navigation Drawer): Drawer layout which opens/expands from the Right side.
Scaffold(
drawer:  // Here we will add Drawer Layout.
);

Adding List Items in Drawer :

Now we will add ListView Widget as children of Drawer Widget. Code Snippet will look like below :

Scaffold(
  drawer: Drawer(
      elevation: 20.0,
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
        ],
      )),
)

Adding Header Layout in Drawer

For this purpose, we have added UserAccountsDrawerHeader  Widget. We can add the user name, user email, and user profile picture in our Drawer header.

Scaffold(
  drawer: Drawer(
      elevation: 20.0,
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          UserAccountsDrawerHeader(
            accountName: Text('Kalpesh Khandla'),
            accountEmail: Text('[email protected]'),
            currentAccountPicture:
            Image.assets("assets/road.jpg"),
            decoration: BoxDecoration(color: Colors.blueAccent),
          ),
        ],
      )),
)

Now to add an item in a Drawer we will be using ListTile. Code Snippet for it is as below :

 ListTile(
                leading: Icon(Icons.home),
                title: Text("Home"),
                onTap: () {
                  print("Home Clicked");
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) =>                      HomeScreen()),
                  );
                },
              ),

Complete Code Snippet for Drawer is as below :

 drawer: Drawer(
          child: ListView(
            padding: EdgeInsets.all(0),
            children: <Widget>[
              UserAccountsDrawerHeader(
                accountEmail: Text("[email protected]"),
                accountName: Text("Kalpesh Khandla"),
                currentAccountPicture: CircleAvatar(
                  child: Text("KK"),
                ),
              ),
              ListTile(
                leading: Icon(Icons.home),
                title: Text("Home"),
                onTap: () {
                  print("Home Clicked");
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => HomeScreen()),
                  );
                },
              ),
              ListTile(
                leading: Icon(Icons.dashboard),
                title: Text("Categories"),
                onTap: () {
                    print("Categories Clicked");
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => CategoryScreen()),
                  );
                },
              ),
              ListTile(
                leading: Icon(Icons.add_to_photos),
                title: Text("Add Items"),
                onTap: () {
                    print("Add Clicked");
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => AddItemScreen()),
                  );
                },
              ),
              ListTile(
                leading: Icon(Icons.info),
                title: Text("About Us"),
                onTap: () {
                    print("About Clicked");
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => AboutScreen()),
                  );
                },
              ),
              ListTile(
                leading: Icon(Icons.share),
                title: Text("Share with Friends"),
                onTap: () {
                    print("Share Clicked");
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => ShareScreen()),
                  );
                },
              ),
              ListTile(
                leading: Icon(Icons.rate_review),
                title: Text("Rate and Review"),
                onTap: () {
                    print("Rate Clicked");
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => RateScreen()),
                  );
                },
              ),
              ListTile(
                leading: Icon(Icons.flag),
                title: Text("Privacy Policy"),
                onTap: () {
                    print("Privacy Clicked");
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => PrivacyScreen()),
                  );
                },
              ),
            ],
          ),
        ),

Which will give us output like below :

Navigation Drawer

drawer in Flutter

Conclusion:

In this article, we have been through What is Navigation Drawer in Flutter along with how to implement it in a Flutter.

Hope you like this article.
Feel free if you need any assistance regarding flutter.

We would be love to assist you.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply