CODEWITHSUNDEEP
flutterflutter-layout
Braj
Braj

Reputation: 626

How to show margin on left, right and bottom of showModalBottomSheet?

For the showModalBottomSheet i want to display margin around it. Mainly left and right. SO that it will look separated from the screen sides. How to achieve that. Also If i want to provide margin at the bottom, how to achieve that. Is there any other widget which provides the similar behavior as modalbottomsheet but with the margins?

Upvotes: 5

Views: 10469

Answers (3)

Muhammad Adil
Muhammad Adil

Reputation: 4668

The simplest way to do is using constraints like here

 showModalBottomSheet(        
        context: context,
        constraints: BoxConstraints(
          maxWidth: MediaQuery.of(context).size.width - 40, // here increase or decrease in width
        ),
        builder: (context) {
          return BottomSheetContent();
        });

Upvotes: 4

Rishabh
Rishabh

Reputation: 129

You can try this,It worked for me.

Get.bottomSheet(
    new Container(
    //height: 150,
    color: Colors.white,
    margin: EdgeInsets.all(10),
    child: Wrap(
    children: [
        ListTile(
        title: Text('title',
            textAlign: TextAlign.center),
        ),
        Divider(),
        ListTile(
        title: Text('title',
            textAlign: TextAlign.center),
        ),
        Divider(thickness: 9),
        ListTile(
        title: Text('title',
            textAlign: TextAlign.center),
        shape: RoundedRectangleBorder(
            borderRadius:
                BorderRadius.horizontal()),
        ),
    ],
    ),
));

The result:

Result]

Upvotes: 2

Vinz
Vinz

Reputation: 240

with flutter you can use any widget Here is an example

_showModalBottomSheetCustom(BuildContext context) {
  showModalBottomSheet<void>(
    context: context,
    builder: (BuildContext context) {
      return Container(
         margin: EdgeInsets.symmetric(horizontal: 3),
         child: ...
      );
    }
  );
}

EDIT

The margin is between the modal and the child, to "see" it, insert the transparent color on the modal

_showModalBottomSheetCustom(BuildContext context) {
  showModalBottomSheet<void>(
    context: context,
    backgroundColor: Colors.transparent,
    builder: (BuildContext context) {
      return Container(
         color: Colors.white,
         margin: EdgeInsets.symmetric(horizontal: 30),
         child: ...
      );
    }
  );
}

Upvotes: 8

Related Questions