Flutter: DraggableScrollableSheet covers the whole screen when it appears

Question

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:

Why does it cover the whole screen?

Solution 1

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,
      ....
    );
  }
}

Solution 2

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,
                ),
              );
            },
          ),
        );
      },
    );
  }
}

Solution 3

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"

Comments

[Isaak]

Executing this code gives me a sheet that covers half of the screen. The space which is not occupied from the blue container is white. Is there a way to make the sheets size adjust to its childs size? I don't understand why having another Buildcontext when extracting functionality to another widget (ChooseTimeDialog) is a bad thing. Did I understand correctly that its better to assign the widget to a variable?

[William Terrill]

I updated my dartpad because I realized the one I posted was crappy. I'll use that to further the discussion. (here it is: dartpad.dev/5850ec2b79564bb28f361eeed2b383ec)

[William Terrill]

Do you want the blue sheet to take the full space of the bottomModal? The dual context is my best guess as to why the bottomModal was taking up all the space, since it would assume that the entire canvas is available. It's not a bad thing at all, usually.. to create another widget, but in this case, showBottomModalSheet is a function, so it needs to be called. It's not necessarily better to use a variable, I just recommended it if you wanted to keep that code separate.

[Isaak]

Thanks... the dartpad displays the problem I described in the last comment.

[William Terrill]

I don't understand the problem you're seeing. Could you explain more, please?

[William Terrill]

I was wrong about the context thing... I read the documentation for the widget, and isScrollControlled: true allows the bottomModal to take up the entire height. You can also see examples here: stackoverflow.com/questions/53311553/…

[William Terrill]

Did more research... take a look at this dartpad, and tell me if it's what you're looking for. (I'm still not entirely sure) dartpad.dev/d128484bf039a78dfebf8023949741ea

[Isaak]

Thank you very much for your research. I was looking for a way to display a DraggableScrollableSheet that takes up a custom height. So a sheet that appears on Press and can then be scrolled up to see more of its content. Its not a problem that concerns me anymore as I found that for my use case a fixed height Bottomsheet like you display in the latest dartpad does the trick for me.

[William Terrill]

i’m glad to hear it!

[Florin Oiță]

This helped me achieved the desired outcome, thank you! I did not notice the "expand" attribute and it was causing me a lot of trouble