What does the shrinkWrap property do in Listview?

 Usually a ListView (as well as GridView, PageView and CustomScrollView) tries to fill all the available space given by the parent element, even when the list items would require less space.

With shrinkWrap: true, you can change this behavior so that the ListView only occupies the space it needs (it will still scroll when there more items).

Take a look at this example:

import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Center(
          child: Container(
            margin: EdgeInsets.all(32),
            decoration: BoxDecoration(border: Border.all(color: Colors.red)),
            child: ListView(
              shrinkWrap: false,
              children: <Widget>[
                ListTile(title: Text('Item 1')),
                ListTile(title: Text('Item 2')),
                ListTile(title: Text('Item 3')),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

With shrinkWrap: false:

without shrinkWrap

With shrinkWrap: true:

with shrinkWrap

You can use this in AlertDialogs: When there are only a few items, make the dialog as small as possible. When there are many items, fill the screen height and make the list scrollable:

Dialog

Dialog

Post a Comment

Previous Post Next Post

Subscribe Us


Get tutorials, Flutter news and other exclusive content delivered to your inbox. Join 1000+ growth-oriented Flutter developers subscribed to the newsletter

100% value, 0% spam. Unsubscribe anytime