'Flutter how to get list of selected FilterChips
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'],
);
})),
),
)
],
),
);
} }
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
