Flutter ChoiceChipsの作り置き(UIのclass化）

UIのコードを短くしたい

ユーザーがDataを入力することで、協働して作るデータベース、を目指している。
縦横無尽に検索が掛けられるように、いろんなtermを登録したい。
が、ユーザーの手間はできるだけ省きたい。
と同時に、ユーザーによる表記揺れはできるだけ避けたい。
ということで、ChoiceChipの出番がやたら増えた。
が、ChoiceChipはけっこう設定がめんどうくさい。
ということで作り置きシリーズ第二弾。
ちなみに、第一弾はTextFormFieldだった。
https://zenn.dev/flutteruniv_dev/articles/7628350c08dc78
ちなみに、backendは Serverpodを使っている。

元はこんな感じ

                      Padding(
                        padding: const EdgeInsets.all(20.0),
                        child: OutlinedButton(
                          onPressed: fetchPlaces,
                          child: const Text('Show and Select Current Place'),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Wrap(
                          spacing: 5.0,
                          children: listPlaces.map((places) {
                            return ChoiceChip(
                              label: Text(places.place),
                              selected: _filtersPlaces.contains(places.place),
                              onSelected: (bool value) {
                                setState(() {
                                  if (value) {
                                    _filtersPlaces.clear();
                                    _filtersPlaces.add(places.place);
                                  } else {
                                    _filtersPlaces.removeWhere(
                                        (filters) => filters == places.place);
                                  }
                                });
                              },
                            );
                          }).toList(),
                        ),
                      ),

これをclass化

import 'package:flutter/material.dart';

class ChipsFormat extends StatefulWidget {

  final List<String> chipsFilter;
  final String chipsData;

  const ChipsFormat({super.key,
    required this.chipsFilter,
    required this.chipsData,
  });

  @override
  ChipsFormatState createState() => ChipsFormatState();
}

class ChipsFormatState extends State<ChipsFormat> {

  @override
  Widget build(BuildContext context) {
    return ChoiceChip(
        label: Text(widget.chipsData),
        selected: widget.chipsFilter.contains(widget.chipsData),
        onSelected: (bool value) {
          setState(() {
            if (value) {
              widget.chipsFilter.clear();
              widget.chipsFilter.add(widget.chipsData);
            } else {
              widget.chipsFilter.removeWhere((filter) => filter == widget.chipsData);
            }
          });
        },
    );
  }
}

で、こんなふうに使う

                      Padding(
                          padding: const EdgeInsets.all(8.0),
                        child: Wrap(
                          spacing: 5.0,
                          children: listPlaces.map((places){
                            return ChipsFormat(
                                chipsFilter: _filtersPlaces,
                                chipsData: places.place);
                          }).toList(),
                        ),
                      ),

すっきりしました＼(^O^)／