Виджет NavigationBar

Виджет NavigationBar заменяет BottomNavigationBar в новых темах. Пункты передают в destinations как NavigationDestination, активный индекс - в selectedIndex, переключение - в onDestinationSelected.

Синтаксис

NavigationBar(
	selectedIndex: 0,
	onDestinationSelected: (int index) {},
	destinations: [
		NavigationDestination(icon: Icon(Icons.home), label: 'abcde'),
		NavigationDestination(icon: Icon(Icons.settings), label: '12345'),
	],
)

Параметры

Параметр	Описание
`destinations`	Список `NavigationDestination`.
`selectedIndex`	Индекс выбранной вкладки.
`onDestinationSelected`	Вызывается при выборе другого пункта.

Пример

Давайте поставим NavigationBar на Scaffold:

import 'package:flutter/material.dart';

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

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

	@override
	State<NavDemo> createState() => _NavDemoState();
}

class _NavDemoState extends State<NavDemo>
{
	int index = 0;

	@override
	Widget build(BuildContext context)
	{
		return Scaffold(
			body: Center(child: Text(index == 0 ? 'abcde' : '12345')),
			bottomNavigationBar: NavigationBar(
				selectedIndex: index,
				onDestinationSelected: (i) => setState(() => index = i),
				destinations: [
					NavigationDestination(icon: Icon(Icons.home), label: 'abcde'),
					NavigationDestination(icon: Icon(Icons.star), label: '12345'),
				],
			),
		);
	}
}

Текст в теле меняется при переключении вкладок внизу.

Пример

Давайте откроем экран сразу на второй вкладке:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(child: Text('12345')),
				bottomNavigationBar: NavigationBar(
					selectedIndex: 1,
					onDestinationSelected: (i) {},
					destinations: [
						NavigationDestination(icon: Icon(Icons.home), label: 'abcde'),
						NavigationDestination(icon: Icon(Icons.settings), label: '12345'),
					],
				),
			),
		),
	);
}

Подсвечен пункт с иконкой настроек.

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

виджет NavigationDestination,
которым описывают один пункт панели
виджет BottomNavigationBar,
который используют в Material 2
виджет NavigationRail,
который ставят сбоку на широких экранах
виджет Scaffold,
куда кладут bottomNavigationBar