【Flutter】TextFieldのキーボード管理で苦戦した話

きっかけ

参画させていただいているプロジェクトで、
「前の画面に戻ったときにキーボードが出ている状態にしたい」
とのことで、思いの外悩んだので備忘録も兼ねて。
(TextFieldも、CupertinoTextFieldも解決済み)

あまりいい記事がかけなかったので結論

インスタンスの生成タイミングの見直しをすべき

悩んだ理由

1. 入力後すぐ初期化されてしまう

2. 初期値を設定時も入力後すぐ初期化されてしまう

3. キーボードが閉じなくなった

4. キーボードが開かなくなった

結論：何が悪いのか

インスタンスを生成する場所が悪かった

ただこれに尽きる。
基本的なサイトでは全て画面を描画するところで説明している為、インスタンスの生成タイミングについては触れられていないので苦戦してしまったということ。
じゃあどうすればいいのかというと親クラスでインスタンスを生成すればいい。

class _MyHomePageState extends State<MyHomePage> {
  // 基本的に全てここでインスタンスを生成すれば良い。
  var focusNode = FocusNode();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          TextField(
            focusNode: focusNode,
          ),
          ElevatedButton(
            onPressed: () {
              FocusScope.of(context).unfocus();
            },
            child: Text('down Keyboard'),
          ),
        ],
      ),
    );
  }
}

例えば、appBarを別の独自クラスで作っている場合も

class AppBarCustom extends StatefulWidget  {
  AppBarCustom(this.title);

  final FocusNode focusNode;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          focusNode: focusNode,
        ),
        ElevatedButton(
          onPressed: () {
            FocusScope.of(context).unfocus();
          },
          child: Text('down Keyboard'),
        ),
      ],
    ),
  }
}

class _MyHomePageState extends State<MyHomePage> {
  // 基本的に全てここでインスタンスを生成すれば良い。
  var focusNode = FocusNode();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // ここでインスタンスを別クラスに送っている
      body: AppBarCustom(focusNode: focusNode),
    );
  }
}

これと同じようにTextEditingControllerも実装できる(が、今日はここまで。)