独学者の悩み
ネットにあふれる技術記事と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);
State<RadioButtonFormat> createState() => _RadioButtonFormatState();
}
class _RadioButtonFormatState extends State<RadioButtonFormat> {
String? _selectedOption;
void initState() {
super.initState();
_selectedOption = widget.initialOption;
}
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に渡してからの流転は、次のお話
Discussion