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

はじめに

こんな感じです。

Flutter TextField以外の部分をtapでunfocusにする方法が、あまりにも散乱しすぎて苦労しました。。。
地味に時間かかったけどできました pic.twitter.com/l3tRMnvxGD

— げんと、アプリ&web開発 (@gento34165638) May 14, 2022

focusを外す方法、色々ありすぎて混乱・・・

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

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

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

GestureDetectorにbehaviorプロパティが必要だった！！

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

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

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

@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がなかったのか・・・
showModalBottomSheetを使用しているのが関係したりするのかな？？？