how to set showModalBottomSheet width in flutter
762
Solution 1
I solved this problem by putting a container inside a container.
the parent container has a transparent color, while the child has solid color and padding.
BUT STILL i didn't figure out how to blur the background yet.
this is the code:
showModalBottomSheet(
context: context,
backgroundColor: Colors.transparent,
builder: (BuildContext bc) {
return Container(
height: SizeConfig.screenHeight * 0.6,
child: Padding(
padding: EdgeInsets.only(left: SizeConfig.screenWidth * 0.4),
child: Container(
child: SingleChildScrollView(
child:
Padding(
padding: EdgeInsets.only(
top: SizeConfig.blockSizeVertical * 1.5),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
],
),
),
),
),
),
);
});
Solution 2
Use constraints property in showModalBottomSheet.
showModalBottomSheet(
context: context,
constraints: BoxConstraints(
maxWidth: 600,
),
builder: ...
),
Author by
anwar
Updated on December 27, 2022Comments
-
anwar over 1 year
I have the design(shown in the photo) and I'm using showModalBottomSheet but when I set the width, it doesn't change and stay as screen width, so I have a couple of questions:
1-how to set a width to showModalBottomSheet
2-is there an alternative to showModalBottomSheet for this kind of bottom menu's
3-how to blur the background as it shows in the photoshowModalBottomSheet<void>( context: context, builder: (BuildContext context) { return Container( height: SizeConfig.screenHeight * 0.6, width: 30, color: Colors.red, child: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, mainAxisSize: MainAxisSize.min, children: <Widget>[ const Text('Modal BottomSheet'), ElevatedButton( child: const Text('Close BottomSheet'), onPressed: () => Navigator.pop(context), ) ], ), ), ); }, );