Виджет Drawer

Виджет Drawer передают в drawer у Scaffold. Список пунктов меню кладут в child, часто это Column с DrawerHeader и ListTile. Открыть ящик программно помогает openDrawer.

Синтаксис

Drawer(
	child: ListView(
		children: [
			DrawerHeader(child: Text('abcde')),
			ListTile(title: Text('12345')),
		],
	),
)

Параметры

Параметр	Описание
`child`	Содержимое боковой панели.
`backgroundColor`	Цвет фона панели.
`width`	Ширина выезжающей панели.

Пример

Давайте добавим Drawer к Scaffold:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				appBar: AppBar(title: Text('abcde')),
				drawer: Drawer(
					child: ListView(
						children: [
							DrawerHeader(child: Text('12345')),
							ListTile(title: Text('abcde')),
						],
					),
				),
				body: Center(child: Text('12345')),
			),
		),
	);
}

Иконка меню на AppBar откроет панель с заголовком и пунктом.

Пример

Давайте откроем Drawer кнопкой в теле экрана:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				drawer: Drawer(
					child: Center(child: Text('abcde')),
				),
				body: Center(
					child: Builder(
						builder: (context) {
							return ElevatedButton(
								onPressed: () {
									Scaffold.of(context).openDrawer();
								},
								child: Text('12345'),
							);
						},
					),
				),
			),
		),
	);
}

По нажатию кнопки слева выедет панель с текстом 'abcde'.

Смотрите также

виджет NavigationDrawer,
который заменяет Drawer в Material 3
виджет DrawerHeader,
который оформляет верх бокового меню
виджет UserAccountsDrawerHeader,
который показывает имя и почту пользователя
класс ScaffoldState,
который открывает и закрывает Drawer