Unverified Commit 9209319d authored by Madhur Maurya's avatar Madhur Maurya Committed by GitHub

Add BottomNavigationBarType.shifting sample #72936 (#73103)

parent fb9e485d
......@@ -20,6 +20,7 @@ import 'tooltip.dart';
/// Defines the layout and behavior of a [BottomNavigationBar].
///
/// For a sample on how to use these, please see [BottomNavigationBar].
/// See also:
///
/// * [BottomNavigationBar]
......@@ -69,13 +70,11 @@ enum BottomNavigationBarType {
/// {@tool dartpad --template=stateful_widget_material}
/// This example shows a [BottomNavigationBar] as it is used within a [Scaffold]
/// widget. The [BottomNavigationBar] has three [BottomNavigationBarItem]
/// widgets and the [currentIndex] is set to index 0. The selected item is
/// widgets, which means it defaults to [BottomNavigationBarType.fixed], and
/// the [currentIndex] is set to index 0. The selected item is
/// amber. The `_onItemTapped` function changes the selected item's index
/// and displays a corresponding message in the center of the [Scaffold].
///
/// ![A scaffold with a bottom navigation bar containing three bottom navigation
/// bar items. The first one is selected.](https://flutter.github.io/assets-for-api-docs/assets/material/bottom_navigation_bar.png)
///
/// ```dart
/// int _selectedIndex = 0;
/// static const TextStyle optionStyle = TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
......@@ -133,6 +132,86 @@ enum BottomNavigationBarType {
/// ```
/// {@end-tool}
///
/// {@tool dartpad --template=stateful_widget_material}
/// This example shows a [BottomNavigationBar] as it is used within a [Scaffold]
/// widget. The [BottomNavigationBar] has four [BottomNavigationBarItem]
/// widgets, which means it defaults to [BottomNavigationBarType.shifting], and
/// the [currentIndex] is set to index 0. The selected item is amber in color.
/// With each [BottomNavigationBarItem] widget, backgroundColor property is
/// also defined, which changes the background color of [BottomNavigationBar],
/// when that item is selected. The `_onItemTapped` function changes the
/// selected item's index and displays a corresponding message in the center of
/// the [Scaffold].
///
///
/// ```dart
/// int _selectedIndex = 0;
/// static const TextStyle optionStyle = TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
/// static const List<Widget> _widgetOptions = <Widget>[
/// Text(
/// 'Index 0: Home',
/// style: optionStyle,
/// ),
/// Text(
/// 'Index 1: Business',
/// style: optionStyle,
/// ),
/// Text(
/// 'Index 2: School',
/// style: optionStyle,
/// ),
/// Text(
/// 'Index 3: Settings',
/// style: optionStyle,
/// ),
/// ];
///
/// void _onItemTapped(int index) {
/// setState(() {
/// _selectedIndex = index;
/// });
/// }
///
/// @override
/// Widget build(BuildContext context) {
/// return Scaffold(
/// appBar: AppBar(
/// title: const Text('BottomNavigationBar Sample'),
/// ),
/// body: Center(
/// child: _widgetOptions.elementAt(_selectedIndex),
/// ),
/// bottomNavigationBar: BottomNavigationBar(
/// items: const <BottomNavigationBarItem>[
/// BottomNavigationBarItem(
/// icon: Icon(Icons.home),
/// label: 'Home',
/// backgroundColor: Colors.red,
/// ),
/// BottomNavigationBarItem(
/// icon: Icon(Icons.business),
/// label: 'Business',
/// backgroundColor: Colors.green,
/// ),
/// BottomNavigationBarItem(
/// icon: Icon(Icons.school),
/// label: 'School',
/// backgroundColor: Colors.purple,
/// ),
/// BottomNavigationBarItem(
/// icon: Icon(Icons.settings),
/// label: 'Settings',
/// backgroundColor: Colors.pink,
/// ),
/// ],
/// currentIndex: _selectedIndex,
/// selectedItemColor: Colors.amber[800],
/// onTap: _onItemTapped,
/// ),
/// );
/// }
/// ```
/// {@end-tool}
/// See also:
///
/// * [BottomNavigationBarItem]
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment