Start bottom with fixed and then make it draggable flutter

Question

I want to display a modal bottom sheet at first with a fixed size. Then the user may drag it up to a certain point and down to the fixed sized or to make it disappear, as you will see in the Google Maps app or Spotify app.

Is there a flutter package for that.

showModalBottomSheet<void>(
    context: _scaffoldKey.currentContext!,
    builder: (BuildContext context) {
      return MyBottomSheetComponent();
    },
    clipBehavior: Clip.hardEdge,
    enableDrag: true,
    isScrollControlled: true,
    useSafeArea: true);
}

Answer 1

Yes, you can achieve this by some custom logic. Let's consider the code below:

showModalBottomSheet<void>(
  context: context,
  builder: (BuildContext context) {
    return DraggableScrollableSheet(
      initialChildSize: 0.5,
      minChildSize: 0.1, 
      maxChildSize: 0.9,
      expand: false,
      builder: (BuildContext context, ScrollController scrollController) {
        return Container(
          color: Colors.white,
          child: ListView.builder(
            controller: scrollController,
            itemCount: 25,
            itemBuilder: (BuildContext context, int index) {
              return ListTile(
                title: Text('Item $index'),
              );
            },
          ),
        );
      },
    );
  },
);

You can use the DraggableScrollableSheet widget to create a bottom sheet that can be dragged up and down by the user. There are parameters like, initialChildSize, minChildSize and, maxChildSize which you can set.

The expand parameter here determines whether the sheet should expand to its maximum size when dragged upwards. If set to true, the sheet will expand; if set to false, the sheet will remain at the maximum size until it's dismissed.