In Flutter, why does the DraggableScrollableSheet show blank space when there are less children?

Question

I want the DraggableScrollableSheet to stop moving up when there are less items in the ListView. Instead, blank space is created underneath to fill the entire screen. I can't find any information online.

Image of Problem

Blank space underneath items

Full Code

import 'package:flutter/material.dart';

class DragabbleScrollableSheetDemo extends StatefulWidget {
  @override
  _DragabbleScrollableSheetDemoState createState() =>
      _DragabbleScrollableSheetDemoState();
}

class _DragabbleScrollableSheetDemoState
    extends State<DragabbleScrollableSheetDemo> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      darkTheme: ThemeData.dark(),
      theme: ThemeData(brightness: Brightness.dark),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('DraggableScrollableSheet'),
        ),
        body: Container(
          child: DraggableScrollableSheet(
            initialChildSize: 0.3,
            minChildSize: 0.1,
            maxChildSize: 0.8,
            builder: (BuildContext context, myscrollController) {
              return Container(
                color: Colors.tealAccent[200],
                child: ListView.builder(
                  controller: myscrollController,
                  itemCount: 25,
                  itemBuilder: (BuildContext context, int index) {
                    return ListTile(
                        title: Text(
                      'Dish $index',
                      style: TextStyle(color: Colors.black54),
                    ));
                  },
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

Is there a way to fix this or a better solution to what I am trying to achieve?

Thanks

Answer 1

I know this is a late answer, but hopefully it can help you or someone else.

Just ran into this myself, turns out, I had to add add expand:false to the DraggableScrollableSheet, and then give a shape to the showModalBottomSheet.

Here's what I did, passed to the onLongPress of a GestureDetector:

onLongPress: () => showModalBottomSheet(
                  isScrollControlled: true,
                  shape: const RoundedRectangleBorder(
                    borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(16),
                        topRight: Radius.circular(16)),
                  ),
                  backgroundColor:
                      Theme.of(context).scaffoldBackgroundColor,
                  context: context,
                  builder: (context) {
                    return DraggableScrollableSheet(
                        initialChildSize: 0.5,
                        maxChildSize: 0.9,
                        minChildSize: 0.5,
                        expand: false,
                        builder: (_, controller) => ListView(
                                controller: controller,
                                children: const [
                                 CustomWidget()
                                ]));
                  }),