Flutter: ModalBottomSheet with ListView.separated() size to content

Question

I'm using ListView.separated() inside in the builder of showModalBottomSheet() . I would like for the BottomSheet to resize based on the number of ListTile widgets displayed.

Here's my code:

showModalBottomSheet(
              context: context,
              backgroundColor: Colors.blueGrey,
              isScrollControlled: false,
              builder: (context) => Wrap(
                children: [
                  ListView.separated(
                    itemCount: lists.length,
                    itemBuilder: (BuildContext context, int index) =>
                        ListTile(
                      title: Text(lists[index].listName),
                    ),
                    separatorBuilder: (BuildContext context, int index) =>
                        Divider(),
                  ),
                ],
              ),
            );

I've tried wrapping the ListView inside a Wrap widget, but I got an error because the child of Wrap doesn't have a set height. Any tips?

Answer 1

You can do this by using the shrinkWrap parameter in the ListView widget.

showModalBottomSheet(
            context: context,
            builder: (context) => ListView.separated(
              shrinkWrap: true,
              itemCount: 4,
              itemBuilder: (BuildContext context, int index) => ListTile(
                title: Text('item $index'),
              ),
              separatorBuilder: (BuildContext context, int index) => Divider(),
            ),
          );