CODEWITHSUNDEEP
flutterlistviewflutter-layoutheight
chxru
chxru

Reputation: 581

Flutter: Auto Vertical Height in ListView.builder

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?

Upvotes: 23

Views: 54032

Answers (7)

Shadab Hashmi
Shadab Hashmi

Reputation: 377

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

Upvotes: 1

Vipin Krishna
Vipin Krishna

Reputation: 365

 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

Upvotes: 1

Samuel Nonoka
Samuel Nonoka

Reputation: 81

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

Upvotes: 0

Mohd
Mohd

Reputation: 937

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

Upvotes: 48

Muhammad Islam Taufikurahman
Muhammad Islam Taufikurahman

Reputation: 248

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

Upvotes: 12

BogdanP
BogdanP

Reputation: 1

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

Upvotes: 0

nairda firmware
nairda firmware

Reputation: 21

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

Upvotes: 2

Related Questions