🤠

Flutterでキーボードのフォーカスを操作する

2 min read

Flutterのテキスト入力Widget

Flutterでテキスト入力のUIを使う場合、TextFieldなど使うかと思います。
(TextFieldはAndroidで言うEditText)

TextField以外をタップしたらfocus外れますが、他のアクションをトリガーに再度focusが当たってしまい、結果キーボードが表示されたりと迷惑千万。

flutter issue より
(上記はhttps://github.com/flutter/flutter/issues/54277より拝借)

解決策

基本これでOK

FocusScope.of(context).unfocus()

https://stackoverflow.com/questions/65264033/hide-keyboard-when-click-on-device-back-button-in-flutter

  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text('hoge'),
      ),
      backgroundColor: COLOR_BACKGROUND,
      body: GestureDetector(
        onTap: () => FocusScope.of(context).unfocus(),
        child: TextField(),
      ),
    );
  }

しかしAndroidではまだ問題が・・・

AndroidだとBackボタンがありまして、これでキーボードが閉じるんですよね。
じゃあ、WillPopScopeでイベントハンドリングすれば楽勝やん?とか思ってたけど
何故か動きません。

onWillPop反応なし!😡


  Widget build(BuildContext context) {

    return WillPopScope(
        onWillPop: () async {
          FocusScope.of(context).unfocus();
          return false;
        },
        child: Scaffold(
          appBar: AppBar(
            title: Text('hoge'),
          ),
          body: GestureDetector(
            onTap: () => FocusScope.of(context).unfocus(),
            child: TextField(),
          ),
        )
    );
  }


外部packageにて解決!

flutter_keyboard_visibilityで解決できました。

https://pub.dev/packages/flutter_keyboard_visibility
flutter pub add flutter_keyboard_visibility

  void initState() {
    super.initState();
    var keyboard = KeyboardVisibilityController();
    keyboard.onChange.listen((visible) {
      if (!visible) {
        FocusScope.of(context).unfocus();
      }
    });
  }

キーボードが閉じた時のイベントにunfocusを差し込んで対応しています。

参考資料など

https://stackoverflow.com/questions/61246369/detect-tapping-the-android-back-button-to-close-the-keyboard-in-flutter
https://stackoverflow.com/questions/65264033/hide-keyboard-when-click-on-device-back-button-in-flutter

Discussion

ログインするとコメントできます