How to make this design-CodePudding

I want to make this design in flutter I have tried in row but it's going overflow. So, you can help me to make this using any another way!!

define variable for selected Index.

int selectedIndex = 0;

Just Put in your widget

SizedBox(
          height: 40,
          child: ListView.builder(
            itemCount: 20,
            scrollDirection: Axis.horizontal,
            shrinkWrap: true,
            physics: BouncingScrollPhysics(),
            itemBuilder: (context, index) {
              return InkWell(
                onTap: () {
                  selectedIndex = index;
                  setState(() {});
                },
                child: Container(
                  margin: EdgeInsets.symmetric(horizontal: 5),
                  decoration: BoxDecoration(
                    color: selectedIndex == index ? Colors.blueAccent.shade100 : Colors.white,
                    borderRadius: BorderRadius.circular(30),
                  ),
                  padding: EdgeInsets.symmetric(vertical: selectedIndex == index ? 12 : 10, horizontal: selectedIndex == index ? 18 : 15),
                  child: Text("Text $index", style: TextStyle(color: selectedIndex == index ? Colors.white : Colors.grey, fontSize: selectedIndex == index ? 15 : 12)),
                ),
              );
            },
          ),
        )

I Hope this will solve your issue.

CodePudding user response：

Ok, writing Chips with Containers like other answers suggest is not necessary. Because you actually have chips widgets in Flutter. Please check them out, they are well documented and have examples provided.

https://api.flutter.dev/flutter/material/FilterChip-class.html

https://api.flutter.dev/flutter/material/ChoiceChip-class.html

https://api.flutter.dev/flutter/material/InputChip-class.html