I am having trouble making all my items inside a ListView.separated fit all the space available inside a Container, each with the same height.
class DailyWeatherListCardWidget extends StatelessWidget {
const DailyWeatherListCardWidget({super.key});
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
height: 300,
alignment: Alignment.center,
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: const Color.fromRGBO(112, 176, 250, 1),
borderRadius: BorderRadius.circular(20),
),
child: Column(
children: [
ListView.separated(
separatorBuilder: ((context, index) => const Divider()),
itemCount: 7,
itemBuilder: (context, index) {
return DailyWeatherCardWidget();
},
),
],
),
);
}
}
class DailyWeatherCardWidget extends StatelessWidget {
const DailyWeatherCardWidget({super.key});
@override
Widget build(BuildContext context) {
return SizedBox(
child: Row(
children: const [
Expanded(
child: Padding(
padding: EdgeInsets.only(left: 12.0),
child: Text("Day"),
),
),
Icon(
Icons.water_drop,
size: 18,
),
Padding(
padding: EdgeInsets.only(right: 12.0),
child: Text("50%"),
),
Padding(
padding: EdgeInsets.only(right: 12.0),
child: Icon(
Icons.sunny,
size: 18,
),
),
Padding(
padding: EdgeInsets.only(right: 12.0),
child: Icon(
Icons.cloud,
size: 18,
),
),
Padding(
padding: EdgeInsets.only(right: 12.0),
child: Text("29° 20°"),
),
],
),
);
}
}
This is my code. I want the items generated in ListView.separated to be of the same size and equally displayed inside the Container, occupying all its size, but I dunno what I can do. I tried a lot of differente methods, like wrapping ListView.separated in a Expanded widget, in a Flexible Widget. Does anyone know how I can achieve it?
