Add `Badge` widget to `NavigationBar` and `NavigationRail` examples (#129834)

fixes [Showcase `Badge` widget in `NavigationBar` and `NavigationRail` examples
](https://github.com/flutter/flutter/issues/129832)

| Preview | Preview | Preview |
| --------------- | --------------- | --------------- |
| <img src="https://github.com/flutter/flutter/assets/48603081/808c9577-c6b4-465f-b9fe-100d422dd408" /> | <img src="https://github.com/flutter/flutter/assets/48603081/c9b3ee03-56d7-4220-94cf-06e235631714" /> | <img src="https://github.com/flutter/flutter/assets/48603081/43fab47b-25e8-4412-92d2-6d4868e43ff8"  /> |

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

@@ -13,7 +13,10 @@ class NavigationBarApp extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return const MaterialApp(home: NavigationExample());
+    return MaterialApp(
+      theme: ThemeData(useMaterial3: true),
+      home: const NavigationExample(),
+    );
   }
 }
 
@@ -29,6 +32,7 @@ class _NavigationExampleState extends State<NavigationExample> {
 
   @override
   Widget build(BuildContext context) {
+    final ThemeData theme = Theme.of(context);
     return Scaffold(
       bottomNavigationBar: NavigationBar(
         onDestinationSelected: (int index) {
@@ -36,7 +40,7 @@ class _NavigationExampleState extends State<NavigationExample> {
             currentPageIndex = index;
           });
         },
-        indicatorColor: Colors.amber[800],
+        indicatorColor: Colors.amber,
         selectedIndex: currentPageIndex,
         destinations: const <Widget>[
           NavigationDestination(
@@ -45,31 +49,94 @@ class _NavigationExampleState extends State<NavigationExample> {
             label: 'Home',
           ),
           NavigationDestination(
-            icon: Icon(Icons.business),
-            label: 'Business',
+            icon: Badge(child: Icon(Icons.notifications_sharp)),
+            label: 'Notifications',
           ),
           NavigationDestination(
-            selectedIcon: Icon(Icons.school),
-            icon: Icon(Icons.school_outlined),
-            label: 'School',
+            icon: Badge(
+              label: Text('2'),
+              child: Icon(Icons.messenger_sharp),
+            ),
+            label: 'Messages',
           ),
         ],
       ),
       body: <Widget>[
-        Container(
-          color: Colors.red,
-          alignment: Alignment.center,
-          child: const Text('Page 1'),
-        ),
-        Container(
-          color: Colors.green,
-          alignment: Alignment.center,
-          child: const Text('Page 2'),
-        ),
-        Container(
-          color: Colors.blue,
-          alignment: Alignment.center,
-          child: const Text('Page 3'),
+        /// Home page
+        Card(
+          shadowColor: Colors.transparent,
+          margin: const EdgeInsets.all(8.0),
+          child: SizedBox.expand(
+            child: Center(
+              child: Text(
+                'Home page',
+                style: theme.textTheme.titleLarge,
+              ),
+            ),
+          ),
+        ),
+        /// Notifications page
+        const Padding(
+          padding: EdgeInsets.all(8.0),
+          child: Column(
+            children: <Widget>[
+              Card(
+                child: ListTile(
+                  leading: Icon(Icons.notifications_sharp),
+                  title: Text('Notification 1'),
+                  subtitle: Text('This is a notification'),
+                ),
+              ),
+              Card(
+                child: ListTile(
+                  leading: Icon(Icons.notifications_sharp),
+                  title: Text('Notification 2'),
+                  subtitle: Text('This is a notification'),
+                ),
+              ),
+            ],
+          ),
+        ),
+        /// Messages page
+        ListView.builder(
+          reverse: true,
+          itemCount: 2,
+          itemBuilder: (BuildContext context, int index) {
+            if (index == 0) {
+              return Align(
+                alignment: Alignment.centerRight,
+                child: Container(
+                  margin: const EdgeInsets.all(8.0),
+                  padding: const EdgeInsets.all(8.0),
+                  decoration: BoxDecoration(
+                    color: theme.colorScheme.primary,
+                    borderRadius: BorderRadius.circular(8.0),
+                  ),
+                  child: Text(
+                    'Hello',
+                    style: theme.textTheme.bodyLarge!
+                      .copyWith(color: theme.colorScheme.onPrimary),
+                  ),
+                ),
+              );
+            }
+            return Align(
+              alignment: Alignment.centerLeft,
+              child: Container(
+                margin: const EdgeInsets.all(8.0),
+                padding: const EdgeInsets.all(8.0),
+                decoration: BoxDecoration(
+               color: theme.colorScheme.primary,
+                    borderRadius: BorderRadius.circular(8.0),
+                ),
+                child: Text(
+                  'Hi!',
+                  style: theme.textTheme.bodyLarge!
+                    .copyWith(color: theme.colorScheme.onPrimary),
+                ),
+              ),
+            );
+          },
         ),
       ][currentPageIndex],
     );

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

@@ -14,7 +14,7 @@ class NavigationRailExampleApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
-      theme: ThemeData(colorSchemeSeed: const Color(0xff6750a4), useMaterial3: true),
+      theme: ThemeData(useMaterial3: true),
       home: const NavRailExample(),
     );
   }
@@ -73,13 +73,19 @@ class _NavRailExampleState extends State<NavRailExample> {
                   label: Text('First'),
                 ),
                 NavigationRailDestination(
-                  icon: Icon(Icons.bookmark_border),
-                  selectedIcon: Icon(Icons.book),
+                  icon: Badge(child: Icon(Icons.bookmark_border)),
+                  selectedIcon: Badge(child: Icon(Icons.book)),
                   label: Text('Second'),
                 ),
                 NavigationRailDestination(
-                  icon: Icon(Icons.star_border),
-                  selectedIcon: Icon(Icons.star),
+                  icon: Badge(
+                    label: Text('4'),
+                    child: Icon(Icons.star_border),
+                  ),
+                  selectedIcon: Badge(
+                    label: Text('4'),
+                    child: Icon(Icons.star),
+                  ),
                   label: Text('Third'),
                 ),
               ],

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

@@ -17,20 +17,36 @@ void main() {
 
     /// NavigationDestinations must be rendered
     expect(find.text('Home'), findsOneWidget);
-    expect(find.text('Business'), findsOneWidget);
-    expect(find.text('School'), findsOneWidget);
+    expect(find.text('Notifications'), findsOneWidget);
+    expect(find.text('Messages'), findsOneWidget);
 
-    /// initial index must be zero
+    /// Test notification badge.
+    final Badge notificationBadge = tester.firstWidget(find.ancestor(
+      of: find.byIcon(Icons.notifications_sharp),
+      matching: find.byType(Badge),
+    ));
+    expect(notificationBadge.label, null);
+
+    /// Test messages badge.
+    final Badge messagesBadge = tester.firstWidget(find.ancestor(
+      of: find.byIcon(Icons.messenger_sharp),
+      matching: find.byType(Badge),
+    ));
+    expect(messagesBadge.label, isNotNull);
+
+    /// Initial index must be zero
     expect(navigationBarWidget.selectedIndex, 0);
+    expect(find.text('Home page'), findsOneWidget);
 
-    /// switch to second tab
-    await tester.tap(find.text('Business'));
+    /// Switch to second tab
+    await tester.tap(find.text('Notifications'));
     await tester.pumpAndSettle();
-    expect(find.text('Page 2'), findsOneWidget);
+    expect(find.text('This is a notification'), findsNWidgets(2));
 
-    /// switch to third tab
-    await tester.tap(find.text('School'));
+    /// Switch to third tab
+    await tester.tap(find.text('Messages'));
     await tester.pumpAndSettle();
-    expect(find.text('Page 3'), findsOneWidget);
+    expect(find.text('Hi!'), findsOneWidget);
+    expect(find.text('Hello'), findsOneWidget);
   });
 }

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

@@ -94,4 +94,24 @@ void main() {
     expect(find.byType(FloatingActionButton), findsOneWidget);
     expect(find.byType(IconButton), findsOneWidget);
   });
+
+  testWidgets('Destinations have badge', (WidgetTester tester) async {
+    await tester.pumpWidget(
+      const example.NavigationRailExampleApp(),
+    );
+
+    // Test badge wthout label.
+    final Badge notificationBadge = tester.firstWidget(find.ancestor(
+      of: find.byIcon(Icons.bookmark_border),
+      matching: find.byType(Badge),
+    ));
+    expect(notificationBadge.label, null);
+
+    // Test badge with label.
+    final Badge messagesBadge = tester.firstWidget(find.ancestor(
+      of: find.byIcon(Icons.star_border),
+      matching: find.byType(Badge),
+    ));
+    expect(messagesBadge.label, isNotNull);
+  });
 }