Add hover duration for Inkwell
widget (#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 #132170
This commit is contained in:
parent
cb72164a72
commit
b211891876
@ -332,6 +332,7 @@ class InkResponse extends StatelessWidget {
|
|||||||
this.onFocusChange,
|
this.onFocusChange,
|
||||||
this.autofocus = false,
|
this.autofocus = false,
|
||||||
this.statesController,
|
this.statesController,
|
||||||
|
this.hoverDuration,
|
||||||
});
|
});
|
||||||
|
|
||||||
/// The widget below this widget in the tree.
|
/// The widget below this widget in the tree.
|
||||||
@ -621,6 +622,11 @@ class InkResponse extends StatelessWidget {
|
|||||||
/// {@endtemplate}
|
/// {@endtemplate}
|
||||||
final MaterialStatesController? statesController;
|
final MaterialStatesController? statesController;
|
||||||
|
|
||||||
|
/// The duration of the animation that animates the hover effect.
|
||||||
|
///
|
||||||
|
/// The default is 50ms.
|
||||||
|
final Duration? hoverDuration;
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
final _ParentInkResponseState? parentState = _ParentInkResponseProvider.maybeOf(context);
|
final _ParentInkResponseState? parentState = _ParentInkResponseProvider.maybeOf(context);
|
||||||
@ -659,6 +665,7 @@ class InkResponse extends StatelessWidget {
|
|||||||
getRectCallback: getRectCallback,
|
getRectCallback: getRectCallback,
|
||||||
debugCheckContext: debugCheckContext,
|
debugCheckContext: debugCheckContext,
|
||||||
statesController: statesController,
|
statesController: statesController,
|
||||||
|
hoverDuration: hoverDuration,
|
||||||
child: child,
|
child: child,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -715,6 +722,7 @@ class _InkResponseStateWidget extends StatefulWidget {
|
|||||||
this.getRectCallback,
|
this.getRectCallback,
|
||||||
required this.debugCheckContext,
|
required this.debugCheckContext,
|
||||||
this.statesController,
|
this.statesController,
|
||||||
|
this.hoverDuration,
|
||||||
});
|
});
|
||||||
|
|
||||||
final Widget? child;
|
final Widget? child;
|
||||||
@ -752,6 +760,7 @@ class _InkResponseStateWidget extends StatefulWidget {
|
|||||||
final _GetRectCallback? getRectCallback;
|
final _GetRectCallback? getRectCallback;
|
||||||
final _CheckContext debugCheckContext;
|
final _CheckContext debugCheckContext;
|
||||||
final MaterialStatesController? statesController;
|
final MaterialStatesController? statesController;
|
||||||
|
final Duration? hoverDuration;
|
||||||
|
|
||||||
@override
|
@override
|
||||||
_InkResponseState createState() => _InkResponseState();
|
_InkResponseState createState() => _InkResponseState();
|
||||||
@ -920,7 +929,7 @@ class _InkResponseState extends State<_InkResponseStateWidget>
|
|||||||
return const Duration(milliseconds: 200);
|
return const Duration(milliseconds: 200);
|
||||||
case _HighlightType.hover:
|
case _HighlightType.hover:
|
||||||
case _HighlightType.focus:
|
case _HighlightType.focus:
|
||||||
return const Duration(milliseconds: 50);
|
return widget.hoverDuration ?? const Duration(milliseconds: 50);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1456,6 +1465,7 @@ class InkWell extends InkResponse {
|
|||||||
super.onFocusChange,
|
super.onFocusChange,
|
||||||
super.autofocus,
|
super.autofocus,
|
||||||
super.statesController,
|
super.statesController,
|
||||||
|
super.hoverDuration,
|
||||||
}) : super(
|
}) : super(
|
||||||
containedInkWell: true,
|
containedInkWell: true,
|
||||||
highlightShape: BoxShape.rectangle,
|
highlightShape: BoxShape.rectangle,
|
||||||
|
@ -2229,4 +2229,28 @@ testWidgetsWithLeakTracking('InkResponse radius can be updated', (WidgetTester t
|
|||||||
|
|
||||||
await gesture.up();
|
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();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user