🔋 Enhance cupertino button fade in and fade out (#87139)

This commit is contained in:
Yazeed AlKhalaf 2021-08-04 20:30:05 +03:00 committed by GitHub
parent 725f48fecc
commit e7fd092f7f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 13 deletions

View file

@ -148,8 +148,8 @@ class CupertinoButton extends StatefulWidget {
class _CupertinoButtonState extends State<CupertinoButton> with SingleTickerProviderStateMixin {
// Eyeballed values. Feel free to tweak.
static const Duration kFadeOutDuration = Duration(milliseconds: 10);
static const Duration kFadeInDuration = Duration(milliseconds: 100);
static const Duration kFadeOutDuration = Duration(milliseconds: 120);
static const Duration kFadeInDuration = Duration(milliseconds: 180);
final Tween<double> _opacityTween = Tween<double>(begin: 1.0);
late AnimationController _animationController;
@ -213,8 +213,8 @@ class _CupertinoButtonState extends State<CupertinoButton> with SingleTickerProv
return;
final bool wasHeldDown = _buttonHeldDown;
final TickerFuture ticker = _buttonHeldDown
? _animationController.animateTo(1.0, duration: kFadeOutDuration)
: _animationController.animateTo(0.0, duration: kFadeInDuration);
? _animationController.animateTo(1.0, duration: kFadeOutDuration, curve: Curves.easeInOutCubicEmphasized)
: _animationController.animateTo(0.0, duration: kFadeInDuration, curve: Curves.easeOutCubic);
ticker.then<void>((void value) {
if (mounted && wasHeldDown != _buttonHeldDown)
_animate();

View file

@ -205,23 +205,27 @@ void main() {
await tester.pump();
FadeTransition transition = tester.firstWidget(find.byType(FadeTransition));
await tester.pump(const Duration(milliseconds: 25));
await tester.pump(const Duration(milliseconds: 50));
transition = tester.firstWidget(find.byType(FadeTransition));
expect(transition.opacity.value, moreOrLessEquals(0.4, epsilon: 0.001));
expect(transition.opacity.value, moreOrLessEquals(0.403, epsilon: 0.001));
await tester.pump(const Duration(milliseconds: 25));
await tester.pump(const Duration(milliseconds: 100));
transition = tester.firstWidget(find.byType(FadeTransition));
expect(transition.opacity.value, moreOrLessEquals(0.437, epsilon: 0.001));
expect(transition.opacity.value, moreOrLessEquals(0.400, epsilon: 0.001));
await tester.pump(const Duration(milliseconds: 25));
await tester.pump(const Duration(milliseconds: 50));
transition = tester.firstWidget(find.byType(FadeTransition));
expect(transition.opacity.value, moreOrLessEquals(0.55, epsilon: 0.001));
expect(transition.opacity.value, moreOrLessEquals(0.650, epsilon: 0.001));
await tester.pump(const Duration(milliseconds: 25));
await tester.pump(const Duration(milliseconds: 50));
transition = tester.firstWidget(find.byType(FadeTransition));
expect(transition.opacity.value, moreOrLessEquals(0.737, epsilon: 0.001));
expect(transition.opacity.value, moreOrLessEquals(0.894, epsilon: 0.001));
await tester.pump(const Duration(milliseconds: 25));
await tester.pump(const Duration(milliseconds: 50));
transition = tester.firstWidget(find.byType(FadeTransition));
expect(transition.opacity.value, moreOrLessEquals(0.988, epsilon: 0.001));
await tester.pump(const Duration(milliseconds: 50));
transition = tester.firstWidget(find.byType(FadeTransition));
expect(transition.opacity.value, moreOrLessEquals(1.0, epsilon: 0.001));
});