Flutter 如何将容器背景设置为透明色 [英] Flutter how to set container background as transparent color

问题描述

以下是我的代码:

_showAlertDialog(String strTitle, String strDetails) {显示对话框(上下文:上下文，构建器:(BuildContext 上下文){返回警报对话框(contentPadding:EdgeInsets.zero，内容:堆栈(孩子们:<小部件>[不透明度(opacity: 1,//也尝试设置为0孩子:容器(填充:EdgeInsets.all(8.0),装饰:BoxDecoration(color: Color.fromRGBO(255, 0, 0, 0.5)//我使用不同的颜色代码来获得颜色的透明度，但始终显示白色.),孩子:列(mainAxisSize: MainAxisSize.min,孩子们:<小部件>[容器(身高:50，填充:EdgeInsets.only(左:10，右:10，顶部:2)，颜色:Theme.of(context).primaryColor,孩子:中心(孩子:文本(标题，样式:文本样式(颜色:Colors.white，fontWeight: FontWeight.w500,字体大小:14)，最大线数:2，),),),灵活的(孩子:容器(颜色:Colors.white，填充:EdgeInsets.all(10),孩子:SingleChildScrollView(孩子:文本(字符串详细信息，样式:TextStyle(颜色:Colors.black87，fontSize:12，fontWeight:FontWeight.w400)，),),),),],),),),定位(顶部:0，右:0，孩子:容器(身高:24，宽度:24，孩子:装饰盒(孩子:图标按钮(填充:EdgeInsets.zero，icon: Icon(Icons.close, color: Theme.of(context).primaryColor, size: 18,), onPressed: () {Navigator.of(context).pop();}),装饰:BoxDecoration(颜色:Colors.white，borderRadius: BorderRadius.circular(12)),),))],),);});}}

解决方案

AlertDialog Widget 有一个 backgroundColor 属性，只需将其设置为透明即可.

 AlertDialog(contentPadding:EdgeInsets.zero，backgroundColor: Colors.transparent,

并删除BoxDecoration

更新看起来 backgroundColor 在 Flutter 1.0.0 上尚不可用.(我在开发频道)

稳定:https://github.com/flutter/flutter/blob/stable/packages/flutter/lib/src/material/dialog.dart

dev: https://github.com/flutter/flutter/blob/dev/packages/flutter/lib/src/material/dialog.dart

检查 Dialog 的源代码，我发现它使用了主题中的 dialogBackgroundColor.试试这个简单的方法:

 showDialog(上下文:上下文，构建器:(BuildContext 上下文){返回主题(数据:Theme.of(context).copyWith(dialogBackgroundColor: Colors.transparent),孩子:警报对话框(contentPadding:EdgeInsets.zero，内容:堆栈(孩子们:<小部件>[容器(边距:EdgeInsets.all(8.0),颜色:Colors.white，...

I found this question but doesn't work for me.

I also play with Opacity widget and decoration color of Container. But didn't find solution It always display white background color when I set it transparent.

Look at below image, Instead of red color it should be transparent.

Below are my code:

_showAlertDialog(String strTitle, String strDetails) {
    showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            contentPadding: EdgeInsets.zero,
            content: Stack(
              children: <Widget>[
                Opacity(
                  opacity: 1, // Also tried to set 0
                  child: Container(
                    padding: EdgeInsets.all(8.0),
                    decoration: BoxDecoration(
                      color: Color.fromRGBO(255, 0, 0, 0.5) // I played with different colors code for get transparency of color but Alway display White. 
                    ),
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        Container(
                          height: 50,
                          padding: EdgeInsets.only(left: 10, right: 10, top: 2),
                          color: Theme.of(context).primaryColor,
                          child: Center(
                            child: Text(
                              strTitle,
                              style: TextStyle(
                                  color: Colors.white,
                                  fontWeight: FontWeight.w500,
                                  fontSize: 14),
                              maxLines: 2,
                            ),
                          ),
                        ),
                        Flexible(
                          child: Container(
                            color: Colors.white,
                            padding: EdgeInsets.all(10),
                            child: SingleChildScrollView(
                              child: Text(
                                strDetails,
                                style: TextStyle(color: Colors.black87, fontSize: 12, fontWeight: FontWeight.w400),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                Positioned(
                    top: 0,
                    right: 0,
                    child:
                    Container(
                      height: 24,
                      width: 24,
                      child: DecoratedBox(
                        child: IconButton(
                            padding: EdgeInsets.zero,
                            icon: Icon(Icons.close, color: Theme.of(context).primaryColor, size: 18,), onPressed: () {
                          Navigator.of(context).pop();
                        }),
                        decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(12)
                        ),
                      ),
                    )
                )
              ],
            ),
          );
        });
  }
}

解决方案

The AlertDialog Widget has a backgroundColor property , just set it to transparent.

  AlertDialog(
              contentPadding: EdgeInsets.zero,
              backgroundColor: Colors.transparent,

And remove the BoxDecoration

Update Looks like backgroundColor is not available on Flutter 1.0.0 yet. (I'm on dev channel)

stable: https://github.com/flutter/flutter/blob/stable/packages/flutter/lib/src/material/dialog.dart

dev: https://github.com/flutter/flutter/blob/dev/packages/flutter/lib/src/material/dialog.dart

Checking the source code of Dialog , I found it was using the dialogBackgroundColor from theme. Try this easy way:

  showDialog(
          context: context,
          builder: (BuildContext context) {
            return Theme(
              data: Theme.of(context).copyWith(dialogBackgroundColor: Colors.transparent),
              child: AlertDialog(
                contentPadding: EdgeInsets.zero,
                content: Stack(
                  children: <Widget>[
                    Container(
                      margin: EdgeInsets.all(8.0),
                      color: Colors.white,
                      ...

这篇关于Flutter 如何将容器背景设置为透明色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！