Drawer
- Flutter course
- Beginner
- Lesson 84/99
- 4 min
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'),
)Practice 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.
Starter code
import 'package:flutter/material.dart';
// menuAc fonksiyonu yaz: "Menu" yazdirsin
void main() {
// menuAc'i cagir
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 ekle
),
);
}
}Sample 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')),
],
),
),
),
);
}
}Expected output
Menu
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which widget is used to list menu items inside a Drawer?
- Center
- Padding
- SizedBox
- ListView Correct answer
Explanation: Menu items inside a Drawer are usually listed with ListView; Padding, SizedBox and Center are not suitable for listing.
2 Add the drawer parameter
Scaffold(
appBar: AppBar(title: Text('Uygulama')),
____: Drawer(
child: ListView(
children: [DrawerHeader(child: Text('Menu'))],
),
),
)Scaffold(
appBar: AppBar(title: Text('Uygulama')),
drawer: Drawer(
child: ListView(
children: [DrawerHeader(child: Text('Menu'))],
),
),
)Explanation: To wire a Drawer to Scaffold, the drawer parameter is used; menu, sidebar or navigation are not valid parameter names.
3 Drawer parts
| Term | Meaning |
|---|---|
Drawer |
Side menu widget |
ListView |
Lists menu items |
DrawerHeader |
Menu header area |
drawer |
Scaffold's side menu parameter |