Flutter: DraggableScrollableSheet covers the whole screen when it appears Flutter: DraggableScrollableSheet covers the whole screen when it appears flutter flutter

Flutter: DraggableScrollableSheet covers the whole screen when it appears


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


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


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"