Flutter: Auto Vertical Height in ListView.builder

Question

I'm trying to show some Cards with the ListView.builder
I want to set the heights of each card automatically to the height of its children content

class HomePage extends StatelessWidget {
 Widget _buildListItems(BuildContext context, DocumentSnapshot document) {
  return Center(
   child: Card(
    child: Column(
      children: <Widget>[
        ListTile(
          title: Text(document['title']),
          subtitle: Text(document['subtitle']),
        ),
        Expanded(
          child: Container(
            padding: EdgeInsets.all(20.0),
            child: Text(
              document['summary'],
              softWrap: true,
            ),
          ),
        )
      ],
    ),
  ),
);
}


@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text('Title'),
    centerTitle: true,
  ),
  body: StreamBuilder(
    stream: Firestore.instance.collection('randomDB').snapshots(),
    builder: (context, snapshot) {
      if (!snapshot.hasData) return const Text('Loading...');
      return ListView.builder(
        itemExtent: 225.0,
        itemCount: snapshot.data.documents.length,
        itemBuilder: (context, index) =>
            _buildListItems(context, snapshot.data.documents[index]),
      );
    },
  ),
}

When document['summary'] is too long, it makes the text overflow through the card widget. For this time all I do is increase itemExtent in ListView.Builder

Is there a way to set the heights of ListView dynamically?

Mohd · Accepted Answer · 2021-11-01 04:31:56Z

48

Just add shrinkWrap: true.

& Remove itemExtent: 225.0,

ListView.builder(
  shrinkWrap: true,
  itemCount:  snapshot.data.documents.length,
  itemBuilder: (context, index) =>
        _buildListItems(context, snapshot.data.documents[index]),
 },
),

edited Nov 1, 2021 at 4:31

answered Oct 27, 2020 at 4:55

Mohd

94710 silver badges12 bronze badges

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

3 Comments

lenz Over a year ago

this works great and is probably the easiest most flexible solution to setting using ListView.builder in a Column. Thanks

xahid_rocks Over a year ago

One of the best and working solution, saves a lots of time and "Space"! thanks.

Mustafa Max Over a year ago

This is awesome my friend

Muhammad Islam Taufikurahman · Accepted Answer · 2021-04-17 11:44:00Z

12

I believe the column has something called the mainAxisSize property

Column(
  mainAxisSize: MainAxisSize.min,
)

MainAxisSize.min will make the Column size stretch to the minimum size of the children. Opposite to it is MainAxisSize.max that will stretch to the maximum size that it can achieve.

But I haven't tested it yet tho. Hope it will help

edited Apr 17, 2021 at 11:44

user10563627

answered Jan 3, 2019 at 7:21

Muhammad Islam Taufikurahman

2483 silver badges11 bronze badges

Comments

Brian Tompsett - 汤莱恩 · Accepted Answer · 2019-06-02 22:17:44Z

2

you can use my implementation

Widget adapter(List<String> strings){
    List<Widget> widgets= List<Widget>();
    for(int i=0;i<strings.length;i++){
      widgets.add(Text(strings[i]));
    }

    Row row=Row(
            children: <Widget>[
              Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.start,
                children:widgets
              ),
            ],
          );
    return row;
  }

This example displays a list of strings

edited Jun 2, 2019 at 22:17

Brian Tompsett - 汤莱恩

5,92772 gold badges63 silver badges135 bronze badges

answered Jun 2, 2019 at 21:48

nairda firmware

211 bronze badge

Comments

Vipin Krishna · Accepted Answer · 2023-01-26 13:47:26Z

 ListView.builder(
                        padding: EdgeInsets.zero,
                        shrinkWrap: true,
                        itemCount: provider.products.length,
                        itemBuilder: (BuildContext context, int index) {
                          return InkWell(
                            onTap: () => viewProductDetail(provider.products[index]),
                            child: const OrderDetailsWidgets().orderedProducts(
                              title: provider.products[index].itemName ?? '',
                              price: '---',
                              img: provider.products[index].productImage ??
                                  'request-list-image.png',
                              context: context,
                            ),
                          );
                        },
                      ),

adding zero padding for listview.builder reduced the height

Shadab Hashmi · Accepted Answer · 2023-09-04 05:32:48Z

1

Just set shrinkWrap: true, the listview will automatically take the required height.

answered Sep 4, 2023 at 5:32

Shadab Hashmi

3854 silver badges10 bronze badges

Comments

ysf · Accepted Answer · 2019-07-12 16:02:23Z

0

Just don't specify the itemExtent parameter.

Or just give it a null value, instead of 225.0

This way, the child will get its exact needed height into the ListView

edited Jul 12, 2019 at 16:02

ysf

4,9023 gold badges31 silver badges32 bronze badges

answered Jul 12, 2019 at 15:41

BogdanP

13 bronze badges

Comments

Samuel Nonoka · Accepted Answer · 2022-01-26 16:04:39Z

0

Try

class HomePage extends StatelessWidget {
 Widget _buildListItems(BuildContext context, DocumentSnapshot document) {
  return Center(
   child: Card(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Flexible(
          ListTile(
          title: Text(document['title']),
          subtitle: Text(document['subtitle']),
        ),
        ),
        Expanded(
          child: Container(
            padding: EdgeInsets.all(20.0),
            child: Text(
              document['summary'],
              softWrap: true,
            ),
          ),
        )
      ],
    ),
  ),
);
}

answered Jan 26, 2022 at 16:04

Samuel Nonoka

811 silver badge3 bronze badges

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Flutter: Auto Vertical Height in ListView.builder

7 Answers 7

3 Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related