Flutter showmodalbottomsheet width

by

Flutter ShowModalBottomSheet Width

In Flutter, the ShowModalBottomSheet widget allows you to present a modal bottom sheet that slides up from the bottom of the screen. By default, the width of the bottom sheet matches the width of the parent widget. However, you can customize the width as per your requirements.

Using Container widget

One way to set a specific width for the ShowModalBottomSheet is by wrapping it inside a Container widget and setting the width property of the Container. Here’s an example: 


    showModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        return Container(
          width: MediaQuery.of(context).size.width * 0.8, // 80% of the screen width
          child: // your bottom sheet content here,
        );
      },
    );

In this code snippet, we use MediaQuery to get the width of the screen and then multiply it by 0.8 (80%) to set the width of our bottom sheet. You can adjust the multiplier according to your needs.

Using FractionallySizedBox widget

Another approach is to use the FractionallySizedBox widget, which allows you to specify the width as a fraction of the available space. Here’s an example: 


    showModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        return FractionallySizedBox(
          widthFactor: 0.8, // 80% of the available space
          child: // your bottom sheet content here,
        );
      },
    );

In this code snippet, we set the widthFactor to 0.8, which means the bottom sheet will take up 80% of the available space.

It’s worth mentioning that you can combine these approaches or use other widgets like Expanded or SizedBox to achieve the desired width for your bottom sheet.

Leave a comment