Flutter: TextEditingControllerの処理で無限ループが発生する

Question

TextEditingControllerの使い方を学ぶため、Flutterの公式サイトからコードをコピペしAndroid studioで実行したところ、TextFormFieldをタップした瞬間に無限ループが発生しました。

/// Flutter code sample for TextEditingController

// This example creates a [TextField] with a [TextEditingController] whose
// change listener forces the entered text to be lower case and keeps the
// cursor at the end of the input.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

/// This is the private State class that goes with MyStatefulWidget.
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  final TextEditingController _controller = TextEditingController();

  // 中身が更新されると呼ばれる関数。ここで無限ループしてる？
  @override
  void initState() {
    super.initState();
    _controller.addListener(() {
      final String text = _controller.text.toLowerCase();
      _controller.value = _controller.value.copyWith(
        text: text,
        selection:
            TextSelection(baseOffset: text.length, extentOffset: text.length),
        composing: TextRange.empty,
      );
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        alignment: Alignment.center,
        padding: const EdgeInsets.all(6),
        child: TextFormField(
          controller: _controller,
          decoration: const InputDecoration(border: OutlineInputBorder()),
        ),
      ),
    );
  }
}

Syncing files to device sdk gphone x86 arm...
W/IInputConnectionWrapper(24578): beginBatchEdit on inactive InputConnection
W/IInputConnectionWrapper(24578): endBatchEdit on inactive InputConnection
I/TextInputPlugin(24578): Composing region changed by the framework. Restarting the input method.
W/IInputConnectionWrapper(24578): getTextBeforeCursor on inactive InputConnection
W/IInputConnectionWrapper(24578): getSelectedText on inactive InputConnection
W/IInputConnectionWrapper(24578): getTextAfterCursor on inactive InputConnection
I/TextInputPlugin(24578): Composing region changed by the framework. Restarting the input method.
I/TextInputPlugin(24578): Composing region changed by the framework. Restarting the input method.
W/IInputConnectionWrapper(24578): getTextBeforeCursor on inactive InputConnection
W/IInputConnectionWrapper(24578): getSelectedText on inactive InputConnection
W/IInputConnectionWrapper(24578): getTextAfterCursor on inactive InputConnection
W/IInputConnectionWrapper(24578): getTextBeforeCursor on inactive InputConnection
W/IInputConnectionWrapper(24578): getSelectedText on inactive InputConnection
W/IInputConnectionWrapper(24578): getTextAfterCursor on inactive InputConnection
I/TextInputPlugin(24578): Composing region changed by the framework. Restarting the input method.
W/IInputConnectionWrapper(24578): getTextBeforeCursor on inactive InputConnection
W/IInputConnectionWrapper(24578): getSelectedText on inactive InputConnection
W/IInputConnectionWrapper(24578): getTextAfterCursor on inactive InputConnection
I/TextInputPlugin(24578): Composing region changed by the framework. Restarting the input method.
W/IInputConnectionWrapper(24578): getTextBeforeCursor on inactive InputConnection
W/IInputConnectionWrapper(24578): getSelectedText on inactive InputConnection
W/IInputConnectionWrapper(24578): getTextAfterCursor on inactive InputConnection
I/TextInputPlugin(24578): Composing region changed by the framework. Restarting the input method.
W/IInputConnectionWrapper(24578): getTextBeforeCursor on inactive InputConnection
...

同じような処理文が規則性なく発生している状況です。

入力した文字列を小文字化してカーソルを最後尾に移動させる、という処理内容だと認識してます。

公式の本文にはリスナー内の処理（今回の場合は_controller.addListener(){} ）で無限ループが発生する可能性があるため注意が必要、という旨の文章があるのですが、サンプルがすでに無限ループが発生しているため、解決方法がわかりません。

Answer 1

例えばですが、下記のようにイベントを無視するフラグ入れたらどうなりますか？

クラスのメンバに追加

bool _triggerEvents = true;

リスナーのコードを変更

 _controller.addListener(() {
      if (!_triggerEvents) return; // イベントを処理するかどうかのフラグ
      final String text = _controller.text.toLowerCase();

      // イベントを一時的に聞かないように設定
      _triggerEvents = false;

      // 値を変更
      _controller.value = _controller.value.copyWith(
        text: text,
        selection:
            TextSelection(baseOffset: text.length, extentOffset: text.length),
        composing: TextRange.empty,
      );

      // イベントを再度聞き始める
      _triggerEvents = true;
    });

こういう感じで試してみてください。でも実際僕なら下記のように書くかもしれません。（実際には検証していません）

// 下記のようなメソッドを追加
void modifyText(Function(TextEditingController ctrl) func) {
  _triggerEvents = false;
  func(_controller);
  _triggerEvents = true;
}

リスナーのコードを変更

 _controller.addListener(() {
      if (!_triggerEvents) return; // イベントを処理するかどうかのフラグ
      final String text = _controller.text.toLowerCase();

      modifyText((ctrl) => ctrl.text = 'abc'　/* このメソッド内はイベントトリガーされない */　);
      modifyText((ctrl) => ctrl.text = 'test'　/* なんども使うことができる */　);
      // ctrl.value も同じです
  });

書き方は色々ありますので、いい方法がありましたらお教えください。フラグは使わず、都度リスナーを外して追加し直すこともできますね。