Search code examples
flutterlistviewdraggableflutter-showmodalbottomsheet

My modalBottomSheet is draggable just on edges


I have a DraggableScrollableSheet inside of a showModalBottomSheet builder. I have set isDismissible: true for modal sheet but my widget is draggable just on edges. That is because I have a ListView inside of DraggableScrollableSheet.

What I should do for when the list is overscrolled on top the drag to start?

Here goes my code:

 showModalBottomSheet<void>(
      context: context,
      isScrollControlled: true,
      isDismissible: true,
      backgroundColor: Colors.transparent,
      enableDrag: true,
      builder: (BuildContext context) {
        return StackedSheet(
          backgroundColor: backgroundColor,
          onBackgroundColor: onBackgroundColor,
          padding: padding,
          minChildSize: minChildSize,
          maxChildSize: maxChildSize,
          onClose: onClose,
          child: SafeArea(
            top: false,
            child: child,
          ),
        );
      },
    );

Where StackedSheet is:

LayoutBuilder(
        builder: (context, constraints) {
          return DraggableScrollableSheet(
            key: Key('$_childSize'),
            initialChildSize: min(_childSize, widget.maxChildSize),
            minChildSize:
                min(_childSize - _childSize * 0.2, widget.minChildSize),
            maxChildSize: min(_childSize, widget.maxChildSize),
            expand: false,
            builder: (
              BuildContext context,
              ScrollController scrollController,
            ) {
              return ListView.separated( ...blah blah)
           }

Here is a GIF:

Here is a GIF:

Instead of bouncing, my desire is to start to be dragged down.


Solution

  • In my opinion you can use scroll controller to dismiss bottomsheet on reaching top something like this

    if (_controller.offset <= _controller.position.minScrollExtent &&
                !_controller.position.outOfRange) {
               .....
               ..... 
             );
           }
    

    You can stop list from bouncing at top using shrinkWrap=true in Listview. And to dismiss the bottomsheet you can refer to this stackoverflow post

    I haven't tried this code but hopefully it will help you in some way.

    Also, I think it will look good if you will keep it the way it is now by inserting a little "-" at top on right side of "X" ,on which user can touch to slide down.