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?

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

Answer 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

Answer 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