How to make Flutter ListView height same as children height(dynamic)-CodePudding

I want to make the ListView have a same height with its content,
but always got Horizontal viewport was given unbounded height Errors
I tried to defined a SizedBox with a height as parent of the ListView, but it seems weird
All of the items was going strecth down
How can i defined this ListView without defined a height (dynamically following the content height)?
The result before using listview
After using ListView(Weird look）

There is the code :

Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              ...OTHER CHILD,
              ListView(
                scrollDirection: Axis.horizontal,
                children: [
                  HorizontalList(),
                  SizedBox(width: 10),
                  HorizontalList(),
                  SizedBox(width: 10),
                  HorizontalList(),
                ],
              ),
            ],
          ),

There is the Child Component ：

Container(
      width: 260,
      height: 210,
      decoration: BoxDecoration(
        color: whiteColor,
        borderRadius: BorderRadius.all(Radius.circular(14)),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.5),
            spreadRadius: 1,
            blurRadius: 5,
            offset: Offset(0, 0),
          ),
        ],
      ),
      child: Column(
        children: [
          ...OTHER CHILD,
        ],
      ),
    );

CodePudding user response：

I think if you use this

 crossAxisAlignment: CrossAxisAlignment.stretch,

instead of this

crossAxisAlignment: CrossAxisAlignment.start

then it will work.

CodePudding user response：

Set shrinkWrap: true in ListView and wrap ListView with Flexible widget.


Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              ...OTHER CHILD,
              Flexible(
              child: ListView(
                shrinkWrap: true,
                scrollDirection: Axis.horizontal,
                children: [
                  HorizontalList(),
                  SizedBox(width: 10),
                  HorizontalList(),
                  SizedBox(width: 10),
                  HorizontalList(),
                ],
              ),
             ),
            ],
          ),

This way ListView will only take as much space as it's children need.