Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to set showModalBottomSheet to full height?

Tags:

flutter

dart

I use showRoundedModalBottomSheet, how can I adjust this modal height till the appbar?

enter image description here

like image 949
RIFAL Avatar asked Nov 15 '18 02:11

RIFAL


People also ask

How can I increase the height of my bottomSheet?

You can use a Column Inside a SingleChildScrollView to dynamically change the height of the bottom sheet and also it gets scrollable once it exceeds the available max height, make sure the isScrollControlled is set to true, and for the border-radius the shape property will help you add the borderRadius to the ...

How do you use the bottom sheet in flutter?

How To Display Bottom Sheet In Flutter ? To display a general bottom sheet we have to use bottomSheet property of scaffold widget. return Scaffold( appBar: AppBar( title: Text("Flutter Bottom Sheet"), ), body:Container(), bottomSheet: BottomSheet(), );


Video Answer


2 Answers

[Update]

In showModalBottomSheet(...) set the property isScrollControlled:true.

It will make bottomSheet to full height.


[Original answer]

You can Implement the FullScreenDialog instead.

Flutter Gallery app has an example of FullScreenDialog

You can open your Dialog using below code:

Navigator.of(context).push(new MaterialPageRoute<Null>(       builder: (BuildContext context) {         return Dialog();       },     fullscreenDialog: true   )); 

Check this blog post too for more:

Hope it will help you.

like image 136
ibhavikmakwana Avatar answered Sep 22 '22 17:09

ibhavikmakwana


You can control the height by using FractionallySizedBox and setting the isScrollControlled to true.

showModalBottomSheet(     context: context,     isScrollControlled: true,     builder: (context) {       return FractionallySizedBox(         heightFactor: 0.9,         child: Container(),       );     }); 
like image 42
Muhammad Usman Avatar answered Sep 25 '22 17:09

Muhammad Usman