Skip to content

Commit b211891

Browse files
authored
Add hover duration for Inkwell widget (flutter#132176)
Adds a `hoverDuration` property to the `Inkwell` widget. This allows the user to customise how long the change in colour animates between the default colour and the hovered colour. https://github.com/flutter/flutter/assets/73116038/2e7c5ccb-8651-4e08-8c7b-225cc005d594 Fixes flutter#132170
1 parent cb72164 commit b211891

File tree

2 files changed

+35
-1
lines changed

2 files changed

+35
-1
lines changed

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

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -332,6 +332,7 @@ class InkResponse extends StatelessWidget {
332332
this.onFocusChange,
333333
this.autofocus = false,
334334
this.statesController,
335+
this.hoverDuration,
335336
});
336337

337338
/// The widget below this widget in the tree.
@@ -621,6 +622,11 @@ class InkResponse extends StatelessWidget {
621622
/// {@endtemplate}
622623
final MaterialStatesController? statesController;
623624

625+
/// The duration of the animation that animates the hover effect.
626+
///
627+
/// The default is 50ms.
628+
final Duration? hoverDuration;
629+
624630
@override
625631
Widget build(BuildContext context) {
626632
final _ParentInkResponseState? parentState = _ParentInkResponseProvider.maybeOf(context);
@@ -659,6 +665,7 @@ class InkResponse extends StatelessWidget {
659665
getRectCallback: getRectCallback,
660666
debugCheckContext: debugCheckContext,
661667
statesController: statesController,
668+
hoverDuration: hoverDuration,
662669
child: child,
663670
);
664671
}
@@ -715,6 +722,7 @@ class _InkResponseStateWidget extends StatefulWidget {
715722
this.getRectCallback,
716723
required this.debugCheckContext,
717724
this.statesController,
725+
this.hoverDuration,
718726
});
719727

720728
final Widget? child;
@@ -752,6 +760,7 @@ class _InkResponseStateWidget extends StatefulWidget {
752760
final _GetRectCallback? getRectCallback;
753761
final _CheckContext debugCheckContext;
754762
final MaterialStatesController? statesController;
763+
final Duration? hoverDuration;
755764

756765
@override
757766
_InkResponseState createState() => _InkResponseState();
@@ -920,7 +929,7 @@ class _InkResponseState extends State<_InkResponseStateWidget>
920929
return const Duration(milliseconds: 200);
921930
case _HighlightType.hover:
922931
case _HighlightType.focus:
923-
return const Duration(milliseconds: 50);
932+
return widget.hoverDuration ?? const Duration(milliseconds: 50);
924933
}
925934
}
926935

@@ -1456,6 +1465,7 @@ class InkWell extends InkResponse {
14561465
super.onFocusChange,
14571466
super.autofocus,
14581467
super.statesController,
1468+
super.hoverDuration,
14591469
}) : super(
14601470
containedInkWell: true,
14611471
highlightShape: BoxShape.rectangle,

packages/flutter/test/material/ink_well_test.dart

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2229,4 +2229,28 @@ testWidgetsWithLeakTracking('InkResponse radius can be updated', (WidgetTester t
22292229

22302230
await gesture.up();
22312231
});
2232+
2233+
testWidgetsWithLeakTracking('try out hoverDuration property', (WidgetTester tester) async {
2234+
final List<String> log = <String>[];
2235+
2236+
await tester.pumpWidget(Directionality(
2237+
textDirection: TextDirection.ltr,
2238+
child: Material(
2239+
child: Center(
2240+
child: InkWell(
2241+
hoverDuration: const Duration(milliseconds: 1000),
2242+
onTap: () {
2243+
log.add('tap');
2244+
},
2245+
),
2246+
),
2247+
),
2248+
));
2249+
2250+
await tester.tap(find.byType(InkWell), pointer: 1);
2251+
await tester.pump(const Duration(seconds: 1));
2252+
2253+
expect(log, equals(<String>['tap']));
2254+
log.clear();
2255+
});
22322256
}

0 commit comments

Comments
 (0)