Add `IndicatorShape` to `NavigationRailTheme` and fix indicator ripple. (#116108)

* Add `IndicatorShape` to `NavigationRailTheme` and fix  indicator ripple.

* remove unused variables

dev/tools/gen_defaults/lib/navigation_rail_template.dart

@@ -14,14 +14,14 @@ class NavigationRailTemplate extends TokenTemplate {
   String generate() => '''
 class _${blockName}DefaultsM3 extends NavigationRailThemeData {
   _${blockName}DefaultsM3(this.context)
-      : super(
-          elevation: ${elevation("md.comp.navigation-rail.container")},
-          groupAlignment: -1,
-          labelType: NavigationRailLabelType.none,
-          useIndicator: true,
-          minWidth: ${tokens["md.comp.navigation-rail.container.width"]},
-          minExtendedWidth: 256,
-        );
+    : super(
+        elevation: ${elevation("md.comp.navigation-rail.container")},
+        groupAlignment: -1,
+        labelType: NavigationRailLabelType.none,
+        useIndicator: true,
+        minWidth: ${tokens["md.comp.navigation-rail.container.width"]},
+        minExtendedWidth: 256,
+      );
 
   final BuildContext context;
   late final ColorScheme _colors = Theme.of(context).colorScheme;
@@ -53,6 +53,7 @@ class _${blockName}DefaultsM3 extends NavigationRailThemeData {
 
   @override Color? get indicatorColor => ${componentColor("md.comp.navigation-rail.active-indicator")};
 
+  @override ShapeBorder? get indicatorShape => ${shape("md.comp.navigation-rail.active-indicator")};
 }
 ''';
 }

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

@@ -49,6 +49,7 @@ class NavigationRailThemeData with Diagnosticable {
     this.labelType,
     this.useIndicator,
     this.indicatorColor,
+    this.indicatorShape,
     this.minWidth,
     this.minExtendedWidth,
   });
@@ -91,6 +92,9 @@ class NavigationRailThemeData with Diagnosticable {
   /// when [useIndicator] is true.
   final Color? indicatorColor;
 
+  /// Overrides the default shape of the [NavigationRail]'s selection indicator.
+  final ShapeBorder? indicatorShape;
+
   /// Overrides the default value of [NavigationRail]'s minimum width when it
   /// is not extended.
   final double? minWidth;
@@ -112,6 +116,7 @@ class NavigationRailThemeData with Diagnosticable {
     NavigationRailLabelType? labelType,
     bool? useIndicator,
     Color? indicatorColor,
+    ShapeBorder? indicatorShape,
     double? minWidth,
     double? minExtendedWidth,
   }) {
@@ -126,6 +131,7 @@ class NavigationRailThemeData with Diagnosticable {
       labelType: labelType ?? this.labelType,
       useIndicator: useIndicator ?? this.useIndicator,
       indicatorColor: indicatorColor ?? this.indicatorColor,
+      indicatorShape: indicatorShape ?? this.indicatorShape,
       minWidth: minWidth ?? this.minWidth,
       minExtendedWidth: minExtendedWidth ?? this.minExtendedWidth,
     );
@@ -152,6 +158,7 @@ class NavigationRailThemeData with Diagnosticable {
       labelType: t < 0.5 ? a?.labelType : b?.labelType,
       useIndicator: t < 0.5 ? a?.useIndicator : b?.useIndicator,
       indicatorColor: Color.lerp(a?.indicatorColor, b?.indicatorColor, t),
+      indicatorShape: ShapeBorder.lerp(a?.indicatorShape, b?.indicatorShape, t),
       minWidth: lerpDouble(a?.minWidth, b?.minWidth, t),
       minExtendedWidth: lerpDouble(a?.minExtendedWidth, b?.minExtendedWidth, t),
 
@@ -170,6 +177,7 @@ class NavigationRailThemeData with Diagnosticable {
     labelType,
     useIndicator,
     indicatorColor,
+    indicatorShape,
     minWidth,
     minExtendedWidth,
   );
@@ -193,6 +201,7 @@ class NavigationRailThemeData with Diagnosticable {
         && other.labelType == labelType
         && other.useIndicator == useIndicator
         && other.indicatorColor == indicatorColor
+        && other.indicatorShape == indicatorShape
         && other.minWidth == minWidth
         && other.minExtendedWidth == minExtendedWidth;
   }
@@ -212,6 +221,7 @@ class NavigationRailThemeData with Diagnosticable {
     properties.add(DiagnosticsProperty<NavigationRailLabelType>('labelType', labelType, defaultValue: defaultData.labelType));
     properties.add(DiagnosticsProperty<bool>('useIndicator', useIndicator, defaultValue: defaultData.useIndicator));
     properties.add(ColorProperty('indicatorColor', indicatorColor, defaultValue: defaultData.indicatorColor));
+    properties.add(DiagnosticsProperty<ShapeBorder>('indicatorShape', indicatorShape, defaultValue: null));
     properties.add(DoubleProperty('minWidth', minWidth, defaultValue: defaultData.minWidth));
     properties.add(DoubleProperty('minExtendedWidth', minExtendedWidth, defaultValue: defaultData.minExtendedWidth));
   }

packages/flutter/test/material/navigation_rail_test.dart

@@ -2,10 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'package:flutter/foundation.dart';
+import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
 import 'package:flutter_test/flutter_test.dart';
 
+import '../rendering/mock_canvas.dart';
 import '../widgets/semantics_tester.dart';
 
 void main() {
@@ -2314,14 +2317,24 @@ void main() {
       ),
     );
 
+    final Iterable<Widget> indicatorInkWells = tester.allWidgets.where((Widget object) => object.runtimeType.toString() == '_IndicatorInkWell');
     final Padding firstItem = tester.widget<Padding>(
-      find.descendant(of: find.widgetWithText(InkResponse, 'Abc'), matching: find.widgetWithText(Padding, 'Abc'))
+      find.descendant(
+        of: find.widgetWithText(indicatorInkWells.elementAt(0).runtimeType, 'Abc'),
+        matching: find.widgetWithText(Padding, 'Abc'),
+      )
     );
     final Padding secondItem = tester.widget<Padding>(
-      find.descendant(of: find.widgetWithText(InkResponse, 'Def'), matching: find.widgetWithText(Padding, 'Def'))
+      find.descendant(
+        of: find.widgetWithText(indicatorInkWells.elementAt(1).runtimeType, 'Def'),
+        matching: find.widgetWithText(Padding, 'Def'),
+      )
     );
     final Padding thirdItem = tester.widget<Padding>(
-        find.descendant(of: find.widgetWithText(InkResponse, 'Ghi'), matching: find.widgetWithText(Padding, 'Ghi'))
+      find.descendant(
+        of: find.widgetWithText(indicatorInkWells.elementAt(2).runtimeType, 'Ghi'),
+        matching: find.widgetWithText(Padding, 'Ghi'),
+      )
     );
 
     expect(firstItem.padding, defaultPadding);
@@ -2361,14 +2374,24 @@ void main() {
       ),
     );
 
+    final Iterable<Widget> indicatorInkWells = tester.allWidgets.where((Widget object) => object.runtimeType.toString() == '_IndicatorInkWell');
     final Padding firstItem = tester.widget<Padding>(
-        find.descendant(of: find.widgetWithText(InkResponse, 'Abc'), matching: find.widgetWithText(Padding, 'Abc'))
+      find.descendant(
+        of: find.widgetWithText(indicatorInkWells.elementAt(0).runtimeType, 'Abc'),
+        matching: find.widgetWithText(Padding, 'Abc'),
+      )
     );
     final Padding secondItem = tester.widget<Padding>(
-        find.descendant(of: find.widgetWithText(InkResponse, 'Def'), matching: find.widgetWithText(Padding, 'Def'))
+      find.descendant(
+        of: find.widgetWithText(indicatorInkWells.elementAt(1).runtimeType, 'Def'),
+        matching: find.widgetWithText(Padding, 'Def'),
+      )
     );
     final Padding thirdItem = tester.widget<Padding>(
-        find.descendant(of: find.widgetWithText(InkResponse, 'Ghi'), matching: find.widgetWithText(Padding, 'Ghi'))
+      find.descendant(
+        of: find.widgetWithText(indicatorInkWells.elementAt(2).runtimeType, 'Ghi'),
+        matching: find.widgetWithText(Padding, 'Ghi'),
+      )
     );
 
     expect(firstItem.padding, defaultPadding);
@@ -2408,14 +2431,24 @@ void main() {
       ),
     );
 
+    final Iterable<Widget> indicatorInkWells = tester.allWidgets.where((Widget object) => object.runtimeType.toString() == '_IndicatorInkWell');
     final Padding firstItem = tester.widget<Padding>(
-        find.descendant(of: find.widgetWithText(InkResponse, 'Abc'), matching: find.widgetWithText(Padding, 'Abc'))
+      find.descendant(
+        of: find.widgetWithText(indicatorInkWells.elementAt(0).runtimeType, 'Abc'),
+        matching: find.widgetWithText(Padding, 'Abc'),
+      )
     );
     final Padding secondItem = tester.widget<Padding>(
-        find.descendant(of: find.widgetWithText(InkResponse, 'Def'), matching: find.widgetWithText(Padding, 'Def'))
+      find.descendant(
+        of: find.widgetWithText(indicatorInkWells.elementAt(1).runtimeType, 'Def'),
+        matching: find.widgetWithText(Padding, 'Def'),
+      )
     );
     final Padding thirdItem = tester.widget<Padding>(
-        find.descendant(of: find.widgetWithText(InkResponse, 'Ghi'), matching: find.widgetWithText(Padding, 'Ghi'))
+      find.descendant(
+        of: find.widgetWithText(indicatorInkWells.elementAt(2).runtimeType, 'Ghi'),
+        matching: find.widgetWithText(Padding, 'Ghi'),
+      )
     );
 
     expect(firstItem.padding, defaultPadding);
@@ -2708,6 +2741,111 @@ void main() {
     expect(updatedWidthRTL, defaultWidth + safeAreaPadding);
   });
 
+  testWidgets('NavigationRail indicator renders ripple', (WidgetTester tester) async {
+    await _pumpNavigationRail(
+      tester,
+      navigationRail: NavigationRail(
+        selectedIndex: 1,
+        destinations: const <NavigationRailDestination>[
+          NavigationRailDestination(
+            icon: Icon(Icons.favorite_border),
+            selectedIcon: Icon(Icons.favorite),
+            label: Text('Abc'),
+          ),
+          NavigationRailDestination(
+            icon: Icon(Icons.bookmark_border),
+            selectedIcon: Icon(Icons.bookmark),
+            label: Text('Def'),
+          ),
+        ],
+        labelType: NavigationRailLabelType.all,
+      ),
+    );
+
+    final TestGesture gesture = await tester.createGesture(kind: PointerDeviceKind.mouse);
+    await gesture.addPointer();
+    await gesture.moveTo(tester.getCenter(find.byIcon(Icons.favorite_border)));
+    await tester.pumpAndSettle();
+
+    final RenderObject inkFeatures = tester.allRenderObjects.firstWhere((RenderObject object) => object.runtimeType.toString() == '_RenderInkFeatures');
+    const Rect indicatorRect = Rect.fromLTRB(12.0, 0.0, 68.0, 32.0);
+    const Rect includedRect = indicatorRect;
+    final Rect excludedRect = includedRect.inflate(10);
+
+    expect(
+      inkFeatures,
+      paints
+        ..clipPath(
+          pathMatcher: isPathThat(
+            includes: <Offset>[
+              includedRect.centerLeft,
+              includedRect.topCenter,
+              includedRect.centerRight,
+              includedRect.bottomCenter,
+            ],
+            excludes: <Offset>[
+              excludedRect.centerLeft,
+              excludedRect.topCenter,
+              excludedRect.centerRight,
+              excludedRect.bottomCenter,
+            ],
+          ),
+        )
+        ..rect(
+          rect: indicatorRect,
+          color: const Color(0x0a6750a4),
+        )
+        ..rrect(
+          rrect: RRect.fromLTRBR(12.0, 72.0, 68.0, 104.0, const Radius.circular(16)),
+          color: const Color(0xffe8def8),
+        ),
+    );
+  });
+
+  testWidgets('NavigationRail indicator scale transform', (WidgetTester tester) async {
+    int selectedIndex = 0;
+    Future<void> buildWidget() async {
+      await _pumpNavigationRail(
+        tester,
+        navigationRail: NavigationRail(
+          selectedIndex: selectedIndex,
+          destinations: const <NavigationRailDestination>[
+            NavigationRailDestination(
+              icon: Icon(Icons.favorite_border),
+              selectedIcon: Icon(Icons.favorite),
+              label: Text('Abc'),
+            ),
+            NavigationRailDestination(
+              icon: Icon(Icons.bookmark_border),
+              selectedIcon: Icon(Icons.bookmark),
+              label: Text('Def'),
+            ),
+          ],
+          labelType: NavigationRailLabelType.all,
+        ),
+      );
+    }
+
+    await buildWidget();
+    await tester.pumpAndSettle();
+    final Finder transformFinder = find.descendant(
+      of: find.byType(NavigationIndicator),
+      matching: find.byType(Transform),
+    ).last;
+    Matrix4 transform = tester.widget<Transform>(transformFinder).transform;
+    expect(transform.getColumn(0)[0], 0.0);
+
+    selectedIndex = 1;
+    await buildWidget();
+    await tester.pump(const Duration(milliseconds: 100));
+    transform = tester.widget<Transform>(transformFinder).transform;
+    expect(transform.getColumn(0)[0], closeTo(0.9705023956298828, precisionErrorTolerance));
+
+    await tester.pump(const Duration(milliseconds: 100));
+    transform = tester.widget<Transform>(transformFinder).transform;
+    expect(transform.getColumn(0)[0], 1.0);
+  });
+
   group('Material 2', () {
     // Original Material 2 tests. Remove this group after `useMaterial3` has been deprecated.
     testWidgets('Renders at the correct default width - [labelType]=none (default)', (WidgetTester tester) async {

packages/flutter/test/material/navigation_rail_theme_test.dart

@@ -40,6 +40,10 @@ void main() {
     expect(_destinationsAlign(tester).alignment, Alignment.topCenter);
     expect(_labelType(tester), NavigationRailLabelType.none);
     expect(find.byType(NavigationIndicator), findsWidgets);
+    expect(_indicatorDecoration(tester)?.color, ThemeData().colorScheme.secondaryContainer);
+    expect(_indicatorDecoration(tester)?.shape, const StadiumBorder());
+    final InkResponse inkResponse = tester.allWidgets.firstWhere((Widget object) => object.runtimeType.toString() == '_IndicatorInkWell') as InkResponse;
+    expect(inkResponse.customBorder, const StadiumBorder());
   });
 
   testWidgets('Default values are used when no NavigationRail or NavigationRailThemeData properties are specified (Material 2)', (WidgetTester tester) async {
@@ -87,6 +91,7 @@ void main() {
     const NavigationRailLabelType labelType = NavigationRailLabelType.all;
     const bool useIndicator = true;
     const Color indicatorColor = Color(0x00000004);
+    const ShapeBorder indicatorShape = RoundedRectangleBorder();
 
     await tester.pumpWidget(
       MaterialApp(
@@ -111,6 +116,7 @@ void main() {
               labelType: labelType,
               useIndicator: useIndicator,
               indicatorColor: indicatorColor,
+              indicatorShape: indicatorShape,
             ),
             child: NavigationRail(
               selectedIndex: 0,
@@ -135,6 +141,7 @@ void main() {
     expect(_labelType(tester), labelType);
     expect(find.byType(NavigationIndicator), findsWidgets);
     expect(_indicatorDecoration(tester)?.color, indicatorColor);
+    expect(_indicatorDecoration(tester)?.shape, indicatorShape);
   });
 
   testWidgets('NavigationRail values take priority over NavigationRailThemeData values when both properties are specified', (WidgetTester tester) async {
@@ -245,6 +252,7 @@ void main() {
       labelType: NavigationRailLabelType.selected,
       useIndicator: true,
       indicatorColor: Color(0x00000096),
+      indicatorShape: CircleBorder(),
     ).debugFillProperties(builder);
 
     final List<String> description = builder.properties
@@ -267,6 +275,7 @@ void main() {
     expect(description[7], 'labelType: NavigationRailLabelType.selected');
     expect(description[8], 'useIndicator: true');
     expect(description[9], 'indicatorColor: Color(0x00000096)');
+    expect(description[10], 'indicatorShape: CircleBorder(BorderSide(width: 0.0, style: none))');
   });
 }