flutter corner radius with transparent background

Question

Below is my code which I expect to render a round-corner container with a transparent background.

return new Container(
                //padding: const EdgeIn         


        

Answer 1

If you wrap your Container with rounded corners inside of a parent with the background color set to Colors.transparent I think that does what you're looking for. If you're using a Scaffold the default background color is white. Change that to Colors.transparent if that achieves what you want.

        new Container(
          height: 300.0,
          color: Colors.transparent,
          child: new Container(
            decoration: new BoxDecoration(
              color: Colors.green,
              borderRadius: new BorderRadius.only(
                topLeft: const Radius.circular(40.0),
                topRight: const Radius.circular(40.0),
              )
            ),
            child: new Center(
            child: new Text("Hi modal sheet"),
           )
         ),
        ),

Answer 2

As of May 1st 2019, use BottomSheetTheme.

MaterialApp(
    theme: ThemeData(
      // Draw all modals with a white background and top rounded corners
      bottomSheetTheme: BottomSheetThemeData(
        backgroundColor: Colors.white,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(top: Radius.circular(10))
        )
      )
    ),

Introduced recently, using a theme to control the sheets style should be the most best to this problem.

If you want to theme different bottom sheets differently, include a new Theme object in the appropriate subtree to override the bottom sheet theme just for that area.

If for some reason you'd still like to override the theme manually when launching a bottom sheet, showBottomSheet and showModalBottomSheet now have a backgroundColor parameter. Use it like this:

 showModalBottomSheet(
    backgroundColor: Colors.transparent,
    context: context,
    builder: (c) {return NavSheet();},
  );

Using the theme allows bottom sheets to be re-used regardless of the app / app's current theme, and has none of the negative side effects of setting canvas color as mentioned.

Answer 3

Use transparent background color for the modalbottomsheet and give separate color for box decoration

---

   showModalBottomSheet(
      backgroundColor: Colors.transparent,
      context: context, builder: (context) {
    return Container(

      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
            topLeft:Radius.circular(40) ,
            topRight: Radius.circular(40)
        ),
      ),
      padding: EdgeInsets.symmetric(vertical: 20,horizontal: 60),
      child: Settings_Form(),
    );
  });

Answer 4

showModalBottomSheet(
   context: context,
   builder: (context) => Container(
            color: Color(0xff757575), //background color 
            child:  new Container(
                decoration: new BoxDecoration(
                    color: Colors.blue,
                    borderRadius: new BorderRadius.only(
                        topLeft:  const  Radius.circular(40.0),
                        topRight: const  Radius.circular(40.0))
                ),
              child: new Center(
                child: new Text("Hi modal sheet"),
              )

     

 ),

)

This is will make your container color the same as the background color. And there will be a child container of the same height-width with blue color. This will make the corner with the same color as the background color.

Answer 5

/// Create the bottom sheet UI
  Widget bottomSheetBuilder(){
    return Container(
      color: Color(0xFF737373), // This line set the transparent background
      child: Container(
        decoration: BoxDecoration(
          color: Colors.white,
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(16.0),
                topRight: Radius.circular( 16.0)
            )
        ),
        child: Center( child: Text("Hi everyone!"),)
      ),
    );
  }

Call this to show the BotoomSheet with corners:

/// Show the bottomSheet when called
  Future _onMenuPressed() async {
    showModalBottomSheet(
        context: context,
        builder: (widgetBuilder) => bottomSheetBuilder()
    );
  }

Answer 6

Scaffold(
  appBar: AppBar(
    title: Text('BMI CALCULATOR'),
  ),
  body: Container(
    height: 200,
    width: 170,
    margin: EdgeInsets.all(15),
    decoration: BoxDecoration(
      color: Color(
        0xFF1D1E33,
      ),
      borderRadius: BorderRadius.circular(5),
    ),
  ),
);