Skip to content

Commit

Permalink
Add hover duration for Inkwell widget (#132176)
Browse files Browse the repository at this point in the history
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 #132170
  • Loading branch information
whiskeyPeak authored Aug 24, 2023
1 parent cb72164 commit b211891
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 1 deletion.
12 changes: 11 additions & 1 deletion packages/flutter/lib/src/material/ink_well.dart
Original file line number Diff line number Diff line change
Expand Up @@ -332,6 +332,7 @@ class InkResponse extends StatelessWidget {
this.onFocusChange,
this.autofocus = false,
this.statesController,
this.hoverDuration,
});

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

/// The duration of the animation that animates the hover effect.
///
/// The default is 50ms.
final Duration? hoverDuration;

@override
Widget build(BuildContext context) {
final _ParentInkResponseState? parentState = _ParentInkResponseProvider.maybeOf(context);
Expand Down Expand Up @@ -659,6 +665,7 @@ class InkResponse extends StatelessWidget {
getRectCallback: getRectCallback,
debugCheckContext: debugCheckContext,
statesController: statesController,
hoverDuration: hoverDuration,
child: child,
);
}
Expand Down Expand Up @@ -715,6 +722,7 @@ class _InkResponseStateWidget extends StatefulWidget {
this.getRectCallback,
required this.debugCheckContext,
this.statesController,
this.hoverDuration,
});

final Widget? child;
Expand Down Expand Up @@ -752,6 +760,7 @@ class _InkResponseStateWidget extends StatefulWidget {
final _GetRectCallback? getRectCallback;
final _CheckContext debugCheckContext;
final MaterialStatesController? statesController;
final Duration? hoverDuration;

@override
_InkResponseState createState() => _InkResponseState();
Expand Down Expand Up @@ -920,7 +929,7 @@ class _InkResponseState extends State<_InkResponseStateWidget>
return const Duration(milliseconds: 200);
case _HighlightType.hover:
case _HighlightType.focus:
return const Duration(milliseconds: 50);
return widget.hoverDuration ?? const Duration(milliseconds: 50);
}
}

Expand Down Expand Up @@ -1456,6 +1465,7 @@ class InkWell extends InkResponse {
super.onFocusChange,
super.autofocus,
super.statesController,
super.hoverDuration,
}) : super(
containedInkWell: true,
highlightShape: BoxShape.rectangle,
Expand Down
24 changes: 24 additions & 0 deletions packages/flutter/test/material/ink_well_test.dart
Original file line number Diff line number Diff line change
Expand Up @@ -2229,4 +2229,28 @@ testWidgetsWithLeakTracking('InkResponse radius can be updated', (WidgetTester t

await gesture.up();
});

testWidgetsWithLeakTracking('try out hoverDuration property', (WidgetTester tester) async {
final List<String> log = <String>[];

await tester.pumpWidget(Directionality(
textDirection: TextDirection.ltr,
child: Material(
child: Center(
child: InkWell(
hoverDuration: const Duration(milliseconds: 1000),
onTap: () {
log.add('tap');
},
),
),
),
));

await tester.tap(find.byType(InkWell), pointer: 1);
await tester.pump(const Duration(seconds: 1));

expect(log, equals(<String>['tap']));
log.clear();
});
}

0 comments on commit b211891

Please sign in to comment.