github/flutter
7
0
Fork 0
mirror of https://github.com/flutter/flutter.git synced 2025-06-03 00:51:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add more InkWell tests (#115634)

Browse Source 
Co-authored-by: Bruno Leroux <bruno.leroux@gmail.com>
This commit is contained in:
Bruno Leroux 2022-11-18 21:12:19 +01:00 committed by GitHub
parent 98077617bb
commit 2cb2e84a39
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 208 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/flutter/lib/src/material/ink_well.dart
View File

@ -438,13 +438,15 @@ class InkResponse extends StatelessWidget {
/// * [splashFactory], which defines the appearance of the splash. /// * [splashFactory], which defines the appearance of the splash.
final double? radius; final double? radius;
/// The clipping radius of the containing rect. This is effective only if /// The border radius of the containing rectangle. This is effective only if
/// [customBorder] is null. /// [highlightShape] is [BoxShape.rectangle].
/// ///
/// If this is null, it is interpreted as [BorderRadius.zero]. /// If this is null, it is interpreted as [BorderRadius.zero].
final BorderRadius? borderRadius; final BorderRadius? borderRadius;
/// The custom clip border which overrides [borderRadius]. /// The custom clip border.
///
/// If this is null, the ink response will not clip its content.
final ShapeBorder? customBorder; final ShapeBorder? customBorder;
/// The color of the ink response when the parent widget is focused. If this /// The color of the ink response when the parent widget is focused. If this

226
packages/flutter/test/material/ink_well_test.dart
View File

@ -348,13 +348,13 @@ void main() {
width: 100, width: 100,
height: 100, height: 100,
child: InkWell( child: InkWell(
hoverColor: const Color(0xff00ff00), hoverColor: const Color(0xff00ff00),
splashColor: splashColor, splashColor: splashColor,
focusColor: const Color(0xff0000ff), focusColor: const Color(0xff0000ff),
highlightColor: const Color(0xf00fffff), highlightColor: const Color(0xf00fffff),
onTap: () { }, onTap: () { },
onLongPress: () { }, onLongPress: () { },
onHover: (bool hover) { }, onHover: (bool hover) { },
), ),
), ),
), ),
@ -386,21 +386,21 @@ void main() {
width: 100, width: 100,
height: 100, height: 100,
child: InkWell( child: InkWell(
overlayColor: MaterialStateProperty.resolveWith<Color>((Set<MaterialState> states) { overlayColor: MaterialStateProperty.resolveWith<Color>((Set<MaterialState> states) {
if (states.contains(MaterialState.hovered)) { if (states.contains(MaterialState.hovered)) {
return const Color(0xff00ff00); return const Color(0xff00ff00);
} }
if (states.contains(MaterialState.focused)) { if (states.contains(MaterialState.focused)) {
return const Color(0xff0000ff); return const Color(0xff0000ff);
} }
if (states.contains(MaterialState.pressed)) { if (states.contains(MaterialState.pressed)) {
return splashColor; return splashColor;
} }
return const Color(0xffbadbad); // Shouldn't happen. return const Color(0xffbadbad); // Shouldn't happen.
}), }),
onTap: () { }, onTap: () { },
onLongPress: () { }, onLongPress: () { },
onHover: (bool hover) { }, onHover: (bool hover) { },
), ),
), ),
), ),
@ -445,7 +445,187 @@ void main() {
expect(inkFeatures, paints..circle(radius: 20, color: const Color(0xff0000ff))); expect(inkFeatures, paints..circle(radius: 20, color: const Color(0xff0000ff)));
}); });
testWidgets('InkResponse radius can be updated', (WidgetTester tester) async { testWidgets('InkWell uses borderRadius for focus highlight', (WidgetTester tester) async {
FocusManager.instance.highlightStrategy = FocusHighlightStrategy.alwaysTraditional;
final FocusNode focusNode = FocusNode(debugLabel: 'Ink Focus');
await tester.pumpWidget(
Material(
child: Directionality(
textDirection: TextDirection.ltr,
child: Center(
child: SizedBox(
width: 100,
height: 100,
child: InkWell(
focusNode: focusNode,
borderRadius: BorderRadius.circular(10),
focusColor: const Color(0xff0000ff),
onTap: () { },
),
),
),
),
),
);
await tester.pumpAndSettle();
final RenderObject inkFeatures = tester.allRenderObjects.firstWhere((RenderObject object) => object.runtimeType.toString() == '_RenderInkFeatures');
expect(inkFeatures, paintsExactlyCountTimes(#drawRRect, 0));
focusNode.requestFocus();
await tester.pumpAndSettle();
expect(inkFeatures, paintsExactlyCountTimes(#drawRRect, 1));
expect(inkFeatures, paints..rrect(
rrect: RRect.fromLTRBR(350.0, 250.0, 450.0, 350.0, const Radius.circular(10)),
color: const Color(0xff0000ff),
));
});
testWidgets('InkWell uses borderRadius for hover highlight', (WidgetTester tester) async {
await tester.pumpWidget(
Material(
child: Directionality(
textDirection: TextDirection.ltr,
child: Center(
child: SizedBox(
width: 100,
height: 100,
child: MouseRegion(
child: InkWell(
borderRadius: BorderRadius.circular(10),
hoverColor: const Color(0xff00ff00),
onTap: () { },
),
),
),
),
),
),
);
await tester.pumpAndSettle();
final RenderObject inkFeatures = tester.allRenderObjects.firstWhere((RenderObject object) => object.runtimeType.toString() == '_RenderInkFeatures');
expect(inkFeatures, paintsExactlyCountTimes(#drawRRect, 0));
// Hover the ink well.
final TestGesture gesture = await tester.createGesture(kind: PointerDeviceKind.mouse, pointer: 1);
await gesture.addPointer(location: tester.getRect(find.byType(InkWell)).center);
await tester.pumpAndSettle();
expect(inkFeatures, paintsExactlyCountTimes(#drawRRect, 1));
expect(inkFeatures, paints..rrect(
rrect: RRect.fromLTRBR(350.0, 250.0, 450.0, 350.0, const Radius.circular(10)),
color: const Color(0xff00ff00),
));
});
testWidgets('InkWell customBorder clips for focus highlight', (WidgetTester tester) async {
FocusManager.instance.highlightStrategy = FocusHighlightStrategy.alwaysTraditional;
final FocusNode focusNode = FocusNode(debugLabel: 'Ink Focus');
await tester.pumpWidget(
Material(
child: Directionality(
textDirection: TextDirection.ltr,
child: Align(
alignment: Alignment.topLeft,
child: SizedBox(
width: 100,
height: 100,
child: MouseRegion(
child: InkWell(
focusNode: focusNode,
borderRadius: BorderRadius.circular(10),
customBorder: const CircleBorder(),
hoverColor: const Color(0xff00ff00),
onTap: () { },
),
),
),
),
),
),
);
await tester.pumpAndSettle();
final RenderObject inkFeatures = tester.allRenderObjects.firstWhere((RenderObject object) => object.runtimeType.toString() == '_RenderInkFeatures');
expect(inkFeatures, paintsExactlyCountTimes(#clipPath, 0));
expect(inkFeatures, paintsExactlyCountTimes(#drawRRect, 0));
focusNode.requestFocus();
await tester.pumpAndSettle();
expect(inkFeatures, paintsExactlyCountTimes(#clipPath, 1));
expect(inkFeatures, paintsExactlyCountTimes(#drawRRect, 1));
// Create a rounded rectangle path with a radius that makes it similar to the custom border circle.
const Rect expectedClipRect = Rect.fromLTRB(0, 0, 100, 100);
final Path expectedClipPath = Path()
..addRRect(RRect.fromRectAndRadius(
expectedClipRect,
const Radius.circular(50.0),
));
// The ink well custom border path should match the rounded rectangle path.
expect(
inkFeatures,
paints..clipPath(pathMatcher: coversSameAreaAs(
expectedClipPath,
areaToCompare: expectedClipRect.inflate(20.0),
sampleSize: 100,
)),
);
});
testWidgets('InkWell customBorder clips for hover highlight', (WidgetTester tester) async {
await tester.pumpWidget(
Material(
child: Directionality(
textDirection: TextDirection.ltr,
child: Align(
alignment: Alignment.topLeft,
child: SizedBox(
width: 100,
height: 100,
child: MouseRegion(
child: InkWell(
borderRadius: BorderRadius.circular(10),
customBorder: const CircleBorder(),
hoverColor: const Color(0xff00ff00),
onTap: () { },
),
),
),
),
),
),
);
await tester.pumpAndSettle();
final RenderObject inkFeatures = tester.allRenderObjects.firstWhere((RenderObject object) => object.runtimeType.toString() == '_RenderInkFeatures');
expect(inkFeatures, paintsExactlyCountTimes(#clipPath, 0));
expect(inkFeatures, paintsExactlyCountTimes(#drawRRect, 0));
// Hover the ink well.
final TestGesture gesture = await tester.createGesture(kind: PointerDeviceKind.mouse, pointer: 1);
await gesture.addPointer(location: tester.getRect(find.byType(InkWell)).center);
await tester.pumpAndSettle();
expect(inkFeatures, paintsExactlyCountTimes(#clipPath, 1));
expect(inkFeatures, paintsExactlyCountTimes(#drawRRect, 1));
// Create a rounded rectangle path with a radius that makes it similar to the custom border circle.
const Rect expectedClipRect = Rect.fromLTRB(0, 0, 100, 100);
final Path expectedClipPath = Path()
..addRRect(RRect.fromRectAndRadius(
expectedClipRect,
const Radius.circular(50.0),
));
// The ink well custom border path should match the rounded rectangle path.
expect(
inkFeatures,
paints..clipPath(pathMatcher: coversSameAreaAs(
expectedClipPath,
areaToCompare: expectedClipRect.inflate(20.0),
sampleSize: 100,
)),
);
});
testWidgets('InkResponse radius can be updated', (WidgetTester tester) async {
FocusManager.instance.highlightStrategy = FocusHighlightStrategy.alwaysTraditional; FocusManager.instance.highlightStrategy = FocusHighlightStrategy.alwaysTraditional;
final FocusNode focusNode = FocusNode(debugLabel: 'Ink Focus'); final FocusNode focusNode = FocusNode(debugLabel: 'Ink Focus');
Widget boilerplate(double radius) { Widget boilerplate(double radius) {