class HomePage extends StatefulWidget {
const HomePage({super.key});

 @override
 State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
//create a variable to store selected index
int selectedIndex = 0;

//dummy list contains index of every item
final List<Model2> list = [
Model2(
  text: '09:00',
  temp: '34 C',
  iconData: Icons.cloudy_snowing,
),
Model2(
  text: '10:00',
  temp: '34 C',
  iconData: Icons.cloudy_snowing,
),
Model2(
  text: 'Now',
  temp: '34 C',
  iconData: Icons.cloudy_snowing,
),
Model2(
  text: '12:00',
  temp: '34 C',
  iconData: Icons.cloudy_snowing,
),
Model2(
  text: '13:00',
  temp: '34 C',
  iconData: Icons.cloudy_snowing,
),
];

@override
Widget build(BuildContext context) {
return Scaffold(
  backgroundColor: Colors.black,
  body: Column(
    crossAxisAlignment: CrossAxisAlignment.end,
    mainAxisAlignment: MainAxisAlignment.end,
    children: [
      Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: list.map((e) {
            return InkWell(
              onTap: () {
                //change the selected index value to item index
                setState(() {
                  selectedIndex = list.indexOf(e);
                });
              },
              child: Container(
                padding:
                    const EdgeInsets.symmetric(horizontal: 14, vertical: 8),

//to show the decoration when an item is selected
                decoration: selectedIndex == list.indexOf(e)
                    ? BoxDecoration(
                        borderRadius: const BorderRadius.only(
                            topLeft: Radius.circular(14),
                            topRight: Radius.circular(14)),
                        gradient: LinearGradient(
                            colors: [
                              Colors.white.withOpacity(0.5),
                              Colors.transparent,
                            ],
                            begin: Alignment.topCenter,
                            end: Alignment.bottomCenter))
                    : null,
                child: Column(
                  children: [
                    Text(
                      e.text,
                      style: const TextStyle(color: Colors.white),
                    ),
                    Icon(
                      e.iconData,
                      color: Colors.white,
                    ),
                    Text(
                      e.temp,
                      style: const TextStyle(color: Colors.white),
                    ),
                    if (selectedIndex == list.indexOf(e))
                      const SizedBox(
                        height: 40,
                      ),
                  ],
                ),
              ),
            );
          }).toList())
    ],
  ),
);
}
}