Drawer

Add a side drawer menu with Drawer.

What is Drawer?

Drawer is the side menu widget that opens from the left of a Scaffold. It usually contains a ListView; a DrawerHeader at the top shows a title, followed by menu items. It is given to the drawer parameter of Scaffold.

Scaffold(
  drawer: Drawer(
    child: ListView(
      children: [
        DrawerHeader(child: Text('Menu')),
      ],
    ),
  ),
)

DrawerHeader

DrawerHeader is the header area shown at the top of a Drawer. It takes a widget as child; usually a Text showing the app name is given. DrawerHeader is placed as the first item in the children list of the ListView.

DrawerHeader(
  child: Text('App Menu'),
)

Exercise Add a Drawer

Write a function openMenu that prints Menu. In main call openMenu. Add appBar and drawer to the Scaffold; let the drawer contain a ListView whose children list has a DrawerHeader.

Show example solution

import 'package:flutter/material.dart';

void menuAc() {
  print('Menu');
}

void main() {
  menuAc();
  runApp(const Uygulama());
}

class Uygulama extends StatelessWidget {
  const Uygulama({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Uygulama')),
        drawer: Drawer(
          child: ListView(
            children: [
              DrawerHeader(child: Text('Menu')),
            ],
          ),
        ),
      ),
    );
  }
}

Test yourself

Which widget is used to list menu items inside a Drawer?
- Center
- Padding
- SizedBox
- ListView
Show answer

ListView — Menu items inside a Drawer are usually listed with ListView; Padding, SizedBox and Center are not suitable for listing.

Add the drawer parameter

Scaffold(
  appBar: AppBar(title: Text('Uygulama')),
  ____: Drawer(
    child: ListView(
      children: [DrawerHeader(child: Text('Menu'))],
    ),
  ),
)

Show answer

Scaffold(
  appBar: AppBar(title: Text('Uygulama')),
  drawer: Drawer(
    child: ListView(
      children: [DrawerHeader(child: Text('Menu'))],
    ),
  ),
)

Drawer parts

Drawer

Side menu widget
ListView

Lists menu items
DrawerHeader

Menu header area
drawer

Scaffold's side menu parameter

Next lesson: Summary - Scaffold and AppBar

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies