I'm trying have the modal have spacing on the sides as compared to it taking up the entire width but I'm having a hard time finding a solution with this package as it doesn't seem to have a width parameter that I can work with.

Current result Desired result

Notice how on the desired result, there is spacing between the sides of the modal and the device edges.

Heres the code I'm working with for the current result:

Future<dynamic> preFocusModal(BuildContext context) {
  return showMaterialModalBottomSheet(
      context: context,
      builder: (context) => Container(
            height: 300,
            decoration: BoxDecoration(
                color: Theme.of(context).colorScheme.secondary,
                borderRadius: BorderRadius.all(Radius.circular(10))),
          ));
}

I have tried adjusting the width of the child container but that didn't work (figured it might because thats how it seems I can set height)

Also tried wrapping the modal in padding but that would require another method extraction as the return type needs to be future for the modal. This might work but I want to see if there's a more optimal solution.

Thank you!

Solution:

Future<dynamic> preFocusModal(BuildContext context) {
  return showMaterialModalBottomSheet(
      backgroundColor: Colors.transparent,
      context: context,
      builder: (context) => Padding(
            padding: EdgeInsets.all(15),
            child: Container(
              height: 400,
              decoration: BoxDecoration(
                  color: Theme.of(context).colorScheme.secondary,
                  borderRadius: BorderRadius.all(Radius.circular(30))),
            ),
          ));
}

CodePudding user response：

Inside the container, add another container as child and add a margin. And set Colors.transparent as the color of outer container. Then adjust the properties of inner container to achieve desired output.