code smith

開発で日々の生活をもっと楽しく

flutterで表示したキーボードを、どこか別のところをtapすれば必ず閉じさせる実装

f:id:gaku3601:20220130121637j:plain

Gakuです。
flutterで実装してて、有用な小ネタ見つけたので備忘録がてら掲載しておきます。

キーボードの自動開閉について

flutterでキーボード入力を表示したら、他のところをTapしたら自動で閉じたくないですか?
僕は閉じたいです!
なので、巷でよくある以下のような実装を行いました。

return GestureDetector(
      onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
      child: Scaffold(
        appBar: AppBar(
          title: Text('Login'),
        ),
        body: Body(),
      ),
    );

stackoverflow.com

f:id:gaku3601:20220130121510g:plain:w200

こんな感じで、Button以外の部分をTapすれば良い感じでキーボードを閉じてくれるのですが、ButtonとかをTapしてもキーボードを閉じてくれません。
なので、Listener Widgetを利用して以下のように実装します。

         Listener(
          onPointerUp: (_) {
            FocusManager.instance.primaryFocus?.unfocus();
          },
          child: MaterialApp.router(
            title: 'muscle',
            routeInformationParser: appRouter.defaultRouteParser(),
            routerDelegate: appRouter.delegate(),
          ),
        );

router使っているので、ちょっと違うかもですがMaterialAppをListenerWidgetで囲ってあげて、そこでTapした際、フォーカスアウトするように実装してあげます。
するとこんな感じになります。
f:id:gaku3601:20220130123609g:plain:w200

入力部以外のところをTapすると必ずキーボードを閉じるようになります。
小ネタでした。