【Flutter】TextFieldの範囲外を押すとキーボードが消える処理を実装したいのですがやり方がわかりません。

実現したいこと

TextFieldの範囲外を押すとキーボードが消える処理を実装したいのですがやり方がわかりません。
こちらのサイトを参考にしてFlutter TextField以外の部分をタップでフォーカスを外す方法、TextFieldをGestureDetectorでラップして、

Dart
1onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
2behavior: HitTestBehavior.opaque,

をプロパティに追加すればタイトルにある通りの処理を実装できるらしいのですが、私はできませんでした。
どうすれば実装できるのでしょうか。。。

該当のソースコード

Dart
1return Scaffold(
2      resizeToAvoidBottomInset: false,
3      backgroundColor: const Color.fromARGB(255, 250, 250, 248),
4      appBar: PreferredSize(
5        preferredSize: const Size.fromHeight(70),
6        child: AppBar(
7          title: SizedBox(
8            height: 60,
9            child: Container(
10              decoration: BoxDecoration(
11                border: Border.all(
12                    width: 200),
13              ),
14              child: GestureDetector(
15                onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
16                behavior: HitTestBehavior.opaque, // これを追加！！！
17                child: Center(
18                  child: Container(
19                    child: TextField(
20                      textAlignVertical: TextAlignVertical.center,
21                      controller: _controller,
22                      decoration: InputDecoration(
23                        prefixIcon: Icon(
24                          Icons.search,
25                        ),
26                        suffixIcon: Container(
27                          child: IconButton(
28                            icon: Icon(Icons.clear),
29                            iconSize: deviceWight * 0.11,
30                          ),
31                        ),
32                        enabledBorder: InputBorder.none,
33                        focusedBorder: InputBorder.none,
34                        isDense: true,
35                      ),
36                      onSubmitted: (text) => _submission(text),
37                    ),
38                  ),
39                ),
40              ),
41            ),
42          ),
43        ),
44      ),
45      body: Center(
46        child: Container(
47          width: deviceWight,
48          height: deviceHeight,
49        ),
50      ),
51    );
52  }

scaffoldでラップしたりもしましたが変わりませんでした。

補足情報（FW/ツールのバージョンなど）

[✓] Flutter (Channel stable, 3.7.7, on macOS 13.1 22C65 darwin-arm64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.3)
[✓] VS Code (version 1.73.0)
[✓] Connected device (3 available)
[✓] HTTP Host Availability

行動規範の内容に同意します

回答1件

自己解決

scaffold自体をこれでラップしてあげればうまくいきました。お騒がせしました。

Dart
1Focus(
2      focusNode: focusNode,
3      child: GestureDetector(
4        onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
5        behavior: HitTestBehavior.opaque, 
6        child: Scaffold(