Flutter - How to align the list of filter chips?

289 Views Asked by At

I'm making a filter screen that uses Filter Chips, I'm trying to Wrap these Chips in multiple lines. I tried with Wrap() widget. But I was unable to achieve that.

Is there any way to achieve this?

Here's what I want:

enter image description here

But I get

enter image description here

Code:

final items = [
    "All",
    "0-2 Years",
    "2-4 Years",
    "5-7 Years",
    "8-13 Years",
    "14+ Years"
  ];
  List<String> age = [];
Padding(
                  padding: const EdgeInsets.only(top: 15, left: 20),
                  child:  Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          Wrap(
                            spacing: 8,
                            runSpacing: 8,
                            children: items3
                                .map(
                                  (e) => FilterChip(
                                      shape: RoundedRectangleBorder(
                                        borderRadius: BorderRadius.circular(10),
                                      ),
                                      backgroundColor: Colors.white,
                                      selectedColor: const Color(0xff6fedf6),
                                      label: Container(
                                        height: 46,
                                        width: 98,
                                        alignment: Alignment.center,
                                        child: Text(e),
                                      ),
                                      labelStyle: GoogleFonts.poppins(
                                        textStyle: const TextStyle(
                                          color: Colors.black,
                                          fontSize: 14,
                                          fontWeight: FontWeight.w500,
                                          letterSpacing: 0.5,
                                        ),
                                      ),
                                      selected: age.contains(e),
                                      onSelected: (bool value) {
                                        if (age.contains(e)) {
                                          age.remove(e);
                                        } else {
                                          age.add(e);
                                        }
                                        setState(() {});
                                      }),
                                )
                                .toList(),
                          ),
                        ]),
                ),
1

There are 1 best solutions below

0
Md. Yeasin Sheikh On

Your SingleChildScrollView is on horizontal direction, therefore its child getting infinite constraints. It will be

Padding(
  padding: const EdgeInsets.only(top: 15, left: 20),
  child: SingleChildScrollView(
    // scrollDirection: Axis.horizontal,
    child: Row(mainAxisAlignment: MainAxisAlignment.start, children: [
      Expanded(
        child: Wrap(