How do you adjust the height of a BottomSheet dynamically in Flutter?

Question

In my showModalBottomSheet, I have a DraggableScrollableSheet with content in it. When I scroll up, I want the content to scroll up dynamically as far as there is content.

But when I scroll up, by default, the content is cut off around halfway down the screen and I keep scrolling: content is cut off and content keeps scrolling

However, when I add isScrollControlled: false, the content will go all the way to the top leaving blank space below which is not what I want: content keeps scrolling up and blank space is underneath content

Here is the code excluding the default cards:

void _showSettingsPanel() {
      showModalBottomSheet<dynamic>(isScrollControlled: false, backgroundColor: Colors.transparent, context: context, builder: (context) {
       return DraggableScrollableSheet(
          builder: (BuildContext context, ScrollController scrollController) {
            return Container(
              color: Colors.blue[100],
              child: ListView(
                controller: scrollController,
                children: const <Widget>[
                  //here would be the cards
                ],
              ),
            );
          },
        );
      });
    }

and including the cards...

    void _showSettingsPanel() {
      showModalBottomSheet<dynamic>(isScrollControlled: false, backgroundColor: Colors.transparent, context: context, builder: (context) {
       
        return DraggableScrollableSheet(
          builder: (BuildContext context, ScrollController scrollController) {
            return Container(
              color: Colors.blue[100],
              child: ListView(
                controller: scrollController,
                children: const <Widget>[
                  Card(child: ListTile(title: Text('One-line ListTile'))),
                  Card(
                    child: ListTile(
                      leading: FlutterLogo(),
                      title: Text('One-line with leading widget'),
                    ),
                  ),
                  Card(
                    child: ListTile(
                      title: Text('One-line with trailing widget'),
                      trailing: Icon(Icons.more_vert),
                    ),
                  ),
                  Card(
                    child: ListTile(
                      leading: FlutterLogo(),
                      title: Text('One-line with both widgets'),
                      trailing: Icon(Icons.more_vert),
                    ),
                  ),
                  Card(
                    child: ListTile(
                      title: Text('One-line dense ListTile'),
                      dense: true,
                    ),
                  ),
                  Card(
                    child: ListTile(
                      leading: FlutterLogo(size: 56.0),
                      title: Text('Two-line ListTile'),
                      subtitle: Text('Here is a second line'),
                      trailing: Icon(Icons.more_vert),
                    ),
                  ),
                  Card(
                    child: ListTile(
                      leading: FlutterLogo(size: 72.0),
                      title: Text('Three-line ListTile'),
                      subtitle: Text(
                          'A sufficiently long subtitle warrants three lines.'
                      ),
                      trailing: Icon(Icons.more_vert),
                      isThreeLine: true,
                    ),
                  ),
                ],
              ),
            );
          },
        );
      });
    }

Once again, is there any way to have the DraggableScrollableSheet dynamically expand up as far as there is content?

Thanks

Answer 1

The default height of the bottomSheet is half of the screen.

To make it dynamic just wrap bottomshet parent widget with Wrap() Widget.

Example:

    showModalBottomSheet(
        backgroundColor: Colors.transparent,
        context: context,
        builder: (context) {
          //Wrap will set hight dynamicaly
          return Wrap(children: [
            Container(),
            Container(),
            Container(),
          ]);
        });