Flutter Drawer

Material Design has two primary options for navigation which are Tabs and Drawers. A drawer is an alternative for tabs because we don’t have sufficient space in the devices.

Let’s learn how the drawer works. Drawer widget is a sliding left menu layout with a Material Design widget.

Let us see example code:

Tabs are common in Android and iOS apps which follow the Material Design guidelines. Flutter provides an easy way to add a tab layout. We use a TabBar and TabBarView with a TabController to add tabs. The controller is used to sync between both.

Lets see an example to explore tabs
import 'package:flutter/material.dart';  
  
void main() => runApp(MyApp());  
  
class MyApp extends StatelessWidget {  
  final appTitle = 'Flutter Drawer Demo';  
  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      title: appTitle,  
      home: MyHomePage(title: appTitle),  
    );  
  }  
}  
  
class MyHomePage extends StatelessWidget {  
  final String title;  
  
  MyHomePage({Key key, this.title}) : super(key: key);  
  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(title: Text(title)),  
      body: Center(child: Text(  
          'A drawer is an invisible part on the side.',  
          style: TextStyle(fontSize: 20.0),  
          )  
      ),  
      drawer: Drawer(  
        child: ListView(  
          // Remove any padding from the ListView using EdgeInsets.zero.  
          padding: EdgeInsets.zero,  
          children: [  
            UserAccountsDrawerHeader(  
              accountName: Text("Abhishek Mishra"),  
              accountEmail: Text("abhishekm977@gmail.com"),  
              currentAccountPicture: CircleAvatar(  
                backgroundColor: Colors.orange,  
                child: Text(  
                  "A",  
                  style: TextStyle(fontSize: 40.0),  
                ),  
              ),  
            ),  
            ListTile(  
              leading: Icon(Icons.home), title: Text("Home"),  
              onTap: () {  
                Navigator.pop(context);  
              },  
            ),  
            ListTile(  
              leading: Icon(Icons.settings), title: Text("Settings"),  
              onTap: () {  
                Navigator.pop(context);  
              },  
            ),  
            ListTile(  
              leading: Icon(Icons.contacts), title: Text("Contact Us"),  
              onTap: () {  
                Navigator.pop(context);  
              },  
            ),  
          ],  
        ),  
      ),  
    );  
  }  
}   
Output

flutter-drawer-demo

When you click on the burger icon top left screen, you can see the drawer sliding left.

flutter-drawer-sliding-left-demo

Subscribe Now