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 EdgeInsets all 32 0                   height  800 0                    color  const Color 0xffDC1C17                     color  const Color 0xffFFAB91                   decoration  new BoxDecoration                    color  Colors green    new Color fromRGBO 255  0  0  0 0                     borderRadius  new BorderRadius only                      topLeft   const  Radius circular 40 0                       topRight  const  Radius circular 40 0                                      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                                            However this is what it renders  it renders a white container  expected transparent  with a round corner radius  Any help

User · Answer

It s an old question  But for those who come across this question     The white background behind the rounded corners is not actually the container  That is the canvas color of the app   TO FIX  Change the canvas color of your app to Colors transparent  Example   return new MaterialApp    title   My App     theme  new ThemeData      primarySwatch  Colors green      canvasColor  Colors transparent    ----Change to this------------     accentColor  Colors blue         home  new HomeScreen

User · Answer

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    gt  bottomSheetBuilder

User · Answer

If you want to round corners with transparent background  the best approach is using ClipRRect   return ClipRRect    borderRadius  BorderRadius circular 40 0     child  Container      height  800 0      width  double infinity      color  Colors blue      child  Center        child  new Text  Hi modal sheet

User · Answer

If both containers are siblings and the bottom container has rounded corners and the top container is dynamic then you will have to use the stack widget Stack   children         your widget 1        your widget 2

User · Answer

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

User · Answer

showModalBottomSheet     context  context     builder   context    gt  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  quot Hi modal sheet quot                                    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

User · Answer

Three related  packages for covering this issue with many advanced options are   sliding up panel modal bottom sheet sliding panel

User · Answer

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

User · Answer

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

User · Answer

class MyApp2 extends StatelessWidget       override   Widget build BuildContext context         return MaterialApp         debugShowCheckedModeBanner  false        theme  ThemeData          appBarTheme  AppBarTheme            elevation  0            color  Colors blueAccent                           title   Welcome to flutter          home  HomePage                 class HomePage extends StatefulWidget      override    HomePageState createState     gt   HomePageState       class  HomePageState extends State lt HomePage gt       int number   0    void  increment       setState            number                    override   Widget build BuildContext context        return Scaffold          backgroundColor  Colors blueAccent          appBar  AppBar            title  Text  MyApp2               leading  Icon Icons menu                backgroundColor  Colors blueAccent                        body  Container            decoration  BoxDecoration              borderRadius  BorderRadius only                topLeft  Radius circular 200 0                 topRight  Radius circular 200                              color  Colors white

User · Answer

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

[dart] flutter corner radius with transparent background

Examples related to dart

Examples related to flutter