How can I reverse an AnimationController by clicking on the screen?

Question

I am doing something similar to this guide: bottom app bar with fab

I want the animation to close on clicking anywhere other than the FloatingActionButton.

The only solution I could think of is wrapping the Scaffold body with a GestureDetector and reversing the animation on click. The problem is, the screen is a CustomScrollView with buttons inside it, so this solution won't work (because scrolling or clicking on those buttons won't reverse the animation).

Any suggestions?

Answer 1

Wrapping the scaffold body in a GestureDetector will work fine. Just set its hit-test behavior to HitTestBehavior.opaque and wrap its child in an IgnorePointer to make doubly sure the scroll view and buttons don't override the tap behavior.

Scaffold(
  ...
  body: GestureDetector(
    behavior: HitTestBehavior.opaque,
    onTap: () => print('tapped'),
    child: IgnorePointer(
      ignoring: true,
      child: ...
    ),
  ),
  ...
)