Flutter how to get list of selected FilterChips-CodePudding

i have created a Widget which displays chips to select your interests. The data is loaded from firestore. Now i want to check which ones are selected after i clicked the button. The problem is that i'm really new and i have no idea how to do this. Here is the code of my chip widget:

class _filterChipWidgetState extends State<filterChipWidget> {
 var _isSelected = false;
 @override
 Widget build(BuildContext context) {
  return FilterChip(
    label: Text(widget.chipName),
    labelStyle: TextStyle(color: Color.fromRGBO(254, 60, 110, 1),
       fontSize: 16.0, fontWeight: FontWeight.bold),
   selected: _isSelected,
    shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(
        30.0),),
    backgroundColor: Color(0xffededed),

    checkmarkColor:Color.fromRGBO(254, 60, 110, 1),
    onSelected: (isSelected) {
    setState(() {
      _isSelected = isSelected;
     });
   },

   selectedColor: const Color.fromRGBO(255, 109, 147, 0.23137254901960785));
 }
}

And here is how i implement it in my page:

class _SelectInterestState extends State<SelectInterest> {
@override
Widget build(BuildContext context) {
// TODO: implement build
  CollectionReference interest =
     FirebaseFirestore.instance.collection('interests');

 return FutureBuilder<DocumentSnapshot>(
   future: interest.doc('interests').get(),
   builder:
        (BuildContext context, AsyncSnapshot<DocumentSnapshot> snapshot) {
     if (snapshot.hasError) {
       return Text("Something went wrong");
     }

     if (snapshot.hasData && !snapshot.data!.exists) {
       return Text("Document does not exist");
     }

     if (snapshot.connectionState == ConnectionState.done) {
       Map<String, dynamic> data =
           snapshot.data!.data() as Map<String, dynamic>;

       return Column(
         children: [
           generateChipList(data),
           Padding(
             padding: const EdgeInsets.all(30.0),
             child: DecoratedBox(
                 decoration: BoxDecoration(
                   borderRadius: BorderRadius.circular(10.0),
                   gradient: const LinearGradient(colors: [
                     Color.fromRGBO(254, 60, 110, 1),
                     Color.fromRGBO(226, 132, 78, 1.0),
                   ]),
                 ),
                 child: ElevatedButton(
                     style: ElevatedButton.styleFrom(
                         elevation: 0, primary: Colors.transparent),
                     onPressed: () {
                       // HERE I WANT TO SEE THE SELECTED CHIPS Array
                       
                     },
                     child: SizedBox(
                         width: double.infinity,
                         child: Center(
                           child: Text("NEXT"),
                         )))),
           )
         ],
       );

       return Text("${data.values} ");
     }

     return const Text("loading");
   },
 );

}

 Widget generateChipList(Map<String, dynamic> data) {
    return Padding(
      padding: const EdgeInsets.only(top: 30.0),
      child: Column(
        children: [
         Padding(
           padding: const EdgeInsets.all(8.0),
           child: Text("Wähle deine Interessen",
             style: TextStyle(color: Colors.black87, fontSize: 30)),
          ),
         Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
           child: Wrap(
               spacing: 5.0,
               runSpacing: 5.0,
               children: List.generate(data['values'].length, (index) {
                 return filterChipWidget(
                   chipName: data['values'][index]['label'],
                 );
               })),
         ),
       )
     ],
   ),
 );

} }

CodePudding user response：

Dominik Hartl try to edit filterChipWidget class:

Add new function

class filterChipWidget extends StatefulWidget {
  filterChipWidget ({Key? key, required this.onSelected}) : super(key: key);

  // Other declarations
  // ....................
  // End
  Function(bool, String) onSelected;

  @override
  State<filterChipWidget> createState() => _filterChipWidgetState();
}

Update _filterChipWidgetState class

class _filterChipWidgetState extends State<filterChipWidget> {
         var _isSelected = false;
         @override
         Widget build(BuildContext context) {
          return FilterChip(
            label: Text(widget.chipName),
            labelStyle: TextStyle(color: Color.fromRGBO(254, 60, 110, 1),
               fontSize: 16.0, fontWeight: FontWeight.bold),
           selected: _isSelected,
            shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(
                30.0),),
            backgroundColor: Color(0xffededed),
        
            checkmarkColor:Color.fromRGBO(254, 60, 110, 1),
            onSelected: (isSelected) {
            setState(() {
              _isSelected = isSelected;
              widget.onSelected(isChecked, widget.chipName);
             });
           },
        
           selectedColor: const Color.fromRGBO(255, 109, 147, 0.23137254901960785));
         }
        }

Add new variable LIST, for selected values

class _SelectInterestState extends State<SelectInterest> {

late List<String> selectedItems = [];

@override
Widget build(BuildContext context) {
// TODO: implement build
  CollectionReference interest =
     FirebaseFirestore.instance.collection('interests');

 return FutureBuilder<DocumentSnapshot>(
   future: interest.doc('interests').get(),
   builder:
        (BuildContext context, AsyncSnapshot<DocumentSnapshot> snapshot) {
     if (snapshot.hasError) {
       return Text("Something went wrong");
     }

     if (snapshot.hasData && !snapshot.data!.exists) {
       return Text("Document does not exist");
     }

     if (snapshot.connectionState == ConnectionState.done) {
       Map<String, dynamic> data =
           snapshot.data!.data() as Map<String, dynamic>;

       return Column(
         children: [
           generateChipList(data),
           Padding(
             padding: const EdgeInsets.all(30.0),
             child: DecoratedBox(
                 decoration: BoxDecoration(
                   borderRadius: BorderRadius.circular(10.0),
                   gradient: const LinearGradient(colors: [
                     Color.fromRGBO(254, 60, 110, 1),
                     Color.fromRGBO(226, 132, 78, 1.0),
                   ]),
                 ),
                 child: ElevatedButton(
                     style: ElevatedButton.styleFrom(
                         elevation: 0, primary: Colors.transparent),
                     onPressed: () {
                       // HERE I WANT TO SEE THE SELECTED CHIPS Array
                       // Now you can get selected values
                       print(selectedItems);
                     },
                     child: SizedBox(
                         width: double.infinity,
                         child: Center(
                           child: Text("NEXT"),
                         )))),
           )
         ],
       );

       return Text("${data.values} ");
     }

     return const Text("loading");
   },
 );

Finally add or remove values to/from the selectedItems LIST

Widget generateChipList(Map<String, dynamic> data) {
    return Padding(
      padding: const EdgeInsets.only(top: 30.0),
      child: Column(
        children: [
         Padding(
           padding: const EdgeInsets.all(8.0),
           child: Text("Wähle deine Interessen",
             style: TextStyle(color: Colors.black87, fontSize: 30)),
          ),
         Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
           child: Wrap(
               spacing: 5.0,
               runSpacing: 5.0,
               children: List.generate(data['values'].length, (index) {
                 return filterChipWidget(
                   chipName: data['values'][index]['label'],
                   onSelected:  (isChecked, item) {
                   if (isChecked) {
                       // Check the value exists in the list: add if NOT EXISTS
                      if (!selectedItems.contains(item)) {
                         selectedItems.add(item);
                      }
                   } else {
                   // Check the value exists in the list: remove if EXISTS
                   if (selectedItems.contains(item)) {
                       selectedItems.remove(item);
                   }
                  }

Not that generateChipList is _SelectInterestState class member.