From 9209319dd113f315f74bb384d9fc033584d342ea Mon Sep 17 00:00:00 2001
From: Madhur Maurya <madhurmaurya365@gmail.com>
Date: Fri, 15 Jan 2021 14:34:03 +0530
Subject: [PATCH] Add BottomNavigationBarType.shifting sample #72936 (#73103)

---
 .../src/material/bottom_navigation_bar.dart   | 87 ++++++++++++++++++-
 1 file changed, 83 insertions(+), 4 deletions(-)

diff --git a/packages/flutter/lib/src/material/bottom_navigation_bar.dart b/packages/flutter/lib/src/material/bottom_navigation_bar.dart
index 13f867f4023..789eda6fa30 100644
--- a/packages/flutter/lib/src/material/bottom_navigation_bar.dart
+++ b/packages/flutter/lib/src/material/bottom_navigation_bar.dart
@@ -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]