이 기사는 전부 나 Advent Calendar 2018의 9 일째 기사입니다.
매번 매번 다시 조사하고 있다고 생각하기 때문에 썼습니다.

하고 싶은 일

왼쪽과 같은 버튼을 눌러 일어나는 이벤트를 오른쪽과 같이 화면의 아무 곳이나 탭해도 할 수 있도록 합니다.

소스 코드

버튼으로 이벤트 발화하는 소스 코드

fade_in_with_button.dart

import 'package:flutter/material.dart';

class FadeInPage extends StatefulWidget {
  @override
  _FadeInPageState createState() => _FadeInPageState();
}

// The State class is responsible for two things: holding some data we can
// update and building the UI using that data.
class _FadeInPageState extends State<FadeInPage> {
  bool _visible = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:Text("Fade in / Fade out by toggle button"),
      ),
      body: Center(
        child: AnimatedOpacity(
          // If the Widget should be visible, animate to 1.0 (fully visible). If
          // the Widget should be hidden, animate to 0.0 (invisible).
          opacity: _visible ? 1.0 : 0.0,
          duration: Duration(milliseconds: 500),
          // The green box needs to be the child of the AnimatedOpacity
          child: Container(
            width: 200.0,
            height: 200.0,
            color: Colors.green,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Make sure we call setState! This will tell Flutter to rebuild the
          // UI with our changes!
          setState(() {
            _visible = !_visible;
          });
        },
        tooltip: 'Toggle Opacity',
        child: Icon(Icons.flip),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

floatingActionButton 내에 onPressed 이벤트를 정의하여 이벤트를 실행할 수 있습니다.
여기에서는 _visible의 토글을 실시하고 있습니다.

화면 전체의 아무 곳이나 눌러도 이벤트 발화하는 샘플 코드

fade_in_whole_screen.dart

import 'package:flutter/material.dart';

class FadeInPage extends StatefulWidget {
  @override
  _FadeInPageState createState() => _FadeInPageState();
}

// The State class is responsible for two things: holding some data we can
// update and building the UI using that data.
class _FadeInPageState extends State<FadeInPage> {
  // Whether the green box should be visible or invisible
  bool _visible = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Fade in / Fade out by whole screen"),
        ),
        body: GestureDetector(
            behavior: HitTestBehavior.opaque,
            child: Center(
              child: AnimatedOpacity(
                // If the Widget should be visible, animate to 1.0 (fully visible). If
                // the Widget should be hidden, animate to 0.0 (invisible).
                opacity: _visible ? 1.0 : 0.0,
                duration: Duration(milliseconds: 500),
                // The green box needs to be the child of the AnimatedOpacity
                child: Container(
                  width: 200.0,
                  height: 200.0,
                  color: Colors.green,
                ),
              ),
            ),
            onTap: () {
              setState(() {
                _visible = !_visible;
              });
            }));
  }
}

body 부분 전체를 GestureDetector로 둘러싸고, 이전의 소스 코드내의 onPressed에 정의되고 있던 내용을 onTap에 기재합니다.
간이 되는 것이 behavior: HitTestBehavior.opaque 라는 부분입니다.
이 항목을 지정하지 않으면 GestureDetector의 기본 behavior가 사용되지만 기본적으로 behavior: HitTestBehavior.deferToChild입니다.
이 디폴트 거동은, 아이 요소가 탭 되었을 때에 이벤트를 발화시키는 것이므로, 디폴트에서는 화면 전체를 탭해도 이벤트 발화는 하지 않습니다. (화면의 녹색 사각형 부분을 탭하면 이벤트 발화합니다.)

전체 소스 코드는 여기에 있습니다.

참고문헌

Google 공식 쿡북의 애니메이션 샘플