🧩

Flutter FilterChipも下ごしらえで時短(UIのclass化)

2023/07/21に公開

ChoiceChipと何が違うの?

ChoiceChipは、選択肢から一つ選ぶ、
FilterChipは、複数選択が可能。
どっちのcodeがめんどうかって? とうぜんFilterChipですねえ。
ということで、下ごしらえ。
ちなみに、Chipが読んでいるのはServerpod経由のPostgreSQLです。

まずはclass化

class FilterFormat extends StatefulWidget {

 final List<String> filterFilter;
 final String filterData;

 const FilterFormat({super.key,
   required this.filterFilter,
   required this.filterData,
 });

 
 FilterFormatState createState() => FilterFormatState();
}

class FilterFormatState extends State<FilterFormat> {

 
 Widget build(BuildContext context) {
   return FilterChip(
     label: Text(widget.filterData),
     selected: widget.filterFilter.contains(widget.filterData),
     onSelected: (bool value) {
       setState(() {
         if (value) {
           if (!widget.filterFilter.contains(
               widget.filterData)) {
             widget.filterFilter
                 .add(widget.filterData);
           }
         } else {
           widget.filterFilter.removeWhere((filterFilter) => filterFilter == widget.filterData);
         }
       });
     },
   );
 }
}

使うときは、たったこれだけ

                                    return FilterFormat(
                                        filterFilter: filtersOrgs,
                                        filterData: organisations.organisation);

幸せ♡

Flutter大学

Discussion