Navigation Drawer using Flutter

In this article I’m gonna talk about how we can use Navigation Drawer using Flutter.

If you do not know what the Flutter is

Now talk about Navigation Drawer in flutter.

When I first created and application with Navigation Drawer it felt like magic, thanks to flutter development team because with only one line of code we can already see the Hamburger Icon .

return Scaffold(
  appBar: AppBar(
    title: Text("Drawer app"),
  ),
  drawer: Drawer(),//this will just add the Navigation Drawer Icon
),

and when you tap on that Navigation Drawer Icon ,Drawer will also come in forward.

Now if we want to add items in the drawer we have give the child inside Drawer()

drawer: Drawer(
  child:,
),

Now I’ll add a ListView as a child of Drawer Widget

drawer: Drawer(
  child: ListView(
  children: <Widget>[],
  ),
),

I can add as many as Widgets inside the listView

drawer: Drawer(
  child: ListView(
    children: <Widget>[
      ListTile(
        title: Text("Ttem 1"),
        trailing: Icon(Icons.arrow_forward),
      ),
      ListTile(
        title: Text("Item 2"),
        trailing: Icon(Icons.arrow_forward),
      ),
    ],
  ),
),

We can also add UserAccountsDrawerHeader

when we use UserAccountsDrawerHeader

UserAccountsDrawerHeader Widget will be top of the list view

UserAccountsDrawerHeader(
  accountName: Text("Ashish Rawat"),
  accountEmail: Text("ashishrawat2911@gmail.com"),
  currentAccountPicture: CircleAvatar(
    backgroundColor:
        Theme.of(context).platform == TargetPlatform.iOS
            ? Colors.blue
            : Colors.white,
    child: Text(
      "A",
      style: TextStyle(fontSize: 40.0),
    ),
  ),
),

if you do not know why I use TargetPlatform

Theme.of(context).platform == TargetPlatform.iOS
            ? Colors.blue
            : Colors.white

then this will be the view in Android and iOS

The best thing about flutter in this is the text color will automatically change according to the circumstances.

Inside the ListTile we have onTap

onTap: () {
  Navigator.of(context).pop();
  Navigator.of(context).push(MaterialPageRoute(
      builder: (BuildContext context) => NewPage("Page two")));
},

if I want to go to another Route I’ll first close the Navigation Drawer

Navigator.of(context).pop();

then I’ll use

Navigator.of(context).push(MaterialPageRoute(
      builder: (BuildContext context) => NewPage("Page two")));

after adding all of these and some more Widgets the final app will look like this.

Navigation Drawer in Both Android and iOS

Thanks for reading this article.
Don’t forget to clap.

The Flutter Pub is a medium publication to bring you the latest and amazing resources such as articles, videos, codes, podcasts etc. about this great technology to teach you how to build beautiful apps with it. You can find us on Facebook, Twitter, and Medium or learn more about us here. We’d love to connect! And if you are a writer interested in writing for us, then you can do so through these guidelines.