Drawer Widget

What is Drawer Widget?

The Drawer widget is a material design panel that slides in horizontally from the edge of a Scaffold to show navigation links in an application.

This widget typically used in the Scaffold.drawer property.

Default Constructor

The default constructor creates a material design drawer.

const Drawer(
    elevation: 16.0, //default to 16.0
    child:
    semanticLabel:
  )

Constructor Parameters

It contains many input parameters which can be configured to change its behavior and appearance.

The elevation parameter, is the z-coordinate at which to place this drawer relative to its parent. Defaults to 16, the appropriate elevation for drawers. The value is always non-negative.

The child parameter is to add the widget below LimitedBox in a tree.

The semanticLabel parameter, is the dialog used by accessibility frameworks to announce screen transitions when the drawer is opened and closed.

Code snippet

The following code snippet shows how to configure Drawer widget.

Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: const <Widget>[
          DrawerHeader(
            decoration: BoxDecoration(
              color: Colors.blue,
            ),
            child: Text(
              'Raptei',
              style: TextStyle(
                color: Colors.white,
                fontSize: 24,
              ),
            ),
          ),
          ListTile(
            leading: Icon(Icons.account_circle),
            title: Text('Profile'),
          ),
          ListTile(
            leading: Icon(Icons.message),
            title: Text('Messages'),
          ),
          ListTile(
            leading: Icon(Icons.settings),
            title: Text('Settings'),
          ),
        ],
      ),
    );

Demo Code

This example shows slide with navigation links of profile, messages and settings in an application which opens tapping menu icon from the app bar.

Drawers are typically used with the Scaffold.drawer property.

The child of the drawer is usually a ListView whose first child is a DrawerHeader that displays status information about the current user. The remaining drawer children are often constructed with ListTiles, often concluding with an AboutListTile.

The AppBar automatically displays an appropriate IconButton to show the Drawer when a [Drawer] is available in the Scaffold.

import 'package:flutter/material.dart';

class DrawerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: const <Widget>[
          DrawerHeader(
            decoration: BoxDecoration(
              color: Colors.blue,
            ),
            child: Text(
              'Raptei',
              style: TextStyle(
                color: Colors.white,
                fontSize: 24,
              ),
            ),
          ),
          ListTile(
            leading: Icon(Icons.account_circle),
            title: Text('Profile'),
          ),
          ListTile(
            leading: Icon(Icons.message),
            title: Text('Messages'),
          ),
          ListTile(
            leading: Icon(Icons.settings),
            title: Text('Settings'),
          ),
        ],
      ),
    );
  }
}

class MyApp extends StatelessWidget {
  static const String _title = 'Drawer Demo';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        drawer: DrawerDemo(),
        body: Center(
          child: Text('Drawer Example'),
        ),
      ),
    );
  }
}

void main() => runApp(MyApp());