NavigationBar improvements (#116992)

examples/api/lib/material/navigation_bar/navigation_bar.0.dart

@@ -6,10 +6,10 @@
 
 import 'package:flutter/material.dart';
 
-void main() => runApp(const ExampleApp());
+void main() => runApp(const NavigationBarApp());
 
-class ExampleApp extends StatelessWidget {
-  const ExampleApp({super.key});
+class NavigationBarApp extends StatelessWidget {
+  const NavigationBarApp({super.key});
 
   @override
   Widget build(BuildContext context) {

examples/api/lib/material/navigation_bar/navigation_bar.1.dart

@@ -2,223 +2,93 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-/// Flutter code sample for [NavigationBar] with nested [Navigator] destinations.
+/// Flutter code sample for [NavigationBar].
 
 import 'package:flutter/material.dart';
 
-void main() {
-  runApp(const MaterialApp(home: Home()));
-}
+void main() => runApp(const NavigationBarApp());
 
-class Home extends StatefulWidget {
-  const Home({ super.key });
-
-  @override
-  State<Home> createState() => _HomeState();
-}
-
-class _HomeState extends State<Home> with TickerProviderStateMixin<Home> {
-  static const List<Destination> allDestinations = <Destination>[
-    Destination(0, 'Teal', Icons.home, Colors.teal),
-    Destination(1, 'Cyan', Icons.business, Colors.cyan),
-    Destination(2, 'Orange', Icons.school, Colors.orange),
-    Destination(3, 'Blue', Icons.flight, Colors.blue),
-  ];
-
-  late final List<GlobalKey<NavigatorState>> navigatorKeys;
-  late final List<GlobalKey> destinationKeys;
-  late final List<AnimationController> destinationFaders;
-  late final List<Widget> destinationViews;
-  int selectedIndex = 0;
-
-  AnimationController buildFaderController() {
-    final AnimationController controller =  AnimationController(vsync: this, duration: const Duration(milliseconds: 200));
-    controller.addStatusListener((AnimationStatus status) {
-      if (status == AnimationStatus.dismissed) {
-        setState(() { }); // Rebuild unselected destinations offstage.
-      }
-    });
-    return controller;
-  }
-
-  @override
-  void initState() {
-    super.initState();
-    navigatorKeys = List<GlobalKey<NavigatorState>>.generate(allDestinations.length, (int index) => GlobalKey()).toList();
-    destinationFaders = List<AnimationController>.generate(allDestinations.length, (int index) => buildFaderController()).toList();
-    destinationFaders[selectedIndex].value = 1.0;
-    destinationViews = allDestinations.map((Destination destination) {
-      return FadeTransition(
-        opacity: destinationFaders[destination.index].drive(CurveTween(curve: Curves.fastOutSlowIn)),
-        child: DestinationView(
-          destination: destination,
-          navigatorKey: navigatorKeys[destination.index],
-        )
-      );
-    }).toList();
-  }
-
-  @override
-  void dispose() {
-    for (final AnimationController controller in destinationFaders) {
-      controller.dispose();
-    }
-    super.dispose();
-  }
+class NavigationBarApp extends StatelessWidget {
+  const NavigationBarApp({super.key});
 
   @override
   Widget build(BuildContext context) {
-    return WillPopScope(
-      onWillPop: () async {
-        final NavigatorState navigator = navigatorKeys[selectedIndex].currentState!;
-        if (!navigator.canPop()) {
-          return true;
-        }
-        navigator.pop();
-        return false;
-      },
-      child: Scaffold(
-        body: SafeArea(
-          top: false,
-          child: Stack(
-            fit: StackFit.expand,
-            children: allDestinations.map((Destination destination) {
-              final int index = destination.index;
-              final Widget view = destinationViews[index];
-              if (index == selectedIndex) {
-                destinationFaders[index].forward();
-                return Offstage(offstage: false, child: view);
-              } else {
-                destinationFaders[index].reverse();
-                if (destinationFaders[index].isAnimating) {
-                  return IgnorePointer(child: view);
-                }
-                return Offstage(child: view);
-              }
-            }).toList(),
-          ),
-        ),
-        bottomNavigationBar: NavigationBar(
-          selectedIndex: selectedIndex,
-          onDestinationSelected: (int index) {
-            setState(() {
-              selectedIndex = index;
-            });
-          },
-          destinations: allDestinations.map((Destination destination) {
-            return NavigationDestination(
-              icon: Icon(destination.icon, color: destination.color),
-              label: destination.title,
-            );
-          }).toList(),
-        ),
-      ),
-    );
+    return const MaterialApp(home: NavigationExample());
   }
 }
 
-class Destination {
-  const Destination(this.index, this.title, this.icon, this.color);
-  final int index;
-  final String title;
-  final IconData icon;
-  final MaterialColor color;
+class NavigationExample extends StatefulWidget {
+  const NavigationExample({super.key});
+
+  @override
+  State<NavigationExample> createState() => _NavigationExampleState();
 }
 
-class RootPage extends StatelessWidget {
-  const RootPage({ super.key, required this.destination });
-
-  final Destination destination;
-
-  Widget _buildDialog(BuildContext context) {
-    return AlertDialog(
-      title: Text('${destination.title} AlertDialog'),
-      actions: <Widget>[
-        TextButton(
-          onPressed: () { Navigator.pop(context); },
-          child: const Text('OK'),
-        ),
-      ],
-    );
-  }
+class _NavigationExampleState extends State<NavigationExample> {
+  int currentPageIndex = 0;
+  NavigationDestinationLabelBehavior labelBehavior = NavigationDestinationLabelBehavior.alwaysShow;
 
   @override
   Widget build(BuildContext context) {
-    final TextStyle headlineSmall = Theme.of(context).textTheme.headlineSmall!;
-    final ButtonStyle buttonStyle = ElevatedButton.styleFrom(
-      backgroundColor: destination.color,
-      visualDensity: VisualDensity.comfortable,
-      padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
-      textStyle: headlineSmall,
-    );
-
     return Scaffold(
-      appBar: AppBar(
-        title: Text('${destination.title} RootPage - /'),
-        backgroundColor: destination.color,
+      bottomNavigationBar: NavigationBar(
+        labelBehavior: labelBehavior,
+        selectedIndex: currentPageIndex,
+        onDestinationSelected: (int index) {
+          setState(() {
+            currentPageIndex = index;
+          });
+        },
+        destinations: const <Widget>[
+          NavigationDestination(
+            icon: Icon(Icons.explore),
+            label: 'Explore',
+          ),
+          NavigationDestination(
+            icon: Icon(Icons.commute),
+            label: 'Commute',
+          ),
+          NavigationDestination(
+            selectedIcon: Icon(Icons.bookmark),
+            icon: Icon(Icons.bookmark_border),
+            label: 'Saved',
+          ),
+        ],
       ),
-      backgroundColor: destination.color[50],
       body: Center(
         child: Column(
-          mainAxisSize: MainAxisSize.min,
+          mainAxisAlignment: MainAxisAlignment.center,
           children: <Widget>[
-            ElevatedButton(
-              style: buttonStyle,
-              onPressed: () {
-                Navigator.pushNamed(context, '/list');
-              },
-              child: const Text('Push /list'),
-            ),
-            const SizedBox(height: 16),
-            ElevatedButton(
-              style: buttonStyle,
-              onPressed: () {
-                showDialog(
-                  context: context,
-                  useRootNavigator: false,
-                  builder: _buildDialog,
-                );
-              },
-              child: const Text('Local Dialog'),
-            ),
-            const SizedBox(height: 16),
-            ElevatedButton(
-              style: buttonStyle,
-              onPressed: () {
-                showDialog(
-                  context: context,
-                  useRootNavigator: true,
-                  builder: _buildDialog,
-                );
-              },
-              child: const Text('Root Dialog'),
-            ),
-            const SizedBox(height: 16),
-            Builder(
-              builder: (BuildContext context) {
-                return ElevatedButton(
-                  style: buttonStyle,
+            Text('Label behavior: ${labelBehavior.name}'),
+            const SizedBox(height: 10),
+            OverflowBar(
+              spacing: 10.0,
+              children: <Widget>[
+                ElevatedButton(
                   onPressed: () {
-                    showBottomSheet(
-                      context: context,
-                      builder: (BuildContext context) {
-                        return Container(
-                          padding: const EdgeInsets.all(16),
-                          width: double.infinity,
-                          child: Text(
-                            '${destination.title} BottomSheet\n'
-                            'Tap the back button to dismiss',
-                            style: headlineSmall,
-                            softWrap: true,
-                            textAlign: TextAlign.center,
-                          ),
-                        );
-                      },
-                    );
+                    setState(() {
+                      labelBehavior = NavigationDestinationLabelBehavior.alwaysShow;
+                    });
                   },
-                  child: const Text('Local BottomSheet'),
-                );
-              },
+                  child: const Text('alwaysShow'),
+                ),
+                ElevatedButton(
+                  onPressed: () {
+                    setState(() {
+                      labelBehavior = NavigationDestinationLabelBehavior.onlyShowSelected;
+                    });
+                  },
+                  child: const Text('onlyShowSelected'),
+                ),
+                ElevatedButton(
+                  onPressed: () {
+                    setState(() {
+                      labelBehavior = NavigationDestinationLabelBehavior.alwaysHide;
+                    });
+                  },
+                  child: const Text('alwaysHide'),
+                ),
+              ],
             ),
           ],
         ),
@@ -226,142 +96,3 @@ class RootPage extends StatelessWidget {
     );
   }
 }
-
-class ListPage extends StatelessWidget {
-  const ListPage({ super.key, required this.destination });
-
-  final Destination destination;
-
-  @override
-  Widget build(BuildContext context) {
-    const int itemCount = 50;
-    final ButtonStyle buttonStyle = OutlinedButton.styleFrom(
-      foregroundColor: destination.color,
-      fixedSize: const Size.fromHeight(128),
-      textStyle: Theme.of(context).textTheme.headlineSmall,
-    );
-    return Scaffold(
-      appBar: AppBar(
-        title: Text('${destination.title} ListPage - /list'),
-        backgroundColor: destination.color,
-      ),
-      backgroundColor: destination.color[50],
-      body: SizedBox.expand(
-        child: ListView.builder(
-          itemCount: itemCount,
-          itemBuilder: (BuildContext context, int index) {
-            return Padding(
-              padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 8),
-              child: OutlinedButton(
-                style: buttonStyle.copyWith(
-                  backgroundColor: MaterialStatePropertyAll<Color>(
-                    Color.lerp(destination.color[100], Colors.white, index / itemCount)!
-                  ),
-                ),
-                onPressed: () {
-                  Navigator.pushNamed(context, '/text');
-                },
-                child: Text('Push /text [$index]'),
-              ),
-            );
-          },
-        ),
-      ),
-    );
-  }
-}
-
-class TextPage extends StatefulWidget {
-  const TextPage({ super.key, required this.destination });
-
-  final Destination destination;
-
-  @override
-  State<TextPage> createState() => _TextPageState();
-}
-
-class _TextPageState extends State<TextPage> {
-  late final TextEditingController textController;
-
-  @override
-  void initState() {
-    super.initState();
-    textController = TextEditingController(text: 'Sample Text');
-  }
-
-  @override
-  void dispose() {
-    textController.dispose();
-    super.dispose();
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    final ThemeData theme = Theme.of(context);
-    return Scaffold(
-      appBar: AppBar(
-        title: Text('${widget.destination.title} TextPage - /list/text'),
-        backgroundColor: widget.destination.color,
-      ),
-      backgroundColor: widget.destination.color[50],
-      body: Container(
-        padding: const EdgeInsets.all(32.0),
-        alignment: Alignment.center,
-        child: TextField(
-          controller: textController,
-          style: theme.primaryTextTheme.headlineMedium?.copyWith(
-            color: widget.destination.color,
-          ),
-          decoration: InputDecoration(
-            focusedBorder: UnderlineInputBorder(
-              borderSide: BorderSide(
-                color: widget.destination.color,
-                width: 3.0,
-              ),
-            ),
-          ),
-        ),
-      ),
-    );
-  }
-}
-
-class DestinationView extends StatefulWidget {
-  const DestinationView({
-    super.key,
-    required this.destination,
-    required this.navigatorKey,
-  });
-
-  final Destination destination;
-  final Key navigatorKey;
-
-  @override
-  State<DestinationView> createState() => _DestinationViewState();
-}
-
-class _DestinationViewState extends State<DestinationView> {
-  @override
-  Widget build(BuildContext context) {
-    return Navigator(
-      key: widget.navigatorKey,
-      onGenerateRoute: (RouteSettings settings) {
-        return MaterialPageRoute<void>(
-          settings: settings,
-          builder: (BuildContext context) {
-            switch(settings.name) {
-              case '/':
-                return RootPage(destination: widget.destination);
-              case '/list':
-                return ListPage(destination: widget.destination);
-              case '/text':
-                return TextPage(destination: widget.destination);
-            }
-            assert(false);
-            return const SizedBox();
-          },
-        );
-      },
-    );
-  }
-}

examples/api/lib/material/navigation_bar/navigation_bar.2.dart

@@ -0,0 +1,367 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/// Flutter code sample for [NavigationBar] with nested [Navigator] destinations.
+
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(const MaterialApp(home: Home()));
+}
+
+class Home extends StatefulWidget {
+  const Home({ super.key });
+
+  @override
+  State<Home> createState() => _HomeState();
+}
+
+class _HomeState extends State<Home> with TickerProviderStateMixin<Home> {
+  static const List<Destination> allDestinations = <Destination>[
+    Destination(0, 'Teal', Icons.home, Colors.teal),
+    Destination(1, 'Cyan', Icons.business, Colors.cyan),
+    Destination(2, 'Orange', Icons.school, Colors.orange),
+    Destination(3, 'Blue', Icons.flight, Colors.blue),
+  ];
+
+  late final List<GlobalKey<NavigatorState>> navigatorKeys;
+  late final List<GlobalKey> destinationKeys;
+  late final List<AnimationController> destinationFaders;
+  late final List<Widget> destinationViews;
+  int selectedIndex = 0;
+
+  AnimationController buildFaderController() {
+    final AnimationController controller =  AnimationController(vsync: this, duration: const Duration(milliseconds: 200));
+    controller.addStatusListener((AnimationStatus status) {
+      if (status == AnimationStatus.dismissed) {
+        setState(() { }); // Rebuild unselected destinations offstage.
+      }
+    });
+    return controller;
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    navigatorKeys = List<GlobalKey<NavigatorState>>.generate(allDestinations.length, (int index) => GlobalKey()).toList();
+    destinationFaders = List<AnimationController>.generate(allDestinations.length, (int index) => buildFaderController()).toList();
+    destinationFaders[selectedIndex].value = 1.0;
+    destinationViews = allDestinations.map((Destination destination) {
+      return FadeTransition(
+        opacity: destinationFaders[destination.index].drive(CurveTween(curve: Curves.fastOutSlowIn)),
+        child: DestinationView(
+          destination: destination,
+          navigatorKey: navigatorKeys[destination.index],
+        )
+      );
+    }).toList();
+  }
+
+  @override
+  void dispose() {
+    for (final AnimationController controller in destinationFaders) {
+      controller.dispose();
+    }
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return WillPopScope(
+      onWillPop: () async {
+        final NavigatorState navigator = navigatorKeys[selectedIndex].currentState!;
+        if (!navigator.canPop()) {
+          return true;
+        }
+        navigator.pop();
+        return false;
+      },
+      child: Scaffold(
+        body: SafeArea(
+          top: false,
+          child: Stack(
+            fit: StackFit.expand,
+            children: allDestinations.map((Destination destination) {
+              final int index = destination.index;
+              final Widget view = destinationViews[index];
+              if (index == selectedIndex) {
+                destinationFaders[index].forward();
+                return Offstage(offstage: false, child: view);
+              } else {
+                destinationFaders[index].reverse();
+                if (destinationFaders[index].isAnimating) {
+                  return IgnorePointer(child: view);
+                }
+                return Offstage(child: view);
+              }
+            }).toList(),
+          ),
+        ),
+        bottomNavigationBar: NavigationBar(
+          selectedIndex: selectedIndex,
+          onDestinationSelected: (int index) {
+            setState(() {
+              selectedIndex = index;
+            });
+          },
+          destinations: allDestinations.map((Destination destination) {
+            return NavigationDestination(
+              icon: Icon(destination.icon, color: destination.color),
+              label: destination.title,
+            );
+          }).toList(),
+        ),
+      ),
+    );
+  }
+}
+
+class Destination {
+  const Destination(this.index, this.title, this.icon, this.color);
+  final int index;
+  final String title;
+  final IconData icon;
+  final MaterialColor color;
+}
+
+class RootPage extends StatelessWidget {
+  const RootPage({ super.key, required this.destination });
+
+  final Destination destination;
+
+  Widget _buildDialog(BuildContext context) {
+    return AlertDialog(
+      title: Text('${destination.title} AlertDialog'),
+      actions: <Widget>[
+        TextButton(
+          onPressed: () { Navigator.pop(context); },
+          child: const Text('OK'),
+        ),
+      ],
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final TextStyle headlineSmall = Theme.of(context).textTheme.headlineSmall!;
+    final ButtonStyle buttonStyle = ElevatedButton.styleFrom(
+      backgroundColor: destination.color,
+      visualDensity: VisualDensity.comfortable,
+      padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
+      textStyle: headlineSmall,
+    );
+
+    return Scaffold(
+      appBar: AppBar(
+        title: Text('${destination.title} RootPage - /'),
+        backgroundColor: destination.color,
+      ),
+      backgroundColor: destination.color[50],
+      body: Center(
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: <Widget>[
+            ElevatedButton(
+              style: buttonStyle,
+              onPressed: () {
+                Navigator.pushNamed(context, '/list');
+              },
+              child: const Text('Push /list'),
+            ),
+            const SizedBox(height: 16),
+            ElevatedButton(
+              style: buttonStyle,
+              onPressed: () {
+                showDialog(
+                  context: context,
+                  useRootNavigator: false,
+                  builder: _buildDialog,
+                );
+              },
+              child: const Text('Local Dialog'),
+            ),
+            const SizedBox(height: 16),
+            ElevatedButton(
+              style: buttonStyle,
+              onPressed: () {
+                showDialog(
+                  context: context,
+                  useRootNavigator: true,
+                  builder: _buildDialog,
+                );
+              },
+              child: const Text('Root Dialog'),
+            ),
+            const SizedBox(height: 16),
+            Builder(
+              builder: (BuildContext context) {
+                return ElevatedButton(
+                  style: buttonStyle,
+                  onPressed: () {
+                    showBottomSheet(
+                      context: context,
+                      builder: (BuildContext context) {
+                        return Container(
+                          padding: const EdgeInsets.all(16),
+                          width: double.infinity,
+                          child: Text(
+                            '${destination.title} BottomSheet\n'
+                            'Tap the back button to dismiss',
+                            style: headlineSmall,
+                            softWrap: true,
+                            textAlign: TextAlign.center,
+                          ),
+                        );
+                      },
+                    );
+                  },
+                  child: const Text('Local BottomSheet'),
+                );
+              },
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class ListPage extends StatelessWidget {
+  const ListPage({ super.key, required this.destination });
+
+  final Destination destination;
+
+  @override
+  Widget build(BuildContext context) {
+    const int itemCount = 50;
+    final ButtonStyle buttonStyle = OutlinedButton.styleFrom(
+      foregroundColor: destination.color,
+      fixedSize: const Size.fromHeight(128),
+      textStyle: Theme.of(context).textTheme.headlineSmall,
+    );
+    return Scaffold(
+      appBar: AppBar(
+        title: Text('${destination.title} ListPage - /list'),
+        backgroundColor: destination.color,
+      ),
+      backgroundColor: destination.color[50],
+      body: SizedBox.expand(
+        child: ListView.builder(
+          itemCount: itemCount,
+          itemBuilder: (BuildContext context, int index) {
+            return Padding(
+              padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 8),
+              child: OutlinedButton(
+                style: buttonStyle.copyWith(
+                  backgroundColor: MaterialStatePropertyAll<Color>(
+                    Color.lerp(destination.color[100], Colors.white, index / itemCount)!
+                  ),
+                ),
+                onPressed: () {
+                  Navigator.pushNamed(context, '/text');
+                },
+                child: Text('Push /text [$index]'),
+              ),
+            );
+          },
+        ),
+      ),
+    );
+  }
+}
+
+class TextPage extends StatefulWidget {
+  const TextPage({ super.key, required this.destination });
+
+  final Destination destination;
+
+  @override
+  State<TextPage> createState() => _TextPageState();
+}
+
+class _TextPageState extends State<TextPage> {
+  late final TextEditingController textController;
+
+  @override
+  void initState() {
+    super.initState();
+    textController = TextEditingController(text: 'Sample Text');
+  }
+
+  @override
+  void dispose() {
+    textController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final ThemeData theme = Theme.of(context);
+    return Scaffold(
+      appBar: AppBar(
+        title: Text('${widget.destination.title} TextPage - /list/text'),
+        backgroundColor: widget.destination.color,
+      ),
+      backgroundColor: widget.destination.color[50],
+      body: Container(
+        padding: const EdgeInsets.all(32.0),
+        alignment: Alignment.center,
+        child: TextField(
+          controller: textController,
+          style: theme.primaryTextTheme.headlineMedium?.copyWith(
+            color: widget.destination.color,
+          ),
+          decoration: InputDecoration(
+            focusedBorder: UnderlineInputBorder(
+              borderSide: BorderSide(
+                color: widget.destination.color,
+                width: 3.0,
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class DestinationView extends StatefulWidget {
+  const DestinationView({
+    super.key,
+    required this.destination,
+    required this.navigatorKey,
+  });
+
+  final Destination destination;
+  final Key navigatorKey;
+
+  @override
+  State<DestinationView> createState() => _DestinationViewState();
+}
+
+class _DestinationViewState extends State<DestinationView> {
+  @override
+  Widget build(BuildContext context) {
+    return Navigator(
+      key: widget.navigatorKey,
+      onGenerateRoute: (RouteSettings settings) {
+        return MaterialPageRoute<void>(
+          settings: settings,
+          builder: (BuildContext context) {
+            switch(settings.name) {
+              case '/':
+                return RootPage(destination: widget.destination);
+              case '/list':
+                return ListPage(destination: widget.destination);
+              case '/text':
+                return TextPage(destination: widget.destination);
+            }
+            assert(false);
+            return const SizedBox();
+          },
+        );
+      },
+    );
+  }
+}

examples/api/test/material/navigation_bar/navigation_bar.0_test.dart

@@ -11,10 +11,9 @@ void main() {
   testWidgets('Navigation bar updates destination on tap',
       (WidgetTester tester) async {
     await tester.pumpWidget(
-      const example.ExampleApp(),
+      const example.NavigationBarApp(),
     );
-    final NavigationBar navigationBarWidget =
-        tester.firstWidget(find.byType(NavigationBar));
+    final NavigationBar navigationBarWidget = tester.firstWidget(find.byType(NavigationBar));
 
     /// NavigationDestinations must be rendered
     expect(find.text('Explore'), findsOneWidget);

examples/api/test/material/navigation_bar/navigation_bar.1_test.dart

@@ -3,106 +3,41 @@
 // found in the LICENSE file.
 
 import 'package:flutter/material.dart';
-import 'package:flutter_api_samples/material/navigation_bar/navigation_bar.1.dart' as example;
+import 'package:flutter_api_samples/material/navigation_bar/navigation_bar.1.dart'
+    as example;
 import 'package:flutter_test/flutter_test.dart';
 
 void main() {
-  testWidgets('RootPage: only selected destination is on stage', (WidgetTester tester) async {
-    await tester.pumpWidget(const MaterialApp(home: example.Home()));
+  testWidgets('Navigation bar updates label behavior when tapping buttons',
+      (WidgetTester tester) async {
+    await tester.pumpWidget(
+      const example.NavigationBarApp(),
+    );
+    NavigationBar navigationBarWidget = tester.firstWidget(find.byType(NavigationBar));
 
-    const String tealTitle = 'Teal RootPage - /';
-    const String cyanTitle = 'Cyan RootPage - /';
-    const String orangeTitle = 'Orange RootPage - /';
-    const String blueTitle = 'Blue RootPage - /';
+    expect(find.text('Label behavior: alwaysShow'), findsOneWidget);
 
-    await tester.tap(find.widgetWithText(NavigationDestination, 'Teal'));
+    /// Test alwaysShow label behavior button.
+    await tester.tap(find.widgetWithText(ElevatedButton, 'alwaysShow'));
     await tester.pumpAndSettle();
-    expect(find.text(tealTitle), findsOneWidget);
-    expect(find.text(cyanTitle), findsNothing);
-    expect(find.text(orangeTitle), findsNothing);
-    expect(find.text(blueTitle), findsNothing);
 
-    await tester.tap(find.widgetWithText(NavigationDestination, 'Cyan'));
-    await tester.pumpAndSettle();
-    expect(find.text(tealTitle), findsNothing);
-    expect(find.text(cyanTitle), findsOneWidget);
-    expect(find.text(orangeTitle), findsNothing);
-    expect(find.text(blueTitle), findsNothing);
+    expect(find.text('Label behavior: alwaysShow'), findsOneWidget);
+    expect(navigationBarWidget.labelBehavior, NavigationDestinationLabelBehavior.alwaysShow);
 
-    await tester.tap(find.widgetWithText(NavigationDestination, 'Orange'));
+    /// Test onlyShowSelected label behavior button.
+    await tester.tap(find.widgetWithText(ElevatedButton, 'onlyShowSelected'));
     await tester.pumpAndSettle();
-    expect(find.text(tealTitle), findsNothing);
-    expect(find.text(cyanTitle), findsNothing);
-    expect(find.text(orangeTitle), findsOneWidget);
-    expect(find.text(blueTitle), findsNothing);
 
-    await tester.tap(find.widgetWithText(NavigationDestination, 'Blue'));
-    await tester.pumpAndSettle();
-    expect(find.text(tealTitle), findsNothing);
-    expect(find.text(cyanTitle), findsNothing);
-    expect(find.text(orangeTitle), findsNothing);
-    expect(find.text(blueTitle), findsOneWidget);
-  });
+    expect(find.text('Label behavior: onlyShowSelected'), findsOneWidget);
+    navigationBarWidget = tester.firstWidget(find.byType(NavigationBar));
+    expect(navigationBarWidget.labelBehavior, NavigationDestinationLabelBehavior.onlyShowSelected);
 
-  testWidgets('RootPage', (WidgetTester tester) async {
-    await tester.pumpWidget(const MaterialApp(home: example.Home()));
+    /// Test alwaysHide label behavior button.
+    await tester.tap(find.widgetWithText(ElevatedButton, 'alwaysHide'));
+    await tester.pumpAndSettle();
 
-    await tester.tap(find.widgetWithText(NavigationDestination, 'Teal'));
-    await tester.pumpAndSettle();
-    await tester.tap(find.text('Local Dialog'));
-    await tester.pumpAndSettle();
-    expect(find.text('Teal AlertDialog'), findsOneWidget);
-    await tester.tap(find.text('OK'));
-    await tester.pumpAndSettle();
-    expect(find.text('Teal AlertDialog'), findsNothing);
-
-    await tester.pumpAndSettle();
-    await tester.tap(find.text('Root Dialog'));
-    await tester.pumpAndSettle();
-    expect(find.text('Teal AlertDialog'), findsOneWidget);
-    await tester.tapAt(const Offset(5, 5));
-    await tester.pumpAndSettle();
-    expect(find.text('Teal AlertDialog'), findsNothing);
-
-    await tester.tap(find.text('Local BottomSheet'));
-    await tester.pumpAndSettle();
-    expect(find.byType(BottomSheet), findsOneWidget);
-    await tester.tap(find.byType(BackButton));
-    await tester.pumpAndSettle();
-    expect(find.byType(BottomSheet), findsNothing);
-
-    await tester.tap(find.text('Push /list'));
-    await tester.pumpAndSettle();
-    expect(find.text('Teal ListPage - /list'), findsOneWidget);
-  });
-
-
-  testWidgets('ListPage', (WidgetTester tester) async {
-    await tester.pumpWidget(const MaterialApp(home: example.Home()));
-    expect(find.text('Teal RootPage - /'), findsOneWidget);
-
-    await tester.tap(find.widgetWithText(ElevatedButton, 'Push /list'));
-    await tester.pumpAndSettle();
-    expect(find.text('Teal ListPage - /list'), findsOneWidget);
-    expect(find.text('Push /text [0]'), findsOneWidget);
-
-    await tester.tap(find.widgetWithText(NavigationDestination, 'Orange'));
-    await tester.pumpAndSettle();
-    await tester.tap(find.widgetWithText(ElevatedButton, 'Push /list'));
-    await tester.pumpAndSettle();
-    expect(find.text('Orange ListPage - /list'), findsOneWidget);
-    expect(find.text('Push /text [0]'), findsOneWidget);
-
-    await tester.tap(find.byType(BackButton));
-    await tester.pumpAndSettle();
-    expect(find.text('Orange RootPage - /'), findsOneWidget);
-
-    await tester.tap(find.widgetWithText(NavigationDestination, 'Teal'));
-    await tester.pumpAndSettle();
-    expect(find.text('Teal ListPage - /list'), findsOneWidget);
-
-    await tester.tap(find.byType(BackButton));
-    await tester.pumpAndSettle();
-    expect(find.text('Teal RootPage - /'), findsOneWidget);
+    expect(find.text('Label behavior: alwaysHide'), findsOneWidget);
+    navigationBarWidget = tester.firstWidget(find.byType(NavigationBar));
+    expect(navigationBarWidget.labelBehavior, NavigationDestinationLabelBehavior.alwaysHide);
   });
 }

examples/api/test/material/navigation_bar/navigation_bar.2_test.dart

@@ -0,0 +1,108 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+import 'package:flutter_api_samples/material/navigation_bar/navigation_bar.2.dart' as example;
+import 'package:flutter_test/flutter_test.dart';
+
+void main() {
+  testWidgets('RootPage: only selected destination is on stage', (WidgetTester tester) async {
+    await tester.pumpWidget(const MaterialApp(home: example.Home()));
+
+    const String tealTitle = 'Teal RootPage - /';
+    const String cyanTitle = 'Cyan RootPage - /';
+    const String orangeTitle = 'Orange RootPage - /';
+    const String blueTitle = 'Blue RootPage - /';
+
+    await tester.tap(find.widgetWithText(NavigationDestination, 'Teal'));
+    await tester.pumpAndSettle();
+    expect(find.text(tealTitle), findsOneWidget);
+    expect(find.text(cyanTitle), findsNothing);
+    expect(find.text(orangeTitle), findsNothing);
+    expect(find.text(blueTitle), findsNothing);
+
+    await tester.tap(find.widgetWithText(NavigationDestination, 'Cyan'));
+    await tester.pumpAndSettle();
+    expect(find.text(tealTitle), findsNothing);
+    expect(find.text(cyanTitle), findsOneWidget);
+    expect(find.text(orangeTitle), findsNothing);
+    expect(find.text(blueTitle), findsNothing);
+
+    await tester.tap(find.widgetWithText(NavigationDestination, 'Orange'));
+    await tester.pumpAndSettle();
+    expect(find.text(tealTitle), findsNothing);
+    expect(find.text(cyanTitle), findsNothing);
+    expect(find.text(orangeTitle), findsOneWidget);
+    expect(find.text(blueTitle), findsNothing);
+
+    await tester.tap(find.widgetWithText(NavigationDestination, 'Blue'));
+    await tester.pumpAndSettle();
+    expect(find.text(tealTitle), findsNothing);
+    expect(find.text(cyanTitle), findsNothing);
+    expect(find.text(orangeTitle), findsNothing);
+    expect(find.text(blueTitle), findsOneWidget);
+  });
+
+  testWidgets('RootPage', (WidgetTester tester) async {
+    await tester.pumpWidget(const MaterialApp(home: example.Home()));
+
+    await tester.tap(find.widgetWithText(NavigationDestination, 'Teal'));
+    await tester.pumpAndSettle();
+    await tester.tap(find.text('Local Dialog'));
+    await tester.pumpAndSettle();
+    expect(find.text('Teal AlertDialog'), findsOneWidget);
+    await tester.tap(find.text('OK'));
+    await tester.pumpAndSettle();
+    expect(find.text('Teal AlertDialog'), findsNothing);
+
+    await tester.pumpAndSettle();
+    await tester.tap(find.text('Root Dialog'));
+    await tester.pumpAndSettle();
+    expect(find.text('Teal AlertDialog'), findsOneWidget);
+    await tester.tapAt(const Offset(5, 5));
+    await tester.pumpAndSettle();
+    expect(find.text('Teal AlertDialog'), findsNothing);
+
+    await tester.tap(find.text('Local BottomSheet'));
+    await tester.pumpAndSettle();
+    expect(find.byType(BottomSheet), findsOneWidget);
+    await tester.tap(find.byType(BackButton));
+    await tester.pumpAndSettle();
+    expect(find.byType(BottomSheet), findsNothing);
+
+    await tester.tap(find.text('Push /list'));
+    await tester.pumpAndSettle();
+    expect(find.text('Teal ListPage - /list'), findsOneWidget);
+  });
+
+
+  testWidgets('ListPage', (WidgetTester tester) async {
+    await tester.pumpWidget(const MaterialApp(home: example.Home()));
+    expect(find.text('Teal RootPage - /'), findsOneWidget);
+
+    await tester.tap(find.widgetWithText(ElevatedButton, 'Push /list'));
+    await tester.pumpAndSettle();
+    expect(find.text('Teal ListPage - /list'), findsOneWidget);
+    expect(find.text('Push /text [0]'), findsOneWidget);
+
+    await tester.tap(find.widgetWithText(NavigationDestination, 'Orange'));
+    await tester.pumpAndSettle();
+    await tester.tap(find.widgetWithText(ElevatedButton, 'Push /list'));
+    await tester.pumpAndSettle();
+    expect(find.text('Orange ListPage - /list'), findsOneWidget);
+    expect(find.text('Push /text [0]'), findsOneWidget);
+
+    await tester.tap(find.byType(BackButton));
+    await tester.pumpAndSettle();
+    expect(find.text('Orange RootPage - /'), findsOneWidget);
+
+    await tester.tap(find.widgetWithText(NavigationDestination, 'Teal'));
+    await tester.pumpAndSettle();
+    expect(find.text('Teal ListPage - /list'), findsOneWidget);
+
+    await tester.tap(find.byType(BackButton));
+    await tester.pumpAndSettle();
+    expect(find.text('Teal RootPage - /'), findsOneWidget);
+  });
+}

packages/flutter/lib/src/material/navigation_bar.dart

@@ -53,6 +53,14 @@ const double _kIndicatorWidth = 64;
 /// {@end-tool}
 ///
 /// {@tool dartpad}
+/// This example showcases [NavigationBar] label behaviors. When tapping on one
+/// of the label behavior options, the [labelBehavior] of the [NavigationBar]
+/// will be updated.
+///
+/// ** See code in examples/api/lib/material/navigation_bar/navigation_bar.1.dart **
+/// {@end-tool}
+///
+/// {@tool dartpad}
 /// This example shows a [NavigationBar] as it is used within a [Scaffold]
 /// widget when there are nested navigators that provide local navigation. The
 /// [NavigationBar] has four [NavigationDestination] widgets with different
@@ -60,7 +68,7 @@ const double _kIndicatorWidth = 64;
 /// item's index and displays a corresponding page with its own local navigator
 /// in the body of a [Scaffold].
 ///
-/// ** See code in examples/api/lib/material/navigation_bar/navigation_bar.1.dart **
+/// ** See code in examples/api/lib/material/navigation_bar/navigation_bar.2.dart **
 /// {@end-tool}
 /// See also:
 ///
@@ -266,6 +274,8 @@ class NavigationDestination extends StatelessWidget {
     super.key,
     required this.icon,
     this.selectedIcon,
+    this.indicatorColor,
+    this.indicatorShape,
     required this.label,
     this.tooltip,
   });
@@ -290,6 +300,12 @@ class NavigationDestination extends StatelessWidget {
   /// would use a size of 24.0 and [ColorScheme.onSurface].
   final Widget? selectedIcon;
 
+  /// The color of the [indicatorShape] when this destination is selected.
+  final Color? indicatorColor;
+
+  /// The shape of the selected inidicator.
+  final ShapeBorder? indicatorShape;
+
   /// The text label that appears below the icon of this
   /// [NavigationDestination].
   ///
@@ -335,8 +351,8 @@ class NavigationDestination extends StatelessWidget {
           children: <Widget>[
             NavigationIndicator(
               animation: animation,
-              color: navigationBarTheme.indicatorColor ?? defaults.indicatorColor!,
-              shape: navigationBarTheme.indicatorShape ?? defaults.indicatorShape!
+              color: indicatorColor ?? navigationBarTheme.indicatorColor ?? defaults.indicatorColor!,
+              shape: indicatorShape ?? navigationBarTheme.indicatorShape ?? defaults.indicatorShape!
             ),
             _StatusTransitionWidgetBuilder(
               animation: animation,
@@ -440,10 +456,10 @@ class _NavigationDestinationBuilder extends StatelessWidget {
     final double labelPadding;
     switch (info.labelBehavior) {
       case NavigationDestinationLabelBehavior.alwaysShow:
-        labelPadding = 10;
+        labelPadding = 8;
         break;
       case NavigationDestinationLabelBehavior.onlyShowSelected:
-        labelPadding = selected ? 10 : 0;
+        labelPadding = selected ? 8 : 0;
         break;
       case NavigationDestinationLabelBehavior.alwaysHide:
         labelPadding = 0;

packages/flutter/test/material/navigation_bar_test.dart

@@ -589,7 +589,7 @@ void main() {
     await tester.pumpAndSettle();
 
     final RenderObject inkFeatures = tester.allRenderObjects.firstWhere((RenderObject object) => object.runtimeType.toString() == '_RenderInkFeatures');
-    Offset indicatorCenter = const Offset(600, 30);
+    Offset indicatorCenter = const Offset(600, 32);
     const Size includedIndicatorSize = Size(64, 32);
     const Size excludedIndicatorSize = Size(74, 40);
 
@@ -715,7 +715,7 @@ void main() {
     selectedIndex = 1;
     await tester.pumpWidget(buildWidget(labelBehavior: NavigationDestinationLabelBehavior.onlyShowSelected));
     await tester.pumpAndSettle();
-    indicatorCenter = const Offset(600, 30);
+    indicatorCenter = const Offset(600, 32);
 
     expect(
       inkFeatures,
@@ -803,6 +803,96 @@ void main() {
     transform = tester.widget<Transform>(transformFinder).transform;
     expect(transform.getColumn(0)[0], 1.0);
   });
+
+  testWidgets('Navigation destination updates indicator color and shape', (WidgetTester tester) async {
+    final ThemeData theme = ThemeData(useMaterial3: true);
+    const Color color = Color(0xff0000ff);
+    const ShapeBorder shape = CircleBorder();
+
+    Widget buildNaviagationBar({Color? indicatorColor, ShapeBorder? indicatorShape}) {
+      return MaterialApp(
+        theme: theme,
+        home: Scaffold(
+          bottomNavigationBar: NavigationBar(
+            destinations: <Widget>[
+              NavigationDestination(
+                icon: const Icon(Icons.ac_unit),
+                label: 'AC',
+                indicatorColor: indicatorColor,
+                indicatorShape: indicatorShape,
+              ),
+              const NavigationDestination(
+                icon: Icon(Icons.access_alarm),
+                label: 'Alarm',
+              ),
+            ],
+            onDestinationSelected: (int i) { },
+          ),
+        ),
+      );
+    }
+
+    await tester.pumpWidget(buildNaviagationBar());
+
+    // Test default indicator color and shape.
+    expect(_indicator(tester)?.color, theme.colorScheme.secondaryContainer);
+    expect(_indicator(tester)?.shape, const StadiumBorder());
+
+    await tester.pumpWidget(buildNaviagationBar(indicatorColor: color, indicatorShape: shape));
+
+    // Test custom indicator color and shape.
+    expect(_indicator(tester)?.color, color);
+    expect(_indicator(tester)?.shape, shape);
+  });
+
+  group('Material 2', () {
+    // Tests that are only relevant for Material 2. Once ThemeData.useMaterial3
+    // is turned on by default, these tests can be removed.
+
+    testWidgets('Navigation destination updates indicator color and shape', (WidgetTester tester) async {
+      final ThemeData theme = ThemeData(useMaterial3: false);
+      const Color color = Color(0xff0000ff);
+      const ShapeBorder shape = CircleBorder();
+
+      Widget buildNaviagationBar({Color? indicatorColor, ShapeBorder? indicatorShape}) {
+        return MaterialApp(
+          theme: theme,
+          home: Scaffold(
+            bottomNavigationBar: NavigationBar(
+              destinations: <Widget>[
+                NavigationDestination(
+                  icon: const Icon(Icons.ac_unit),
+                  label: 'AC',
+                  indicatorColor: indicatorColor,
+                  indicatorShape: indicatorShape,
+                ),
+                const NavigationDestination(
+                  icon: Icon(Icons.access_alarm),
+                  label: 'Alarm',
+                ),
+              ],
+              onDestinationSelected: (int i) { },
+            ),
+          ),
+        );
+      }
+
+      await tester.pumpWidget(buildNaviagationBar());
+
+      // Test default indicator color and shape.
+      expect(_indicator(tester)?.color, theme.colorScheme.secondary.withOpacity(0.24));
+      expect(
+        _indicator(tester)?.shape,
+        const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(16))),
+      );
+
+      await tester.pumpWidget(buildNaviagationBar(indicatorColor: color, indicatorShape: shape));
+
+      // Test custom indicator color and shape.
+      expect(_indicator(tester)?.color, color);
+      expect(_indicator(tester)?.shape, shape);
+    });
+  });
 }
 
 Widget _buildWidget(Widget child) {