CODEWITHSUNDEEP
flutterdart
Jsancs
Jsancs

Reputation: 99

showModalBottomSheet and Border Radius

I want to make a showModalBottomSheet with a container in Flutter. I want this container to have rounded top borders, but, when I tried this, there were a few small uncolored spaces in the corners. How can I delete them?

This is the code I used:

class OverlayWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      child: const Text('showModalBottomSheet'),
      onPressed: () {
        showModalBottomSheet(
          context: context,
          isScrollControlled: true,
          builder: (BuildContext context) {
            return Container(
              height: MediaQuery.of(context).size.height * 0.80,
              decoration: BoxDecoration(
                color: Colors.green,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(30.0),
                  topRight: Radius.circular(30.0),
                ),
              ),
              child: Center(...),
            );
          },
        );
      },
    );
  }
}

The result is the following: enter image description here

I want to delete the white spaces at the top border. Gracias.

Upvotes: 2

Views: 4122

Answers (2)

Jsancs
Jsancs

Reputation: 99

Reviewing the documentation, I realize that the showModalBottomSheet<T> function has a property called backgroundColor 🤦‍♀️

Just adding:

backgroundColor: Colors.transparent,

to the showModalBottomSheet works.

Thanks for the help anyway!

Upvotes: 6

ikerfah
ikerfah

Reputation: 2862

ThemeData has bottomSheetTheme parameter, you can override this as following :

MaterialApp(
        ...
        theme: ThemeData(
          ...
          bottomSheetTheme:
              BottomSheetThemeData(backgroundColor: Colors.transparent),
        ),
        ...
      ),

This will give transparent color for the bottomSheet

Upvotes: 2

Related Questions