How to make this design – Flutter

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