使容器背景透明？答案

【问题标题】：Make container background as transparent?使容器背景透明？
【发布时间】：2018-08-14 09:08:02
【问题描述】：

我有一个看起来像这样的容器

它有一些背景颜色。我希望容器后面的列表应该是可见的。为容器编写的代码如下：

 new Container(
                  margin: EdgeInsets.fromLTRB(50.0, 10.0, 50.0, 10.0),
                  width: _isTextFieldActive ? 150.0 : 80.0,
                  height: 40.0,
                  decoration: new BoxDecoration(
                      color: Color(0xFF98DAFC),
                      borderRadius: new BorderRadius.only(
                          topLeft: Radius.circular(0.0),
                          topRight: Radius.circular(32.0),
                          bottomLeft: Radius.circular(0.0),
                          bottomRight: Radius.circular(32.0))),
                  alignment: Alignment.bottomCenter,
                  child: new Row(
                    children: <Widget>[
                      new Container(
                          width: 40.0,
                          height: 40.0,
                          child: new Checkbox(value: true)),
                      new Container(
                              width: 40.0,
                              height: 40.0,
                              decoration: new BoxDecoration(
                                  color: Color(0xFFDEDEDE),
                                  borderRadius:
                                      new BorderRadius.circular(32.0)),
                              child: new IconButton(
                                icon: Icon(Icons.search),
                               );
                                  }
                                },
                              ))
                    ],
                  ),
                ),

所以，我想要那个没有背景颜色的容器，并且容器后面的列表应该可见

如果我删除上面的代码，我会得到如下屏幕。

【问题讨论】：

你确定这个背景是由你提供代码的Container绘制的吗？您能否提供更多背景信息？
@EliasProjahn 是的，背景是由我提供代码的容器绘制的。并且一旦检查我已经更新了问题。
你把容器放在哪里？是否在堆栈中？
@EliasProjahn 是的，容器在堆栈内。
@EliasProjahn 我明白了，通过使用 flex。感谢您的支持:)

标签： dart flutter flutter-layout

【解决方案1】：

我不能 100% 确定这是否属实，因为我现在无法对其进行测试，但我认为问题可能出在 margin 属性上。如果我理解正确，您希望容器位于底部中心，底部填充为 10dp。我会这样做：

Align(
  alignment: Alignment.bottomCenter,
  child: Padding(
    padding: const EdgeInsets.only(bottom: 10.0),
    child: Container(
      height: 40.0,
      decoration: BoxDecoration(
        color: Color(0xFF98DAFC),
        borderRadius: const BorderRadius.only(
          topLeft: Radius.circular(0.0),
          topRight: Radius.circular(32.0),
          bottomLeft: Radius.circular(0.0),
          bottomRight: Radius.circular(32.0),
        ),
      ),
      child: ...,
    ),
  ),
)

【讨论】：

我使用了上面的代码，但输出与第一张图片相同
那我很抱歉 :-(
您可以尝试将您的容器包装在另一个具有透明背景的容器中。
我尝试使用其他容器进行包装，但结果相同@EliasProjahn