【Flutter】AutoCompleteで候補を選択or選択せずに入力をして、保存後テキストフィールドに入力された文字を削除したい

Question

前提

Flutterでテキストフィールドに入力して保存ボタンを押すと
テキストフィールドから文字を消したい

実現したいこと

テキストフィールドに候補文字列を出しつつ、
候補を選択したさい、選択しなかった際の入力のどちらも
保存し、保存したあとテキストフィールドの文字を消したい。

発生している問題・エラーメッセージ

候補をAutoCompleteで作成し、
AutoCompleteの中のcontrollerをCodeAssumeのウィジェット外から
消去するために、TextEditingControllerを設定したがうまくいかない。

特になし

該当のソースコード

import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}



class _MyHomePageState extends State<MyHomePage> {

  String _tmpCode='';
  String companyCodeName='';
  String nonSelectedcompanyname='';

  TextEditingController codecompanyEditingController = TextEditingController();


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          children: [
            CodeAssume(context,codecompanyEditingController),
            IconButton(
                onPressed: (){
                  if(companyCodeName!=''){
                    _tmpCode=companyCodeName.substring(0,4);
                  }else{
                    _tmpCode=nonSelectedcompanyname;
                  }

                  companyCodeName='';
                  codecompanyEditingController.text='';
                  setState(() {});
                },
                icon: Icon(Icons.save)
            ),
            Text(_tmpCode),
            Text('codecompanyEditingController.text${codecompanyEditingController.text}')
          ],
        ),
      ),
    );
  }


  Widget CodeAssume(BuildContext context,codecompanyEditingController) {
    return Container(
      width: 80,
      child: Autocomplete<String>(
        fieldViewBuilder: (
            BuildContext context,
            codecompanyEditingController,
            FocusNode focusNode,
            VoidCallback onFieldSubmitted,
        ) {
        return TextField(
            controller: codecompanyEditingController,
            focusNode: focusNode,
            onChanged: (String? value){
              nonSelectedcompanyname = value!;
            },
          );
        },
        optionsBuilder: (TextEditingValue textEditingValue) {
          if (textEditingValue.text == '') {
            return const Iterable<String>.empty();
          }
          return _kOption.where((String option) {
            return option.contains(textEditingValue.text.toLowerCase());
          });
        },
        onSelected: (selection) {
          companyCodeName = selection;
        },
      ),
    );
  }

}


List<String> _kOption = <String>[
  "aaasdfa",
  "sasfablo",
];

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

ここにより詳細な情報を記載してください。

Answer 1

Autocomplete.AutocompleteFieldViewBuilderに渡されるTextEditingControllerはRawAutocomplete内で生成されたもの。上位側、この場合はCodeAssumeのパラメータで渡されたものではないため。
そのため自分で用意したTextEditingControllerにいくら値を設定しても生成されているテキストフィールドの値は変更できない。

そのためAutocompleteじゃたぶん対応できない。
Autocompleteを改良するかRawAutocompleteを使って自作するかどちらか。

速いのはAutocompleteをコピーして上位側からTextEditingControllerを渡せるようにして、build内のRawAutocompleteに用意したTextEditingControllerを渡すようにするという感じだろうか。

---

Autocompleteを改良した場合の実装を以下抜粋して追記しておきます。

class Autocomplete<T extends Object> extends StatelessWidget {
  /// Creates an instance of [Autocomplete].
  Autocomplete(
    this.controller, // 追加
  {
    super.key,
    required this.optionsBuilder,
    this.displayStringForOption = RawAutocomplete.defaultStringForOption,
    this.fieldViewBuilder = _defaultFieldViewBuilder,
    this.onSelected,
    this.optionsMaxHeight = 200.0,
    this.optionsViewBuilder,
    this.initialValue,
  })  : assert(displayStringForOption != null),
        assert(optionsBuilder != null);

  /// {@macro flutter.widgets.RawAutocomplete.displayStringForOption}
  final AutocompleteOptionToString<T> displayStringForOption;

  final TextEditingController controller; // 追加
  final FocusNode _focusNode = FocusNode(); // 追加
  final GlobalKey _autocompleteKey = GlobalKey(); // 追加

 ~中略~

  @override
  Widget build(BuildContext context) {
    return RawAutocomplete<T>(
      textEditingController: controller, // 追加
      focusNode: _focusNode, // 追加
      key: _autocompleteKey, // 追加
      displayStringForOption: displayStringForOption,

Comments

[ouma]

回答ありがとうございます

>そのためAutocompleteじゃたぶん対応できない。
>Autocompleteを改良するかRawAutocompleteを使って自作するかどちらか。

RawAutocompleteでもfieldViewBuilder内にtextEditingController があるので一緒のようでした…理解できずすいません

>速いのはAutocompleteをコピーして上位側からTextEditingControllerを渡せるようにして、build内のRawAutocompleteに用意したTextEditingControllerを渡すようにするという感じだろうか。

これも理解できませんでした…
もしお時間あればもう少し詳しくお願いできますでしょうか…

[ta.fu]

基本的に外部からTextField内のデータを操作したい場合、外部で確保したtextEditingControllerが必要です。

AutocompleteはRawAutocompleteをラッピングしたクラスで、RawAutocompleteには外部からtextEditingControllerを渡す仕組みは持っていますがAutocompleteにはその仕組みは持っていません。

> RawAutocompleteでもfieldViewBuilder内にtextEditingController がある
fieldViewBuilderに渡す仕組みは持っていますが、それはAutocompleteから呼び出されているRawAutocomplete内で確保しているtextEditingControllerを渡しているにすぎません。

多分、上に書かれている内容はRawAutocompleteの仕組みとAutocompleteの実装を読み解かないと理解できない内容なので、教えるにしても結構ハードルが高いです。

最後の文章もAutocompleteのbuild部分に書かれているRawAutocompleteに、RawAutocompleteのパラメータtextEditingControllerに何とかして外部からtextEditingControllerを渡すようにするにはどうすればいいかを書いているだけです。

[ouma]

丁寧にありがとうございます！

いろいろ調べてなんとかできました
クラスそのものを変更するというのは想像もしていませんでした…

なぜこうすれば動くのか全然わかってない部分もありますので、勉強させていただきます