【问题标题】：flutter corner radius with transparent background具有透明背景的颤动角半径
【发布时间】：2018-10-05 03:09:27
【问题描述】：

下面是我的代码，我希望渲染一个具有透明背景的圆角容器。

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"),
                  )

              ),

然而，这就是它渲染的内容，它会渲染一个具有圆角半径的白色容器（预期为透明）。有什么帮助吗？

【问题讨论】：

标签： dart flutter

【解决方案1】：

如果您将 Container 用圆角包裹在父母内部，背景颜色设置为 Colors.transparent 我认为这就是您要寻找的。如果您使用Scaffold，则默认背景颜色为白色。如果达到您想要的效果，请将其更改为 Colors.transparent。

        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"),
           )
         ),
        ),

【讨论】：

如果我在 SliverAppBar 中使用图片，那该怎么做呢？
你可以使用 SliverFillRemaining(child: aboveCode)

【解决方案2】：

如果你想用透明背景圆角，最好的方法是使用 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"),
    ),
  ),
);

【讨论】：

这可行.. 但在我的容器末端，半径 os 平方：imgur.com/a/Qb5kaVW。你能帮帮我吗？
也适用于ColorFiltered。如果您有ColorFilter 和BlendMode.color，则BoxDecoration 无法偷工减料。
当与 showModalBottomSheet 一起使用时，您必须像 @jayjw 建议的那样指定 bottomSheetTheme

【解决方案3】：

自 2019 年 5 月 1 日起，使用 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最近，用一个主题来控制表格样式应该是最能解决这个问题的。

如果您想为不同的底部工作表设置不同的主题，请在相应的子树中包含一个新的 Theme 对象，以覆盖该区域的底部工作表主题。

如果由于某种原因您仍想在启动底部工作表时手动覆盖主题，showBottomSheet 和 showModalBottomSheet 现在有了 backgroundColor 参数。像这样使用它：

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

无论应用/应用的当前主题如何，使用主题都可以重复使用底部工作表，并且没有如上所述设置画布颜色的负面影响。

【讨论】：

这应该是公认的答案...完美运行！
backgroundColor: Colors.transparent, 为我工作

【解决方案4】：

/// 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!"),)
      ),
    );
  }

调用它来显示带角的 BotoomSheet：

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

【讨论】：

【解决方案5】：

这是一个老问题。但是对于那些遇到这个问题的人......

圆角后面的白色背景实际上并不是容器。这是应用的画布颜色。

修复：将应用的画布颜色更改为 Colors.transparent

例子：

return new MaterialApp(
  title: 'My App',
  theme: new ThemeData(
    primarySwatch: Colors.green,
    canvasColor: Colors.transparent, //----Change to this------------
    accentColor: Colors.blue,
  ),
  home: new HomeScreen(),
);

【讨论】：

它确实有一些缺点。其他依赖于画布颜色的对象（例如刷新图标）也将具有透明背景，而不是白色。
我不建议这样做。许多小部件依赖于画布颜色，然后需要单独设置这些小部件。
最佳答案，这应该是最佳答案。
使用这个时，flutter的widgets的所有canvasColor都会变成color.transparent，请尝试打开抽屉，你看到了什么！
终于！解决了我的问题。

【解决方案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),
    ),
  ),
);

【讨论】：

【解决方案7】：

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"),
              )

     

 ),

)

这将使您的容器颜色与背景颜色相同。并且将有一个具有相同高度宽度的蓝色子容器。这将使角落的颜色与背景颜色相同。

【讨论】：

【解决方案8】：

modalbottomsheet 使用透明背景色并为盒子装饰提供单独的颜色

   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(),
    );
  });

【讨论】：

【解决方案9】：

具有许多高级选项的用于解决此问题的三个相关软件包是：

【讨论】：

【解决方案10】：

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() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  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,
          ),
        )
      );
  }
}

【讨论】：

【解决方案11】：

如果两个容器都是同级容器并且底部容器有圆角并且顶部容器是动态的，那么您将不得不使用堆栈小部件

Stack(
 children: [
   /*your_widget_1*/,
  /*your_widget_2*/,
 ],
);

【讨论】：