Are there any Modal alternatives to BottomSheet?

2,018 views
Skip to first unread message

ez...@sightworks.com

unread,
Mar 16, 2018, 2:43:51 PM3/16/18
to Flutter Dev
The only existing code example for Flutter modals that I've been able to find was this one: 

onTap: (){
showModalBottomSheet<Null>(context: context, builder: (BuildContext context) {
return new Container(
child: new Padding(
padding: const EdgeInsets.all(32.0),
child: new Text('This is the modal bottom sheet. Click anywhere to dismiss.',
textAlign: TextAlign.center,
style: new TextStyle(
color: Theme.of(context).accentColor,
fontSize: 24.0
)
)
)
);
});
}

The problem I've found is that container height on a bottom sheet can't go much past 500.0 px. Are there any existing implementations of full screen modals in Flutter? If not, are there any good hacks for forcing the bottomSheet to display full page? 

A related question: Are pixels the only way to set height and width? I'm used to CSS where I can use VW and VH or percentage values to deal with all screen sizes. Don't seem to be able to do that with this framework. 

I appreciate any help and suggestions!

Eric Seidel

unread,
Mar 16, 2018, 2:51:06 PM3/16/18
to ez...@sightworks.com, Flutter Dev
I believe there are examples in the flutter_gallery of various modal patterns, including:

--
You received this message because you are subscribed to the Google Groups "Flutter Dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

ez...@sightworks.com

unread,
Mar 16, 2018, 4:29:56 PM3/16/18
to Flutter Dev
Thank you Eric, 

Full screen dialogs are what we are looking for, but this code example is pretty dense. Are there any code examples that highlight the barebone requirements for a full-screen-dialog feature? 

Suvadeep Das

unread,
Nov 29, 2018, 2:18:18 AM11/29/18
to Flutter Dev
Hi I have made modifications in the modal bottom sheet and keyboard issue is fixed and also I made it full screen similar to ios Modal over full screen : https://gist.github.com/crimsonsuv/b25d5ebd04236f9be2aa66accba19446

I hope this helps.
Reply all
Reply to author
Forward
0 new messages