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:
But I get
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(),
),
]),
),


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