Search code examples
flutterscrollcontainersheightfixed

Flutter: Scrollable Column child inside a fixed height Container

I have several containiers inside a ListView which will result in a scrollable content within a page. Each container has a Column as child and within the Column I have a title and a divider, then the actual content.

I want one of the container to be something like:

Title
--------- (divider)
Scrollable content (most likely a ListView)

What I have so far:

Container(
    height: 250,
    child: Column(children: <Widget>[
        Text('Title'),
        Divider(),
        SingleChildScrollView(
            child: ListView.builder(
                shrinkWrap: true,
                itemCount: 15,
                itemBuilder: (BuildContext context, int index) {
                    return Text('abc');
                }
            )
        )
    ]
)

The thing is that I want the container to have a specific height, but I get an overflow pixel error.

enter image description here

Solution

  • Wrap your ListView with Expanded. Remove your SingleChildScrollView as ListView has its own scrolling behaviour. Try as follows:

    Container(
height: 250,
child: Column(children: <Widget>[
    Text('Title'),
    Divider(),
    Expanded(
      
        child: ListView.builder(
            shrinkWrap: true,
            itemCount: 15,
            itemBuilder: (BuildContext context, int index) {
                return Text('abc');
            }
        ),
    
    )
]
))