Flutter modal bottom sheet full height

I was trying things out with ModalBottomSheet. How can I achieve 90% height of device screen size for modal sheet. I did mediaquery but still it does not give me more than half of the screen size. How do I solve this?

Here is the code:

class _TestFileState extends State<TestFile> {
  modalSheet() {
    showModalBottomSheet(
        context: context,
        backgroundColor: Colors.white,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(15.0), topRight: Radius.circular(15.0)),
        ),
        builder: (context) {
          return Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              ListTile(
                leading: Icon(Icons.email),
                title: Text('Send email'),
                onTap: () {
                  print('Send email');
                },
              ),
              ListTile(
                leading: Icon(Icons.phone),
                title: Text('Call phone'),
                onTap: () {
                  print('Call phone');
                },
              ),
            ],
          );
        });
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Center(child: Text('Testing Modal Sheet')),
        ),
        body: Center(
          child: InkWell(
            onTap: () {
              modalSheet();
            },
            child: Container(
                color: Colors.indigo,
                height: 40,
                width: 100,
                child: Center(
                  child: Text(
                    'Click Me',
                    style: TextStyle(color: Colors.white),
                  ),
                )),
          ),
        ),
      ),
    );
  }
}

Here is the output:

enter image description here

2 answers

  • answered 2020-09-24 15:35 Felipe Augusto

    As I remember that's a restriction about the native implementation of Flutter modal bottom sheet.

    You can use the package modal_bottom_sheet to achieve that.

    Install:

    dependencies:
      modal_bottom_sheet: ^0.2.2
    

    And minimal example:

    showMaterialModalBottomSheet(
      context: context,
      expand: true, //this param expands full screen
      builder: (context, scrollController) => Container(),
    )
    

  • answered 2020-09-24 15:40 Khadga shrestha

    you have to pass isScrollControlled: true and use mediaquery as given below

    showModalBottomSheet(
                isScrollControlled: true,
                context: context,
                builder: (context) {
                  return Container(
                    height: MediaQuery.of(context).size.height * 0.5,
                    color: Colors.red,
                    //height: MediaQuery.of(context).size.height,
                  );
                });