PantaRhei 3~ Chip追加、選択からの仮保存

入力の流れを動画にしました。リンクは文末。

入力したい都市名がないぞ！

私が作っているのは、userが作る年表のDatabaseだ。
いつ、どこで、何があった？
で、現在国名は、多いと言ったって、200はない。
国連加盟国、地域は全部事前登録して、選んでもらうことで表記揺れを防ぐ。

が、都市とか、その他の地名はそうはいかない。
各国の首都ぐらいなら事前登録もありだが、
「おらが村の歴史」だってウェルカムな年表にするつもりなので、
Chipにあれば選ぶし、なければChipを追加してもらう。
次からはそのChipが選ばれる。
これである程度、表記揺れを防ぐ。

なので、Chipの追加

まずは新しい地名を書いてもらう。
前回までのRadioButtonで、

• 現在の地名
• 海の名前（深海底探査とかあるから）
• 当時の国名
• 当時の地名

に条件分岐している。
TextFormFieldにも、この分岐を適用する。

final clearKey = GlobalKey<FormState>();
                      Padding(
                        padding: const EdgeInsets.all(30.0),
                        child: TffFormat(
                          key: clearKey,
                          hintText: 'a New Name You Want',
                          onChanged: (text) {
                            switch (isSelectedOption) {
                              case 'Current Place-name':
                                newPlace = text;
                                break;
                              case 'Sea-name':
                                newSea = text;
                                break;
                              case 'Country-name at that time':
                                newCountryatt = text;
                                break;
                              case 'Place-name at that time':
                                newPlaceatt = text;
                                break;
                            }
                          },
                          tffColor1: Colors.black54,
                          tffColor2: const Color(0x99e6e6fa),
                        ),
                      ),
                      ButtonFormat(
                        onPressed: () async {
                          switch (isSelectedOption) {
                            case 'Current Place-name':
                              await addPlacesAndFetch();
                              currentDisplayList = listPlaces;
                              break;
                            case 'Sea-name':
                              await addSeasAndFetch();
                              currentDisplayList = listSeas;
                              break;
                            case 'Country-name at that time':
                              await addCountryATTandFetch();
                              currentDisplayList = listCountryatts;
                              break;
                            case 'Place-name at that time':
                              await addPlaceATTandFetch();
                              currentDisplayList = listPlaceatts;
                              break;
                          }
                          clearKey.currentState!.reset();
                        },
                        label: 'Add a New Name',

入力欄にいつまで文字があるのキライなので、clearKey付き。
add-AndFetch関数でDatabaseに追加して再取得して、即表示。
ここで昨日のChip表示に戻って、改めてChip選べば、それが仮表示欄に出る。
で、書きたいことを書き、選びたいものを選んで、FloatingActionButtonを押すと

はい、仮保存

            floatingActionButton: FloatingActionButton.extended(
              onPressed: () {

                showDialog<void>(
                    context: context,
                    builder: (_) {
                      return AlertDialog(
                        title: const Text('Data has been temporarily stored.'),
                        content: const Text(
                            'They are not uploaded yet. please continue to fill in the other fields.'),
                        actions: <Widget>[
                          GestureDetector(
                            child: const Text('OK'),
                            onTap: () {
                              Navigator.pop(context);
                            },
                          )
                        ],
                      );
                    });

                ///選択されたplace
                if (_chosenPlace != '') {
                  confirm.selectedPlace = _chosenPlace;
                }

                ///選択されたsea
                if (_chosenSea != '') {
                  confirm.selectedSea = _chosenSea;
                }

                ///選択されたCatt
                if (_chosenCatt != '') {
                  confirm.selectedCatt = _chosenCatt;
                }

                ///選択されたPatt
                if (_chosenPatt != '') {
                  confirm.selectedPatt = _chosenPatt;
                }

流れ流れてconfirmまで来ました

Chipで追加されたデータはもう直接Databaseに入ってますが、
選択したデータは他のタブで入力されたいろんなデータとcondirmで合流します。
そしてみんな一緒に登録されて、ForeignKeyや中間tableで繋がり合う・・・
のは、またいつか、のお話。

文章だけではわかりにくいので、UIの動画撮ります。ちょっとお待ちを。 した。

https://youtu.be/Ijd0MyPbA2w
日々魔改造しているので、この記事どおりではなくなってると思いますけど、一応、総譜。
https://github.com/dongri727/acorn/tree/main
https://zenn.dev/flutteruniv_dev/articles/b4b6a2fb38503b