Drawer in Flutter

Create Free Backend With Appwrite

Introduction

Drawer is a sidebar that appears from the side of the screen, usually filled with menu options or navigation links, allowing you to navigate between different parts of the application.

Create Drawer in Flutter

To create a drawer in flutter, you need to use Scaffold widget. Scaffold widget provides a drawer property to add a drawer in your app. Here is an example of drawer in flutter:

Scaffold(
  drawer: Drawer(
  ),
  appBar: AppBar(
    title: Text('Click Drawer Icon'),
  ),
)
Run Online

Drawer From Right

By default, the drawer appears from the left side of the screen. If you want to make it appear from the right side, you can use endDrawer property of Scaffold widget. Here is an example of drawer from right:

Scaffold(
  endDrawer: Drawer(
  ),
  appBar: AppBar(
    title: Text('Click End Drawer Icon =>>>>'),
  ),
)
Run Online

Example 1: Simple Drawer

In this example below, you will learn to create drawer with options Home, About, and Settings with icons.

Drawer(
  child: ListView(
    children: const [
      DrawerHeader(
        child: Text('Drawer Header'),
      ),
      ListTile(
        leading: Icon(Icons.home),
        title: Text('Home'),
      ),
      ListTile(
        leading: Icon(Icons.info),
        title: Text('About'),
      ),
      ListTile(
        leading: Icon(Icons.settings),
        title: Text('Settings'),
      ),
    ],
  ),
)
Run Online

Example 2: Ecoommerce App Drawer

In this example below, you will learn how to create a beautiful drawer for an ecommerce app with options Home, Categories, Orders, Wishlist and Settings.

Drawer(
  child: ListView(
    padding: EdgeInsets.zero,
    children: <Widget>[
      DrawerHeader(
        child: Text('Menu'),
        decoration: BoxDecoration(
          color: Colors.blue,
        ),
      ),
      ListTile(title: Text('Home'), onTap: () {}),
      ListTile(title: Text('Categories'), onTap: () {}),
      ListTile(title: Text('Orders'), onTap: () {}),
      ListTile(title: Text('Wishlist'), onTap: () {}),
      ListTile(title: Text('Settings'), onTap: () {}),
    ],
  ),
)
Run Online

Example 3: Account Management in Social Media Apps

In this example below, you will learn how to create a beautiful drawer for a social media app with options Profile, Friends, Messages and Settings.

Drawer(
  child: ListView(
    padding: EdgeInsets.zero,
    children: <Widget>[
      UserAccountsDrawerHeader(
        accountName: Text('User Name'),
        accountEmail: Text('[email protected]'),
        currentAccountPicture: CircleAvatar(
          backgroundColor: Colors.orange,
          child: Text('U'),
        ),
      ),
      ListTile(title: Text('Profile'), onTap: () {}),
      ListTile(title: Text('Friends'), onTap: () {}),
      ListTile(title: Text('Messages'), onTap: () {}),
      ListTile(title: Text('Settings'), onTap: () {}),
    ],
  ),
)
Run Online

Example 4: Beautiful Drawer Header

In this example below, you will build a beautiful drawer header with background image and user profile image.

Drawer(
  child: ListView(
    children: <Widget>[
      DrawerHeader(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: NetworkImage('https://flutter-tutorial.net/images/sample_background_image.jpg'),
            fit: BoxFit.cover,
          ),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            CircleAvatar(
              radius: 40,
              backgroundImage: NetworkImage('https://avatars.githubusercontent.com/u/33576285?v=4'),
            ),
            SizedBox(height: 10),
            Text('John Doe', style: TextStyle(color: Colors.white)),
            SizedBox(height: 10),
          ],
        ),
      ),
      ListTile(
        leading: Icon(Icons.home),
        title: Text('Home'),
        onTap: () {
          // Handle the tap if needed
        },
      ),
      ListTile(
        leading: Icon(Icons.info),
        title: Text('About'),
        onTap: () {
          // Handle the tap if needed
        },
      ),
    ],
  ),
)
Run Online

Challenge

Create a beautiful drawer for accountinng app with options Dashboard, Invoices, Payments, Expenses and Settings.