Flutter: DraggableScrollableSheet covers the whole screen when it appears

user_7399286 0
Viewed 8996

On tap I execute the following function which should make a bottom sheet appear in the usual fashion (scrolling up from the bottom):

showModalBottomSheet(
      context: context,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(30.0),
      ),
      isScrollControlled: true,
      isDismissible: true,
      backgroundColor: Colors.white,
      builder: (context) => ChooseTimeDialog(),
    );

The bottom sheet that should appear should be scrollable. The code for it is as follows:

class ChooseTimeDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DraggableScrollableSheet(
      initialChildSize: 0.4,
      minChildSize: 0.2,
      maxChildSize: 0.6,
      builder: (context, scrollController) {
        return SingleChildScrollView(
          controller: scrollController,
          child: Container(
            color: Colors.blue,
            height: 300,
            width: 200,
          ),
        );
      },
    );
  }
}

This is the result that appears on tap:

Result

Why does it cover the whole screen?

bottom-sheet flutter draggable modal-dialog
3 Answers

set isScrollControlled to true of showModalBottomSheet() and set expand to false of DraggableScrollableSheet().

showModalBottomSheet(
   context: context,
   isScrollControlled: true,
   ....
   builder: (context) => ChooseTimeDialog(),
);

class ChooseTimeDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DraggableScrollableSheet(
      expand: false,
      ....
    );
  }
}
user_22183640

The bottomModal is allowed to take up the height of the view when isScrollControlled is set to "True".. setting it to "False" changes this.

I created this dartpad using your code, but removed the widget class for the build method https://dartpad.dev/5850ec2b79564bb28f361eeed2b383ec

If you'd like to separate the code for the modal sheet from the calling function, you should use a variable, not a new class.

Here's the code contained in the dartpad file above:

class MyFloatingActionButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      onPressed: () {
        showModalBottomSheet(
          shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(30.0),
                ),
          isScrollControlled: false,
          isDismissible: true,
          backgroundColor: Colors.white,
          context: context,

          builder: (context) => DraggableScrollableSheet(
            initialChildSize: 0.4,
            minChildSize: 0.2,
            maxChildSize: 0.6,
            builder: (context, scrollController) {
              return SingleChildScrollView(
                controller: scrollController,
                child: Container(
                  color: Colors.blue,
                  height: 300,
                  width: 200,
                ),
              );
            },
          ),
        );
      },
    );
  }
}
user_47707290

I also had this issue, this package is pretty good at solving the problem relating to the question (in my use case at least):

https://pub.dev/packages/sliding_sheet

Specifically this section of the package "As a BottomSheetDialog"

user_118659410
Related