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

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

Solution 1:^[1]

I think if you use this

 crossAxisAlignment: CrossAxisAlignment.stretch,

instead of this

crossAxisAlignment: CrossAxisAlignment.start

then it will work.

Solution 2:^[2]

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.

Solution 3:^[3]

ListView will take all the available space.

if scrollDirection set to Axis.horizontal it will take all the available height or if it set to verticle then it will take all available width. It's the default behavior.

You can use SingleChildScrollView with Row.

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	sajjadio
Solution 2
Solution 3	Manish

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]