PantaRhei 1~ RadioButtonから検索

独学者の悩み

ネットにあふれる技術記事とAIに助けられながらカメの歩みで進む独学者の
最近の悩みは「繋がり」である。
世の技術記事はたいてい「一つの機能」を取り上げる。
その各々は、どう繋がっていくのか。

もちろん、アプリを一つ「作ってみよう」系の教科書なら、書かれている繋がりはわかる。
が、それが私の今今の問題解決に役立つ確率は低い。

それはそうだ、技術の順列、何通りありますか？

ともかく防備録ということで

今回記録するのは、

• RadioButtonから条件分岐しての検索、
• 検索からChip表示、Chip追加、Chip選択からの一時保存
• ・・・のループ、からのDatabase登録

という、ニッチなRouteになる。
受け渡される値の型が少しずつ変わっていく、万物流転な感じがおもしろかったので
ちょっと書いておこうかなという気になったのであります。

まずはRadioButtonをFormat

class RadioButtonFormat extends StatefulWidget {
  final List<String> options;
  final String? initialOption;
  final ValueChanged<String?> onChanged;

  const RadioButtonFormat({
    Key? key,
    required this.options,
    this.initialOption,
    required this.onChanged,
  }) : super(key: key);

  @override
  State<RadioButtonFormat> createState() => _RadioButtonFormatState();
}

class _RadioButtonFormatState extends State<RadioButtonFormat> {
  String? _selectedOption;

  @override
  void initState() {
    super.initState();
    _selectedOption = widget.initialOption;
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: widget.options.map((option) {
        return ListTile(
          textColor: Colors.white,
          title: Text(option),
          leading: Radio<String>(
            activeColor: Colors.yellow,
            value: option,
            groupValue: _selectedOption,
            onChanged: (String? value) {
              setState(() {
                _selectedOption = value;
              });
              widget.onChanged(value);
            },
          ),
        );
      }).toList(),
    );
  }
}

暗い地色の上で使っているので文字が白になってます。
コピペすると「見えない！」ってなるかも。

Pageに置くとこんな感じ

                  Expanded(
                    flex: 1,
                    child: Padding(
                      padding: const EdgeInsets.fromLTRB(100, 20, 20, 20),
                      child: RadioButtonFormat(
                          options: const ['Current Place-name', 'Sea-name', 'Country-name at that time', 'Place-name at that time'],
                          initialOption: '',//チェックがつかない
                          onChanged: (String? value) {
                            setState(() {
                              isSelectedOption = value!;　//ここが次に渡される
                            });
                            print("selected: $value");
                          }),
                    ),
                  ),

Button名のListが直打ちなのが難点。ここもいずれ汎用化したい。
いずれにせよ、次に渡されるのは、個々のvalue=文字列である、がpoint。

分岐して検索を実行する

  String? isSelectedOption = '';　//Buttonの文字列
  List<dynamic> currentDisplayList = []; //次のChipに渡すList
  *****
  
                  child: ElevatedButton(
                    onPressed: () async {
                      switch (isSelectedOption) {
                        case 'Current Place-name':
                          await fetchPlaces();
                          currentDisplayList = listPlaces;
                          print(listPlaces);
                          break;
                        case 'Sea-name':
                          await fetchSeas();
                          currentDisplayList = listSeas;
                          break;
                        case 'Country-name at that time':
                          await fetchCountryATT();
                          currentDisplayList = listCountryatts;
                          print(listCountryatts);
                          break;
                        case 'Place-name at that time':
                          await fetchPlaceATT();
                          currentDisplayList = listPlaceatts;
                          break;
                      }
                    },
                    child: const Text('Show and Select Options'),
              ),

せっかく分岐したのに、それぞれの検索結果、例えばlistPlacesを、
おなじcurrentDisplayListで受けているのは、
次のChipで汎用的に表示するため。
ちなみにServerpodのfetchについては今回は省略。

余談だが、さいしょ、分岐を書くのに夢中で非同期処理を書いていなかった。
というか、そもそも非同期処理を意識して書いたことがなかった。
ひたすら写経していれば、自動的に入ってくる。
で、今回、ボタンを押しても検索結果が空、[ ]だった。あー、Errorか。
ところが、二回押すと、ちゃんと入っている。
一回目では間にあわんのか･･･かくして、非同期処理の威力を初めて体感した。
printという今や非推奨で黄色線必須の機能が、教えてくれたのでした。

さて、これをChipに渡してからの流転は、次のお話

https://zenn.dev/flutteruniv_dev/articles/b4b6a2fb38503b