Fixes accessibility/tappability of the FAB in the FadeScaleTransition example

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.
 

packages/animations/example/lib/fade_scale_transition.dart

@@ -16,16 +16,20 @@ class _FadeScaleTransitionDemoState extends State<FadeScaleTransitionDemo>
     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<FadeScaleTransitionDemo>
     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<FadeScaleTransitionDemo>
             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<FadeScaleTransitionDemo>
                 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'),
                 ),