Виджет NavigationRail

Виджет NavigationRail ставят в Row рядом с контентом. Пункты - NavigationRailDestination в destinations, индекс - selectedIndex, переключение - onDestinationSelected, подписи - labelType из NavigationRailLabelType.

Синтаксис

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

Параметры

Параметр	Описание
`destinations`	Список пунктов rail.
`selectedIndex`	Активный пункт.
`extended`	Широкая панель с текстом рядом с иконками.

Пример

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

import 'package:flutter/material.dart';

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

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

	@override
	State<RailDemo> createState() => _RailDemoState();
}

class _RailDemoState extends State<RailDemo>
{
	int idx = 0;

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

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

Пример

Давайте включим extended:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: NavigationRail(
					extended: true,
					selectedIndex: 0,
					onDestinationSelected: (i) {},
					destinations: [
						NavigationRailDestination(icon: Icon(Icons.star), label: Text('abcde')),
					],
				),
			),
		),
	);
}

Подпись 'abcde' видна рядом с иконкой.

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

виджет NavigationRailDestination,
один пункт rail
виджет NavigationBar,
нижняя навигация
виджет NavigationDrawer,
широкий drawer M3
перечисление NavigationRailLabelType,
когда показывать подписи