How to design horizontal scroll bar with separate colors

Issue

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),
    );
  }

Solution

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),
    );
  }

Answered By - Sahil Hariyani