Question 75526 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to create a list of filter chips?

I’m a flutter beginner. I’m trying to create filter chips. I want a list of 3 filter chips in a row with a multiselection option. How to achieve this?

Like this:

enter image description here

bool isSelected = false;

Padding(
                padding: const EdgeInsets.only(top: 20),
                child: FilterChip(
                    label: Text('data1'),
                    selected: isSelected,
                    onSelected: (bool value) {
                      setState(() {
                        isSelected = !isSelected;
                      });
                    }),
              ),
Tags:

2

Answers


  1. 0

    Instead of filter you can create custom checkbox that is easy to implement

    Login or Signup to reply.
  2. 0

    Multi-selection option means you need a list or model class to control N items. I am using another list that will decide the item is checked or not.

      final items = [
    "5-7 Years",
    "8-13 Years",
    "14+ Years",
  ];
  List<String> selectedItem = [];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Row(
            children: items
                .map(
                  (e) => Padding(
                    padding: const EdgeInsets.only(top: 20),
                    child: FilterChip(
                        label: Text(e),
                        selected: selectedItem.contains(e),
                        onSelected: (bool value) {
                          if (selectedItem.contains(e)) {
                            selectedItem.remove(e);
                          } else {
                            selectedItem.add(e);
                          }
                          setState(() {});
                        }),
                  ),
                )
                .toList(),
          )
        ],
      ),
    );
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search