Flutter dynamic height of ListView

Question

I am developing a Flutter application and I want to dynamically adjust the height of the ListView.

I want the list to have a maximum height of 200. If the height is more than that, user will have to scroll to reach the bottom. If height is below 200, it will take only as much space as needed.

Preview of application: Screenshot. As you can see Restaurants nearby is pushed to the very bottom of the page. I want the ListView to only take height of 200 or less so that the content below isn't pushed to the bottom.

Here is my current code:

@override
Widget build(BuildContext context) {
  return Container(
    padding: EdgeInsets.all(10.0),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(
          'Restaurants nearby',
          style: TextStyle(
            fontSize: 20.0,
            fontWeight: FontWeight.bold,
          ),
        ),
        Divider(),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              child: Text('Enter restaurant manually'),
              onPressed: () {
                print('Button pressed');
              },
            ),
          ],
        ),
        Flexible(
          child: ListView.builder(
            itemBuilder: (BuildContext context, int index) {
              return ListTile(
                leading: CircleAvatar(
                  backgroundColor: Colors.cyan,
                ),
                title: Text('Test restaurant'),
                subtitle: Text('80m'),
              );
            },
            itemCount: 15,
          ),
        ),
        Text(
          'Restaurants nearby',
          style: TextStyle(
            fontSize: 20.0,
            fontWeight: FontWeight.bold,
          ),
        ),
      ],
    ),
  );
}

Hi @Bill, Did you resolve this issue?

Sinh Phan
– Sinh Phan

2021-11-25 03:17:00 +00:00
Commented Nov 25, 2021 at 3:17 — Sinh Phan
– Sinh Phan, Commented Nov 25, 2021 at 3:17

Olcay Ertaş · Accepted Answer · 2020-03-09 10:55:44Z

40

You are using Flexible widget, that's why your ListView expands. You have to change Flexible to ConstrainedBox and add shrinkWrap: true to your ListView.

ConstrainedBox(
  constraints: BoxConstraints(maxHeight: 200, minHeight: 56.0),
  child: ListView.builder(
    shrinkWrap: true,
      itemBuilder: (BuildContext context, int index) {
        return ListTile(
          leading: CircleAvatar(
            backgroundColor: Colors.cyan,
          ),
          title: Text('Test restaurant'),
          subtitle: Text('80m'),
        );
      },
    itemCount: 15,
  ),
),

More info here: https://api.flutter.dev/flutter/widgets/ConstrainedBox-class.html

edited Mar 9, 2020 at 10:55

Olcay Ertaş

6,2648 gold badges82 silver badges116 bronze badges

answered Jun 23, 2019 at 4:49

diegoveloper

104k25 gold badges253 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bill Over a year ago

The height is not dynamic in this case. If ListView has height less than 200, then SizedBox will still take height of 200. I don't want that. I want to have height automatically adjusted based on the height of the list, but not more than 200. If it is more than 200, then user has to scroll to reach the bottom of ListView.

Apoleo Over a year ago

ConstrainedBox doesn't answer the question, LimitedBox does

Andrii Turkovskyi · Accepted Answer · 2019-06-26 06:38:30Z

22

You can use LimitedBox

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    Text(...),
    Divider(),
    Row(...),
    LimitedBox(
      maxHeight: 200.0,
      child: ListView.builder(...),
    ),
    Text(...),
  ],
),

Recommended solution in case when the incoming constraints are unbounded

answered Jun 26, 2019 at 6:38

Andrii Turkovskyi

29.6k19 gold badges99 silver badges108 bronze badges

Comments

Ahmed Mahran · Accepted Answer · 2020-05-03 16:05:27Z

Consider wrapping the ListView into this

LimitedBox(
  maxHeight: 200,
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      Flexible(
        child: ListView.builder(
          shrinkWrap: true,
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
              leading: CircleAvatar(
                backgroundColor: Colors.cyan,
              ),
              title: Text('Test restaurant'),
              subtitle: Text('80m'),
            );
          },
          itemCount: _itemsCount,
        ),
      ),
    ]
  )
),

Note that:

shrinkWrap of ListView is set to true
mainAxisSize of Column is set to MainAxisSize.min
maxHeight of LimitedBox is set to 200

A complete snippet:

import 'package:flutter/material.dart';

class DebugWidget extends StatefulWidget {
  @override
  _DebugWidgetState createState() => _DebugWidgetState();
}
class _DebugWidgetState extends State<DebugWidget> {
  int _itemsCount = 1;

  @override
  Widget build(BuildContext context) {
    Widget child = Container(
      padding: EdgeInsets.all(10.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            'Restaurants nearby',
            style: TextStyle(
              fontSize: 20.0,
              fontWeight: FontWeight.bold,
            ),
          ),
          Divider(),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              RaisedButton(
                child: Text('Enter restaurant manually'),
                onPressed: () {
                  print('Button pressed');
                },
              ),
              RaisedButton(
                child: Text('+1'),
                onPressed: () {
                  setState(() {
                    _itemsCount += 1;
                  });
                },
              ),
              RaisedButton(
                child: Text('-1'),
                onPressed: () {
                  setState(() {
                    _itemsCount -= 1;
                  });
                },
              ),
            ],
          ),
          LimitedBox(
            maxHeight: 200,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Flexible(
                  child: ListView.builder(
                    shrinkWrap: true,
                    itemBuilder: (BuildContext context, int index) {
                      return ListTile(
                        leading: CircleAvatar(
                          backgroundColor: Colors.cyan,
                        ),
                        title: Text('Test restaurant'),
                        subtitle: Text('80m'),
                      );
                    },
                    itemCount: _itemsCount,
                  ),
                ),
              ]
            )
          ),
          Text(
            'Restaurants nearby',
            style: TextStyle(
              fontSize: 20.0,
              fontWeight: FontWeight.bold,
            ),
          ),
        ],
      ),
    );

    return Scaffold(
      body: child,
    );
  }
}

Payam Zahedi · Accepted Answer · 2020-04-22 15:53:32Z

6

I found a solution to this problem. you should wrap your ListView with LimittedBox or ConstraintBox and give them maxHeight and set shrinkWrap property of ListView to true. the solution would be something like this.

LimitedBox(
          maxHeight: 200,
          child: ListView.builder(
            shrinkWrap: true,
            itemBuilder: (BuildContext context, int index) {
              return ListTile(
                leading: CircleAvatar(
                  backgroundColor: Colors.cyan,
                ),
                title: Text('Test restaurant'),
                subtitle: Text('80m'),
              );
            },
            itemCount: 15,
          ),
        ),

answered Apr 22, 2020 at 15:53

Payam Zahedi

8551 gold badge7 silver badges20 bronze badges

Comments

Stefan Poppe · Accepted Answer · 2022-07-18 20:16:54Z

I see that this question has never been answered only with giving a fixed height, so here is what works for me.

For some reason if you set the shrinkwrap to true it doesn't look like it is working but it does, the problem is in the padding settings of the ListView, set the padding to edgeinstets.zero. That fixes it for me.

Wrap inside a Flexible
ShrinkWrap true
Padding, zero
and if needed the column to MainAxisSize.min.

Hope it helps some people.

Example of my code:

Flexible(
                  child: Container(
                    decoration: BStyles.cardDecoration1,
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          const Text(
                            'PRODUCTION TASKS',
                          ),
                          const SizedBox(
                            height: textVerticalSpacing,
                          ),
                          Flexible(
                            child: ListView.builder(
                              itemCount: recentTasks.length,
                              padding: EdgeInsets.zero,
                              physics: const NeverScrollableScrollPhysics(),
                              shrinkWrap: true,
                              itemBuilder: (BuildContext context, int index) {
                                return TaskCard(
                                  task: recentTasks[index],
                                  widthInfo: MediaQuery.of(context).size.width * 0.6,
                                );
                              },
                            ),
                          ),
                          const SizedBox(
                            height: itemSpacing,
                          ),
                          Align(
                            alignment: Alignment.centerRight,
                            child: InkWell(
                              onTap: () { },
                              child: const Text(
                                'View more',
                              ),
                            ),
                          ),
                          const SizedBox(
                            height: textVerticalSpacing,
                          ),
                        ],
                      ),
                    ),
                  ),
                ),

Dmitry Garazhny · Accepted Answer · 2019-08-04 06:30:18Z

1

ConstrainedBox(
  constraints: BoxConstraints(maxHeight: 200.0),
  child: [your child here],
)

This make your child's height not bigger than 200.0

edited Aug 4, 2019 at 6:30

answered Jun 23, 2019 at 16:25

Dmitry Garazhny

3743 silver badges12 bronze badges

1 Comment

Jigar Over a year ago

If we define minHeight then, how it restricts the maxHeight ?

Stefan S · Accepted Answer · 2023-03-03 01:12:16Z

0

What was preventing mine from sizing dynamically was having it inside a Scaffold. Once I removed the Scaffold it worked. I didn't have a maximum height requirement for mine so to make it size dynamically all I had to do was set shrinkWrap to true and put it inside a Flexible widget. eg.

Column(
  children: [
    Flexible(
      ListView.separated(shrinkWrap: true, ...)
    )
  ]
)

answered Mar 3, 2023 at 1:12

Stefan S

74110 silver badges13 bronze badges

Comments

Łukasz Garczynski · Accepted Answer · 2020-06-22 16:40:32Z

-1

You can always size the ListView container as % of the viewport (assuming of course that the other widgets also are sized in the same manner):

return Container(
      height: MediaQuery.of(context).size.height * 0.75,
      child: ListView.builder(
        itemBuilder: (ctx, index) {
          return Card(...

answered Jun 22, 2020 at 16:40

Łukasz Garczynski

3773 silver badges11 bronze badges

Collectives™ on Stack Overflow

Flutter dynamic height of ListView

8 Answers 8

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related