textをListにする

Chipが多すぎるときは

表記ぶれが起きるのは覚悟の上で、別のデザインも考えた。
常識的に、TextFormFieldに入力された単語で検索する。
でも、endpointは既に「Listで検索」になっている。
endpointに一つのkeyword用関数を加えるという手もあるし、
むしろその方がよいのかもしれないが、
多分一つで絞る場面は少ないと思うので、
今回はTextFormFieldに入力された文字列をListの要素にする、という方法を考えてみた。

まずは入力された文字列で要素一つのListを作る

  final TextEditingController controller = TextEditingController();
  final List<String> _countries = [];

                    Expanded(
                      flex: 5,
                      child: Padding(
                        padding: const EdgeInsets.fromLTRB(20,20,5,20),
                        child: FormatGrey(
                          controller: controller,//ここで入力した文字列を
                          hintText: "Search Term",
                          onChanged: (text) {
                          },
                        ),
                      ),
                    ),
                    Expanded(
                      flex: 2,
                      child: Padding(
                        padding: const EdgeInsets.fromLTRB(5,20,20,20),
                        child: ElevatedButton(
                          onPressed: () {
                            if (controller.text.isNotEmpty){
                              setState(() {
                                _countries.add(controller.text);//ここでリストに加えて
                              });
                              timeline.fetchPrincipal(countries: _countries);//検索する
                            }
                            controller.clear();
                          },
                          child: const Text("Add"),
                        ),
                      ),
                    ),

カンマ繋ぎで入力したものを、分解して、Listにできるか

もちろんできます、と爺様はすらすらコードを書いてくれたが、
どうもうまくいかない、もちろん私のせいだろうけど・・・

あれこれやっていて妙なことに気づく

国名を一つ入れて、addボタンを押す。
ちゃんと絞り込まれた結果がCustomRenderObjectに描画される。
戻って別の国を書いて、addボタンを押す。

あら・・・変更ではなく、追加されてる。
controller.clearでTextFormFieldは空になっているけれど
Listは更新されないらしい。（当然か）
なら、カンマ繋ぎを分解するのではなく、
一つ一つ追加していってリストの内容を増やす、というのが可能なわけだ。

可能なのはいいけど、書き直せないのは問題だ。
だからListにclearボタンをつけよう。

                    Expanded(
                      flex: 2,
                        child: Padding(
                          padding: const EdgeInsets.fromLTRB(5, 20, 20, 20),
                          child: ElevatedButton(
                            onPressed: () {
                              setState(() {
                                _countries.clear();
                              });
                            },
                            child: const Text('Clear'),
                          ),
                        )
                    )

List内容を確認する表示をつける

Chipなら選んだChipを確認できるが、
今回の状態では、何書いたんだっけ、とか、消えたかな、とか、わからないので、
簡単な表示画面もつける。

                Padding(
                  padding: const EdgeInsets.all(20.0),
                  child: Center(
                    child: Container(
                      padding: const EdgeInsets.all(10.0),
                      decoration: BoxDecoration(
                        border: Border.all(color: Colors.grey),
                        borderRadius: BorderRadius.circular(8.0),
                      ),
                      child: Text(
                        _countries.join(', '),  // リストの内容をカンマで区切って表示
                        style: const TextStyle(fontSize: 16.0),
                      ),
                    ),
                  ),
                ),

とりあえずこんな感じで先に進もう。