FlutterのContainerをボタンとして利用する方法

## 変更履歴
2021年9月22日「GestureDetector」の章を追加。

# Containerで書いていたものにタップ時の動作を追加する
これ、実は`Container`のwidgetだけでは解決しませんでした。
`InkWell`を利用します。

〜例（前回のソースを改変）〜

```home_panel.dart
        InkWell(
          onTap: () {
            showDialog(
                context: context,
                builder: (context) {
                  return AlertDialog(
                    title: Text('Aの動作の確認'),
                  );
                });
          },
          child: Container(
            padding: const EdgeInsets.all(20),
            color: Colors.grey[300],
            width: 150,
            height: 200,
            child: Center(
              child: const Text('A'),
            ),
          ),
        ),
```

〜〜動かした様子〜〜
<img width="350" height="500" alt="onTap.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277737/638f90d0-5f83-a331-25ba-1160aa14d080.gif">

`InkWell`は「タッチに反応するマテリアルの長方形の領域」であり、
様々なWidgeに、タッチ時の動作を付与することができるようです。（任意のWidgeをまるでボタンのように使うことができる！）

公式情報
[InkWell class][2]

参考情報
https://stackoverflow.com/questions/44317188/flutter-ontap-method-for-containers/44317228
[[Flutter] InkWellは意外に強い](https://qiita.com/Dreamwalker/items/c5739bdf2ba025374474)

# GestureDetector
似たような用途のWidgetに「GestureDetector」があります。適宜ユースケースに合うものを選ぶようにしてください。
（後から気付いて動作確認できなかったのですが、「Containerをボタンとして利用する」だけなら「GestureDetector」でも実装可能なはずです）

公式情報
[GestureDetector class][3]

違いについては、こちらのstack overflowの回答が参考になります。
[Flutter: InkWell vs GestureDetector: what is the difference?][4]

少しここにも書くと、以下のような違いがあるそうです。

- GestureDetectorの方が検出できるジャスチャー数が多い.
- InkWellは検出できるジェスチャーの数が限られているが、Widgetを装飾する方法が提供されている（splashColorなど）

# おまけ：ButtonのWidgetをContainerでデザインしたものに近づける場合
ButtonのWidget（例で示すのは`RaisedButton`）のデザインを変えて、`Container`で作ったデザインに近づける場合は、`ButtonTheme`を使うと良さそうです。

〜例〜

```home_panel.dart
        ButtonTheme(
          minWidth: 150,
          height: 200,
          padding: const EdgeInsets.all(20),
          child: RaisedButton(
            color: Colors.grey[300],
            child: const Text('B'),
            onPressed: () {
              showDialog(
                  context: context,
                  builder: (context) {
                    return AlertDialog(
                      title: Text('Bの動作の確認'),
                    );
                  });
            },
          ),
        ),
```

〜〜動かした様子〜〜

<img width="350" height="500" alt="Bの動作.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277737/c27b0f2a-501d-1412-1362-8cead6a6586a.gif">

公式情報
[ButtonTheme class](https://api.flutter.dev/flutter/material/ButtonTheme-class.html)

参考情報
https://stackoverflow.com/questions/50293503/how-to-set-the-width-of-a-raisedbutton-in-flutter

AとB、見た目も動作もほぼほぼ同じに見えますね。

〜〜違い〜〜
`RaisedButton`の方が少し浮き上がっていたり、
`onTap`と`onPressed`で挙動が少々異なったりはしています。
（gif画像だとわかりにくいかもしれません）
また`InkWell`の方では`onPressed`は用意されていないようです。
使い分けるなら、上記のような話でしょうか。

また`InkWell`でハイライト(`highlightColor`と`onHighlightChanged`)しようとしましたが、うまく行きませんでした。（用意はされています）ハイライトやるなら`RaisedButton`の方が簡単そうです。

以上です！

[1]:https://qiita.com/beeeyan/items/bf8644bc1e6a335a91bc
[2]:https://api.flutter.dev/flutter/material/InkWell-class.html
[3]:https://api.flutter.dev/flutter/widgets/GestureDetector-class.html
[4]:https://stackoverflow.com/questions/56725308/flutter-inkwell-vs-gesturedetector-what-is-the-difference