diff --git a/packages/animations/CHANGELOG.md b/packages/animations/CHANGELOG.md index c29f1c3be6a3..4b48dd98cbed 100644 --- a/packages/animations/CHANGELOG.md +++ b/packages/animations/CHANGELOG.md @@ -1,5 +1,7 @@ ## [1.0.1-dev] - TBD +* Fix `FadeScaleTransition` example's `FloatingActionButton` being accessible +and tappable when it is supposed to be hidden. * Add custom fillColor property to `SharedAxisTransition` and `SharedAxisPageTransitionsBuilder`. * Fix prefer_const_constructors lint in test and example. diff --git a/packages/animations/example/lib/fade_scale_transition.dart b/packages/animations/example/lib/fade_scale_transition.dart index 97773e1a4cb4..b4d71458037d 100644 --- a/packages/animations/example/lib/fade_scale_transition.dart +++ b/packages/animations/example/lib/fade_scale_transition.dart @@ -16,16 +16,20 @@ class _FadeScaleTransitionDemoState extends State with SingleTickerProviderStateMixin { AnimationController _controller; - bool _showFab = true; - @override void initState() { _controller = AnimationController( - value: 1.0, + value: 0.0, duration: const Duration(milliseconds: 150), reverseDuration: const Duration(milliseconds: 75), vsync: this, - ); + )..addStatusListener((AnimationStatus status) { + setState(() { + // setState needs to be called to trigger a rebuild because + // the 'HIDE FAB'/'SHOW FAB' button needs to be updated based + // the latest value of [_controller.status]. + }); + }); super.initState(); } @@ -35,12 +39,23 @@ class _FadeScaleTransitionDemoState extends State super.dispose(); } + bool get _isAnimationRunningForwardsOrComplete { + switch (_controller.status) { + case AnimationStatus.forward: + case AnimationStatus.completed: + return true; + case AnimationStatus.reverse: + case AnimationStatus.dismissed: + return false; + } + assert(false); + return null; + } + @override Widget build(BuildContext context) { return Scaffold( - appBar: AppBar( - title: const Text('Fade'), - ), + appBar: AppBar(title: const Text('Fade')), floatingActionButton: AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { @@ -49,9 +64,12 @@ class _FadeScaleTransitionDemoState extends State child: child, ); }, - child: FloatingActionButton( - child: const Icon(Icons.add), - onPressed: () {}, + child: Visibility( + visible: _controller.status != AnimationStatus.dismissed, + child: FloatingActionButton( + child: const Icon(Icons.add), + onPressed: () {}, + ), ), ), bottomNavigationBar: Column( @@ -80,21 +98,15 @@ class _FadeScaleTransitionDemoState extends State const SizedBox(width: 10), RaisedButton( onPressed: () { - if (_showFab) { - setState(() { - _showFab = false; - }); + if (_isAnimationRunningForwardsOrComplete) { _controller.reverse(); } else { - setState(() { - _showFab = true; - }); _controller.forward(); } }, color: Theme.of(context).colorScheme.primary, textColor: Theme.of(context).colorScheme.onPrimary, - child: _showFab + child: _isAnimationRunningForwardsOrComplete ? const Text('HIDE FAB') : const Text('SHOW FAB'), ),