Widget] Material - Bottom Navigation Bar

 

Example Code]

	import 'package:flutter/material.dart';
	void main() {
	runApp(const MyApp());
	}
	class MyApp extends StatelessWidget {
	const MyApp({Key? key}) : super(key: key);
	@override
	Widget build(BuildContext context) {
	return MaterialApp(
	debugShowCheckedModeBanner: false,
	title: 'BottomNavigationBar',
	theme: ThemeData(
	useMaterial3: true,
	colorSchemeSeed: Colors.blue,
	),
	home: const MainPage(),
	);
	}
	}
	class MainPage extends StatefulWidget {
	const MainPage({Key? key}) : super(key: key);
	@override
	State<MainPage> createState() => _MainPageState();
	}
	class _MainPageState extends State<MainPage> {
	int _currentIndex = 0;
	static final List<Widget> _widgetOptions = <Widget>[
	const Text('abc View'),
	const Text('123 View'),
	];
	void _onTappedItem(int index) {
	setState(() => _currentIndex = index);
	}
	@override
	Widget build(BuildContext context) {
	return Scaffold(
	appBar: AppBar(
	title: const Text('Material3 Bottom Navigation Bar'),
	),
	body: Center(child: _widgetOptions.elementAt(_currentIndex)),
	bottomNavigationBar: BottomNavigationBar(
	items: const [
	BottomNavigationBarItem(
	icon: Icon(Icons.abc_outlined),
	label: "abc",
	),
	BottomNavigationBarItem(
	icon: Icon(Icons.onetwothree_outlined),
	label: "123",
	),
	],
	onTap: _onTappedItem,
	currentIndex: _currentIndex,
	),
	);
	}
	}

view raw bottomnavigationbar.dart hosted with ❤ by GitHub

 

Reference]

Widget] Cupertino - Tab Bar

 

BottomNavigationBar class - material library - Dart API