riverpod+TextFieldで入力エリアを実装すると編集時にカーソルが左端に移動してしまう

Question

前提

Flutter初心者です。
riverpodのstateを編集する入力エリアを作成しようとしています。

発生している問題

TextFieldを使った入力エリアだと、編集時にカーソルが左端に移動してしまいます。
TextFormFieldのinitialValueを使えば期待通りの動作をしますが、Formの入力エリアにするつもりはなく、Enter時の動作(onSubmited)が必要なのでTextFieldを利用したいです。

質問

riverpodを使う場合、どのように入力エリアを実装するものなのでしょうか？
なぜこのような挙動をするのでしょうか？

該当のソースコード

final _textProvider = StateProvider((ref) => "Hello");

class MyApp extends ConsumerWidget {
  @override
  Widget build(context, ref) {
    final text = ref.watch(_textProvider);

    return MaterialApp(
      home: Scaffold(
        body: Column(children: [
          TextField(
            onChanged: (newText) {
              ref.read(_textProvider.notifier).update((state) => newText);
            },
            controller: TextEditingController(text: text),
          ),
          Text(text),
        ]),
      ),
    );
  }
}

試したこと

• riverpod, texteditingcontroller, cursor などのワードでいくつか検索しました。
• rebuild時にTextEditingControllerの持っているカーソル位置などの情報がリセットされているのかと思い、TextEditingControllerをグローバルに宣言して、buildメソッドで_controller.text = textで代入してみましたが、やはり期待通りにはなりませんでした。

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

Windowsデバイスで実行しています。

Answer 1

テキストフィールドのカーソル位置情報などをTextEditingController内に含まれますが、提示されたコードの場合、テキストの変更があると、そのインスタンスが毎回再作成されるのでカーソルが先頭に行く結果になります。
これはcontroller: TextEditingController(text: text)としているからです。

TextEditingControllerを使う場合、初期化処理やdipose処理などちょっとした作法があるのでStatefulWidget内で使うのが面倒がなくていいです。
flutter_riverpodであればConsumerStatefulWidgetか。

ざっと実装してみたのが以下の様なもの。

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

void main() => runApp(const ProviderScope(child: MyApp()));

final _textProvider = StateProvider((ref) => "Hello");

class MyApp extends ConsumerWidget {
  const MyApp({super.key});

  @override
  Widget build(context, ref) {
    final text = ref.watch(_textProvider);

    return MaterialApp(
      home: Scaffold(
        body: Column(children: [
          const TextLine(),
          Text(text),
        ]),
      ),
    );
  }
}

class TextLine extends ConsumerStatefulWidget {
  const TextLine({super.key});

  @override
  ConsumerState<TextLine> createState() => _MyApp1State();
}

class _MyApp1State extends ConsumerState<TextLine> {
  late TextEditingController _text;
  @override
  void initState() {
    _text = TextEditingController(text: ref.read(_textProvider));
    super.initState();
  }

  @override
  void dispose() {
    _text.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return TextField(
      onChanged: (newText) {
        ref.read(_textProvider.notifier).update((state) => newText);
      },
      controller: _text,
    );
  }
}

なおglobalにして_controller.text = textすると、選択範囲などの初期化が走るのでカーソルが先頭に行ってしまうのだと思います。
_control.value = _control.value.copyWith(text: text);とするとうまくいくとは思います。
けどglobalで管理するのはお勧めはしません。

Comments

[Aqt]

ありがとうございます！助かりました！

TextEditingControllerはTextFieldに渡すだけで中の.textは“自動で更新される”というのが分かってませんでした。根本的に理解不足でしたね。

また、.textに代入するだけでも初期化されてしまうんですね。勉強になりました。

もちろんglobalでは使いません！