Виджет NavigationDrawer

Виджет NavigationDrawer показывает пункты NavigationDrawerDestination в destinations. Выбранный индекс - selectedIndex, переключение - onDestinationSelected. Ставят в Row рядом с основным контентом или в drawer.

Синтаксис

NavigationDrawer(
	selectedIndex: 0,
	onDestinationSelected: (int index) {},
	destinations: [
		NavigationDrawerDestination(
			icon: Icon(Icons.home),
			label: Text('abcde'),
		),
	],
)

Параметры

Параметр	Описание
`destinations`	Список пунктов навигации.
`selectedIndex`	Активный пункт.
`onDestinationSelected`	Новый индекс после выбора.

Пример

Давайте разделим экран drawer и body:

import 'package:flutter/material.dart';

void main()
{
	runApp(const MaterialApp(home: NavDrawerDemo()));
}

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

	@override
	State<NavDrawerDemo> createState() => _NavDrawerDemoState();
}

class _NavDrawerDemoState extends State<NavDrawerDemo>
{
	int idx = 0;

	@override
	Widget build(BuildContext context)
	{
		return Scaffold(
			body: Row(
				children: [
					NavigationDrawer(
						selectedIndex: idx,
						onDestinationSelected: (i) => setState(() => idx = i),
						destinations: [
							NavigationDrawerDestination(
								icon: Icon(Icons.home),
								label: Text('abcde'),
							),
							NavigationDrawerDestination(
								icon: Icon(Icons.settings),
								label: Text('12345'),
							),
						],
					),
					Expanded(child: Center(child: Text(idx == 0 ? 'abcde' : '12345'))),
				],
			),
		);
	}
}

Слева панель, справа текст меняется при выборе пункта.

Пример

Давайте отметим второй пункт:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: NavigationDrawer(
					selectedIndex: 1,
					onDestinationSelected: (i) {},
					destinations: [
						NavigationDrawerDestination(icon: Icon(Icons.mail), label: Text('abcde')),
						NavigationDrawerDestination(icon: Icon(Icons.star), label: Text('12345')),
					],
				),
			),
		),
	);
}

Подсвечен пункт со звездой.

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

виджет NavigationDrawerDestination,
один пункт drawer
виджет Drawer,
классический выезжающий drawer
виджет NavigationRail,
узкая панель сбоку
виджет NavigationBar,
нижняя навигация M3