Display Drawer in Flutter

A drawer is a sliding menu that is used to display navigation items. A drawer appears when the user swipes a finger from the left edge of the screen or when the user clicks the icon in the app bar.

A drawer can be created using Drawer class. It usually used with the Scaffold.drawer property. Typically a LisView is used as a child of the drawer. Often a LisView is constructed with DrawerHeader that displays heading information. A ListTitle widgets usually used to display navigation items.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: MyApp()));

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Drawer')),
      drawer: Drawer(
          child: ListView(
        children: const <Widget>[
          DrawerHeader(
            decoration: BoxDecoration(color: Colors.black12),
            child: Text('Drawer header'),
          ),
          ListTile(title: Text('Account')),
          ListTile(title: Text('Call')),
          ListTile(title: Text('Camera')),
        ],
      )),
    );
  }
}