Skip to content

F
Front-End
Unverified Commit beaabb70 authored by Taha Tesser's avatar Taha Tesser Committed by GitHub
Browse files
Options

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

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

* remove unused variables
parent 215f6372
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 257 additions and 47 deletions
dev/tools/gen_defaults/lib/navigation_rail_template.dart
View file @ beaabb70
......@@ -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
View file @ beaabb70
......@@ -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
View file @ beaabb70
......@@ -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
View file @ beaabb70
......@@ -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))');
});
}
......
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

HIAST - GitLab