How to make child items of ListView take all space inside a Container with fixed height in Flutter-CodePudding

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?

CodePudding user response：

add scrollDirection: Axis.horizontal, In your list view

CodePudding user response：

Hey how is everything? I didn't quite understand your idea, but I put YOUR code to work as follows ( Remembering that I did it in the simplest way for you to understand ) in DailyWeatherListCardWidget you replace the code after the return with:

      body: Container(
        width: MediaQuery.of(context).size.width *
            1.0, //significa 100% da horizontal ( 0.9 [90%], 0.8 [80%], 0.6 ... 0.01 )
        height: MediaQuery.of(context).size.height *
            1.0, //significa 100% vertical ( 0.9 [90%], 0.8 [80%], 0.6 ... 0.01 )
        alignment: Alignment.center,
        padding: const EdgeInsets.all(8.0),
        decoration: BoxDecoration(
          color: const Color.fromRGBO(112, 176, 250, 1),
          borderRadius: BorderRadius.circular(20),
        ),
        child: ListView.separated(
          separatorBuilder: ((context, index) => const Divider()),
          itemCount: 7,
          itemBuilder: (context, index) {
            return const DailyWeatherCardWidget();
          },
        ),
      ),
    );

In DailyWeatherCardWidget you replace with:

"Remembering that you can put a SafaArea() encompassing the Container() for it to automatically give the space at the top of the screen"

Container(
        color: Colors.amber,
        width: MediaQuery.of(context).size.width * 1,
        child: Padding(
          padding: const EdgeInsets.all(10.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween, //Alinha totos os itens da Row()
            children: const [
              Text("Day"),
              Icon(
                Icons.water_drop,
                size: 18,
              ),
              Text("50%"),
              Icon(
                Icons.sunny,
                size: 18,
              ),
              Icon(
                Icons.cloud,
                size: 18,
              ),
              Text("29° 20°"),
            ],
          ),
        ));

remembering that it is not recommended to put this much Padding because the widget element Row() can align its children. Now you make the changes you prefer, search for what I put in the code, analyze the difference.

Screenshot of the app working