🧩

FilterChipをChoiceChipに差し替える

2023/03/01に公開

大きな目標

Flutterで蒐集したデータをMySQLでDatabase化、Flutterから検索した結果をUnity上で三次元表示し、開架の図書館内を歩きながら本を手に取ってみるような表現を目指す。

中期的な目標

データベースに無関心なuserが入力しても適切なデータを蒐集できるフロントをFlutterで作る。

今日の目標

複数選択が可能なFilterChipで設定したいくつかの項目を、単選択のChoiceChipに差し替える。

今回のネックも検索結果を使って表示する手法

前回、FilterChipを使ったとき一番苦労したのが、特定のListではなく、検索結果で得られたデータを組み込むところだった。今回、ChoiceChipの公式やその他の記事を見ても、やはり問題は同じだ。もちろん、前回学んだことを応用すればいいわけだが、まだ私の目では、どこが幹でどこが枝葉か、なかなか識別がつかない。やりたいことは「複数選択ではなく、単選択」ただ一つなのに、結局、Filterでの設定を全部消して、一からChoiceで書き直すのか?

基本は公式、でもピンポイントなら爺様に聞く

結局またChatGPTに頼りました。自分のコードを見せて、やりたいことを書く。たった3行書き換えただけでした。対処療法の極みですね。
前半がFilterのコード、後半がChoiceです。

                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Wrap(
                              spacing: 5.0,
                              children: displayListATT.map<Widget>((data) {
                                return FilterChip(
                                  label: Text(data['selectedATT'] ?? ""),
                                  selected: _filtersATT.contains(data['selectedATT']!),
                                  onSelected: (bool value) {
                                    setState(() {
                                      if (value) {
                                        if (!_filtersATT.contains(data['selectedATT']!)) {
                                          _filtersATT.add(data['selectedATT']!);
                                        }
                                      } else {
                                        _filtersATT.removeWhere((String who) {
                                          return who == data[data['selectedATT']]!;
                                        });
                                      }
                                    });
                                  },
                                );
                              }).toList(),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Wrap(
                              spacing: 5.0,
                              children: displayListPlace.map<Widget>((data) {
                                return ChoiceChip(
                                  label: Text(data['selectedPlace'] ?? ""),
                                  selected: _filtersPlace.contains(data['selectedPlace']!),
                                  onSelected: (bool value) {
                                    setState(() {
                                      if (value) {
                                        _filtersPlace.clear();
                                          _filtersPlace.add(data['selectedPlace']!);
                                      } else {
                                        _filtersPlace.removeWhere((String who) {
                                          return who == data[data['selectedPlace']]!;
                                        });
                                      }
                                    });
                                  },
                                );
                              }).toList(),
                            ),
                          ),			                            

Chipの名前とif文変えただけという。爺様、ありがとう。

Flutter大学

Discussion