Question

当我使用showModalBottomSheet方法弹出bottomSheet时，如何使背景色透明。因为我需要圆角，所以我知道在materialApp中更改canvasColor可以解决问题，但是其他小部件也可以更改颜色。

我试图将其嵌入主题中，但是没有用

showModalBottomSheet < Null > (context: context, builder: (BuildContext context) {
    return Theme(
        data: Theme.of(context).copyWith(canvasColor: Colors.orange),
        child: Material(
            borderRadius: BorderRadius.only(topLeft: Radius.circular(16.0), topRight: Radius.circular(16.0)),
            child: Container(
                color: Colors.purple,
            ),
        ),
    );
});

Answer 1

你好朋友，今天你很幸运。如果要更改BottomSheet的颜色，请在Main方法的MaterialApp使用的主题中添加以下代码。

我建议您在用于封装晶圆厂的ThemeData小部件中更改此画布的颜色

您将看到画布的颜色是谁来处理您要寻找的东西

  ThemeData _baseTheme = ThemeData(
   fontFamily: "Roboto",
   canvasColor: Colors.transparent,
  );

  class MyApp extends StatelessWidget
  {
   @override
   Widget build(BuildContext context) {

  return new MaterialApp(
  routes: myRoutes(),
  initialRoute: '/',
  debugShowCheckedModeBanner: false,
  theme: _baseTheme,
  title: 'My awesome app!',
 );

 }
}

Answer 2

此处无法使用该主题。小部件在background-color之后呈现。您可以将Container颜色设置为Colors.black54。

我认为这不是解决此问题的好方法，但它确实有效。

对不起，我英语不好！

此网址将为您提供帮助！ https://gist.github.com/slightfoot/5af4c5dfa52194a3f8577bf83af2e391

Answer 3

只需将其添加到顶级ThemeData中即可。这样可以解决您的问题

bottomSheetTheme: BottomSheetThemeData(backgroundColor: Colors.black54)

Answer 4

使用backgroundColor属性更改颜色。要更改形状，请使用showModalBottomSheet的shape属性或应用shape_of_view容器来管理形状。

showModalBottomSheet(
        elevation: 0,
        context: context,
        backgroundColor: Colors.transparent,
        clipBehavior: Clip.hardEdge,
        builder: (BuildContext bc) {
          return ShapeOfView(
              shape: ArcShape(
                  direction: ArcDirection.Outside,
                  height: 20,
                  position: ArcPosition.Top),
              child: Container(
                  color: Colors.white,
                  child: Padding(
                    padding: EdgeInsets.fromLTRB(0, 20, 0, 0),
                    child: Container(
                      color: Colors.pink,
                      height:50

                    ),
                  )));
        });

Answer 5

您只需要输入backgroundColor: Colors.yourColor 示例代码如下

 showModalBottomSheet(
    context: context,
    backgroundColor: Colors.transparent,
    builder: (BuildContext bc){
      return Container(
        height: 430,
        child: BottomSheetWidget(name, test, images),
      );
    }
);

谢谢

Answer 6

我通过将小部件包装在主题中并将画布颜色和背景颜色更改为透明并在底部工作表容器中填充颜色来解决此问题。 `

 GestureDetector(onTap: () => showModalBottomSheet(
                                backgroundColor: Colors.transparent,
                                context: context,
                                builder: (BuildContext contxt) => Theme(
                                      data: Theme.of(context).copyWith(
                                        canvasColor: Colors.transparent,
                                      ),
                                      child: Container(
                                        decoration: BoxDecoration(
                                            color: Colors.white,
                                            borderRadius: BorderRadius.only(
                                                topRight: Radius.circular(20),
                                                topLeft: Radius.circular(20))),
                                        height: 360,
                                        child: ChildWidgetOfBottomSheetYouWantToImplement.....

`

如何在Flutter中更改BottomSheet的背景颜色？

6 个答案: