Виджет NavigationDrawerDestination

Виджет NavigationDrawerDestination кладут в destinations у NavigationDrawer. Иконку передают в icon, подпись - в label, выбранное состояние подсвечивает сам NavigationDrawer по selectedIndex.

Синтаксис

NavigationDrawerDestination(
	icon: Icon(Icons.inbox),
	label: Text('abcde'),
)

Параметры

Параметр	Описание
`icon`	Иконка пункта в свёрнутом и развёрнутом виде.
`label`	Текст рядом с иконкой.
`selectedIcon`	Иконка, когда пункт выбран.

Пример

Давайте соберём NavigationDrawer с двумя пунктами:

import 'package:flutter/material.dart';

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

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

	@override
	State<DrawerDemo> createState() => _DrawerDemoState();
}

class _DrawerDemoState extends State<DrawerDemo>
{
	int selected = 0;

	@override
	Widget build(BuildContext context)
	{
		return Scaffold(
			body: Row(
				children: [
					NavigationDrawer(
						selectedIndex: selected,
						onDestinationSelected: (i) => setState(() => selected = i),
						destinations: [
							NavigationDrawerDestination(
								icon: Icon(Icons.home),
								label: Text('abcde'),
							),
							NavigationDrawerDestination(
								icon: Icon(Icons.settings),
								label: Text('12345'),
							),
						],
					),
					Expanded(
						child: Center(
							child: Text(selected == 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'),
						),
					],
				),
			),
		),
	);
}

Подсвечен пункт со звездой и подписью '12345'.

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

виджет NavigationDrawer,
куда передают список destinations
виджет NavigationDestination,
который описывает вкладку NavigationBar
виджет Drawer,
который выезжает поверх экрана в Scaffold
виджет ListTile,
которым оформляют пункты в классическом Drawer