Flutter TextField以外の部分をタップでフォーカスを外す方法

# はじめに
こんな感じです。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Flutter TextField以外の部分をtapでunfocusにする方法が、あまりにも散乱しすぎて苦労しました。。。<br>地味に時間かかったけどできました <a href="https://t.co/l3tRMnvxGD">pic.twitter.com/l3tRMnvxGD</a></p>&mdash; げんと、アプリ&amp;web開発 (@gento34165638) <a href="https://twitter.com/gento34165638/status/1525336392280076288?ref_src=twsrc%5Etfw">May 14, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# focusを外す方法、色々ありすぎて混乱・・・
`TextField`のfocusを扱う方法が、まーたくさん情報がありまして意外に苦労しました。。。
今回は「何かしらのボタンを押したらfocusを外す」ではなく、**`TextField`以外の部分をtapでfocusを外す**ような動作を実現したくて調べまくりました！

あくまで私の場合は、ですが、👇の方法では`TextField`以外の部分をtapでfocusを外す動きを実現できませんでした:sweat:

https://www.kamo-it.org/blog/textfield-focus/

https://www.choge-blog.com/programming/fluttertextformfield-unfocus/

https://incrementleaf.net/articles/flutter-unfocus-textfield/

👇これが一番おしかったです！w

https://www.codegrepper.com/code-examples/whatever/flutter+remove+focus+from+textfield+when+click+outside


# GestureDetectorにbehaviorプロパティが必要だった！！
`GestureDetector`をタップしたらフォーカスを外したいWidgetの親Widgetにするところまでは、大体調べていくとわかるのですが、、、それだけでは実現したい動作を実装できませんでした。。。

そもそも`onTap`が検知されていなかったのですが、どうやら原因は`GestureDetector`の`behavior`プロパティにあったようです:sunglasses:

>opaque	Padding領域も含めてタッチに反応するようにする
https://qiita.com/kurun_pan/items/4d345075064a478a6b28

```dart
@override
  Widget build(BuildContext context) {
    SizeConfig().init(context);
    return GestureDetector(
      onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
      behavior: HitTestBehavior.opaque, // これを追加！！！
      child: Container(
          height: SizeConfig.blockSizeVertical! * 80,
          child: Column(
            children: <Widget>[
              Container(
                margin: const EdgeInsets.symmetric(vertical: 10),
                alignment: Alignment.center,
                width: 50,
                height: 5,
                decoration: BoxDecoration(
                  color: grayColor,
                  borderRadius: BorderRadius.circular(10),
                ),
              ),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 20),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Text(
                      'コメント',
                      style: Theme.of(context).textTheme.headline6,
                    ),
                    IconButton(
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                        icon: Icon(
                          Icons.close,
                        )),
                  ],
                ),
              ),
              const Divider(
                height: 20,
                thickness: 1,
              ),
              // コメント入力欄
              Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 20),
                  child: Row(
                    children: <Widget>[
                      Expanded(
                        child: Padding(
                          padding: const EdgeInsets.all(3.0),
                          child: TextField(
                            controller: _commentController,
                            decoration: InputDecoration(labelText: 'コメントを追加'),
                            textInputAction: TextInputAction.newline,
                            keyboardType: TextInputType.multiline,
                            maxLines: null,
                            style: TextStyle(
                              color: regularTextColor,
                            ),
                            onChanged: (value) {
                              setState(() {
                                _enteredComment = value;
                              });
                            },
                          ),
                        ),
                      ),
                      IconButton(
                          onPressed: _enteredComment.trim().isEmpty
                              ? null
                              : () {
                                  print('submit');
                                },
                          icon: Icon(Icons.send))
                    ],
                  ))
            ],
          )),
    );
  }
```

これで無事実現できました！

なぜ多くの情報には`GestureDetector`に`behavior`がなかったのか・・・:rolling_eyes:
`showModalBottomSheet`を使用しているのが関係したりするのかな？？？