🤠

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

2021/10/12に公開

Android

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()

@override
  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反応なし！😡

@override
  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で解決できました。

flutter pub add flutter_keyboard_visibility

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

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