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?

Solution 1

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

Solution 2

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

Solution 3

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

Comments

[lenz]

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

[xahid_rocks]

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

[samthui7]

Many thanks. It works

[Admin]

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.

[Mustafa Max]

This is awesome my friend