How to use Flutter to build a bottom sheet widget which is able to drag up to full screen?

Question

I want to build a bottom sheet widget which is able to drag up to full screen.

Can anyone tell me how to do this?

Google map has a widget is able to do this. Here is the screenshot (check attached image):

Before drag up:

After drag up:

Answer 1

Use the DraggableBottomSheet widget with the Stack widget:

Here's the gist for the entire page in this^ GIF, or try the Codepen.

Here's the structure of the entire page:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          CustomGoogleMap(),
          CustomHeader(),
          DraggableScrollableSheet(
            initialChildSize: 0.30,
            minChildSize: 0.15,
            builder: (BuildContext context, ScrollController scrollController) {
              return SingleChildScrollView(
                controller: scrollController,
                child: CustomScrollViewContent(),
              );
            },
          ),
        ],
      ),
    );
  }

In the Stack:
- The Google map is the lower most layer.
- The Header (search field + horizontally scrolling chips) is above the map.
- The DraggableBottomSheet is above the Header.

Some useful parameters as defined in draggable_scrollable_sheet.dart:

  /// The initial fractional value of the parent container's height to use when
  /// displaying the widget.
  ///
  /// The default value is `0.5`.
  final double initialChildSize;

  /// The minimum fractional value of the parent container's height to use when
  /// displaying the widget.
  ///
  /// The default value is `0.25`.
  final double minChildSize;

  /// The maximum fractional value of the parent container's height to use when
  /// displaying the widget.
  ///
  /// The default value is `1.0`.
  final double maxChildSize;

Answer 2

Neither the modal nor the persistent bottomsheets can be dragged into view. The persistent bottomsheet must be triggered open (e.g., by pressing a button) & THEN it may be dragged up & down until finally out of view. I wish there was an option to allow it to be dragged into view...

Rubber should meet your needs; I gave it a try but it always freaks out when I call setstate (so a no go for me)... Let me know if you have the same problems.

Answer 3

You can show DraggableScrollableSheet as an Overlay. Use the below function and pass a child widget that you want to show inside the bottomsheet.

 void openDraggableBottomSheet({required BuildContext context, required Widget child}) {
    OverlayState? overlayState = Overlay.of(context);
    OverlayEntry overlayEntry = OverlayEntry(
      builder: (context) {
        return DraggableScrollableSheet(
          initialChildSize: 0.30,
          minChildSize: 0,
          maxChildSize: 0.9,
          snapSizes: const [0.30, 0.9],
          snap: true,
          builder: (BuildContext context, ScrollController scrollController) {
            return SingleChildScrollView(
              controller: scrollController,
              child: child,
            );
          },
        );
      },
    );
    // inserting overlay entry
    overlayState.insert(overlayEntry);
  }