How to design horizontal scroll bar with separate colors - flutter

Question

I have designed a horizontal scroll bar. here you can see my code. I want to design this bar according to the left side UI. The right side image shows my implementation so far. how do I design this with separate colours as the image shows?
final List<String> data = ["FRUIT AND BERRIES", "VEGETABLES", "BREAD","MILK"];
Padding(
padding: const EdgeInsets.only(top: 20, left: 20, right: 20),
child: Column(
children: [
SizedBox(
height: 50,
child: ListView.separated(
itemCount: data.length,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) =>
itemW(color: Color(0xffEEEACF), text: data[index]), //try to change text colour from here but it change whole box color. :(
separatorBuilder: (context, index) {
return const SizedBox(
width: 5,
);
},
),
),
],
),
),
//horizontal scroll bar
Widget itemW({
required String text,
required Color color,
}) {
return Container(
padding: const EdgeInsets.all(16),
alignment: Alignment.center,
decoration: ShapeDecoration(
shape: const StadiumBorder(),
color: color,
),
child: Text(text),
);
}

Answer 1

You can use a map to map items with colors.
final Map<String,Color> itemColors = {
"FRUIT AND BERRIES" : Color(0xffEEEACF),
"VEGETABLES": Color(0xffFFFFFF),
"BREAD" : Color(0xff000000),
"MILK" : Color(0xffFF0000)
}
full Code:
final List<String> data = ["FRUIT AND BERRIES", "VEGETABLES", "BREAD","MILK"];
final Map<String,Color> itemColors = {
"FRUIT AND BERRIES" : Color(0xffEEEACF),
"VEGETABLES": Color(0xffFFFFFF),
"BREAD" : Color(0xff000000),
"MILK" : Color(0xffFF0000)
}
Padding(
padding: const EdgeInsets.only(top: 20, left: 20, right: 20),
child: Column(
children: [
SizedBox(
height: 50,
child: ListView.separated(
itemCount: data.length,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) =>
itemW(color: itemColors[data[index]]!, text: data[index]), //try to change text colour from here but it change whole box color. :(
separatorBuilder: (context, index) {
return const SizedBox(
width: 5,
);
},
),
),
],
),
),
//horizontal scroll bar
Widget itemW({
required String text,
required Color color,
}) {
return Container(
padding: const EdgeInsets.all(16),
alignment: Alignment.center,
decoration: ShapeDecoration(
shape: const StadiumBorder(),
color: color,
),
child: Text(text),
);
}