FlutterのTextFieldで日本語入力が重複する現象への対応

事象

FlutterのMacOSアプリで、TextFieldを使用して日本語入力した場合、日本語に変換すると末尾の変換結果が２重に入力されてしまう。

例えば、「日本語を入力する」と入力して日本語変換すると、「日本語を入力する入力する」とTextFieldに入力される。

発生する条件

• macOS
• IMEのライブ変換を無効にしている
• 日本語の変換対象が２箇所以上の文字列を一度に確定する場合
  • 例えば、上記の「日本語を入力する」の入力を「日本語を」と「入力する」に分けた場合、本現象は再現しない

Flutterのissue

本件は、すでにFlutterにissueが登録されているが、対応する予定はなさそう。

回避策

公式の対応が期待できないので、以下のようなカスタムTextFieldを作成して、本件を回避する

// Flutter imports:
import 'package:flutter/material.dart';

// Package imports:
import 'package:flutter/material.dart';

class MyTextField extends StatefulWidget {
  const MyTextField({super.key});

  @override
  _MyTextFieldState createState() => _MyTextFieldState();
}

class _MyTextFieldState extends State<MyTextField> {
  String? _current;
  final TextEditingController _controller = TextEditingController();

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

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: _controller,
      onChanged: (value) {
        // 前回の入力値との末尾の差分を取り、末尾が繰り返されていれば、前回の入力を維持する
        if (_current != null && _current!.length < value.length) {
          final suffix = value.substring(_current!.length);
          if (suffix.length > 1 && value == "$_current$suffix") {
            _controller.text = _current!;
            return;
          }
        }
        _current = value;
      },
    );
  }
}

おわりに

あくまで回避策としての暫定的な実装のため、もっと良い対応方法があれば教えていただければ幸いです。