How to make this design - flutter

Question

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

Answer 1

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

Answer 2

here is the exact coding , I used in my project, it might help u...
change according to your design..
class HomeScreen_Coffee extends StatefulWidget {
const HomeScreen_Coffee({Key? key}) : super(key: key);
#override
State<HomeScreen_Coffee> createState() => _HomeScreen_CoffeeState();
}
class _HomeScreen_CoffeeState extends State<HomeScreen_Coffee> {
List<String> titles=['All','Fav','Popular','Trending'
];
int selectedindex=0;
#override
Widget build(BuildContext context) {
return Scaffold(
body:
Container(
height: 40,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: titles.length,
itemBuilder: (context,index){
return CoffeeTile(name: titles[index], ontap: (){
selectedindex=index;
setState(() {
});
},isselected: selectedindex==index,);
}),
),
));
}
}
class CoffeeTile extends StatelessWidget {
final String name;
final bool isselected;
final VoidCallback ontap;
const CoffeeTile({Key? key,required this.name,this.isselected=false,required this.ontap}) : super(key: key);
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(left: 12.0),
child: GestureDetector(
onTap: ontap,
child: Container(
decoration: BoxDecoration(
color: Colors.white12,
borderRadius: BorderRadius.circular(20),
),
padding: EdgeInsets.symmetric(horizontal: 20),
child: Center(
child: Text(name.toString(),style: TextStyle(
fontSize: 18,color: isselected?Colors.orange:Colors.grey,fontWeight: FontWeight.bold
),),
),
),
),
);
}
}

Answer 3

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.