Виджет BottomNavigationBar

Виджет BottomNavigationBar передают в bottomNavigationBar у Scaffold. Вкладки - BottomNavigationBarItem в items, активный индекс - в currentIndex, переключение - в onTap, режим - в type из BottomNavigationBarType.

Синтаксис

BottomNavigationBar(
	currentIndex: 0,
	onTap: (int index) {},
	items: [
		BottomNavigationBarItem(icon: Icon(Icons.home), label: 'abcde'),
		BottomNavigationBarItem(icon: Icon(Icons.settings), label: '12345'),
	],
)

Параметры

Параметр	Описание
`items`	Список вкладок.
`currentIndex`	Индекс выбранной вкладки.
`onTap`	Вызывается при выборе вкладки.
`type`	Fixed или shifting из `BottomNavigationBarType`.

Пример

Давайте соберём нижнюю навигацию:

import 'package:flutter/material.dart';

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

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

	@override
	State<BottomNavDemo> createState() => _BottomNavDemoState();
}

class _BottomNavDemoState extends State<BottomNavDemo>
{
	int idx = 0;

	@override
	Widget build(BuildContext context)
	{
		return Scaffold(
			body: Center(child: Text(idx == 0 ? 'abcde' : '12345')),
			bottomNavigationBar: BottomNavigationBar(
				currentIndex: idx,
				onTap: (i) => setState(() => idx = i),
				items: [
					BottomNavigationBarItem(icon: Icon(Icons.home), label: 'abcde'),
					BottomNavigationBarItem(icon: Icon(Icons.star), label: '12345'),
				],
			),
		);
	}
}

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

Пример

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

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(child: Text('abcde')),
				bottomNavigationBar: BottomNavigationBar(
					type: BottomNavigationBarType.shifting,
					currentIndex: 1,
					onTap: (i) {},
					items: [
						BottomNavigationBarItem(icon: Icon(Icons.home), label: '12345'),
						BottomNavigationBarItem(icon: Icon(Icons.work), label: 'abcde'),
					],
				),
			),
		),
	);
}

Активная вкладка занимает больше места внизу.

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

виджет BottomNavigationBarItem,
одна вкладка в items
перечисление BottomNavigationBarType,
режим fixed или shifting
виджет NavigationBar,
нижняя панель Material 3
виджет Scaffold,
куда передают bottomNavigationBar