使子小部件对其父背景透明答案

【问题标题】：makes child widget transparent to it's parent background使子小部件对其父背景透明
【发布时间】：2019-04-04 09:25:46
【问题描述】：

我尝试使用不透明的深色背景进行相机预览，并且在中间部分有透明背景的卡片区域。看起来像在深色背景的移动设备中显示对话框，但对话框通过深色背景具有透明背景。

我已经使用列和行小部件完成了，例如：

Column(
  children : <Widget>[
    Expanded(
      child: Container(
        color: Colors.Black54
      )
    ),

    Row(
      children : <Widget>[
        Expanded(
          child: Container(
            color: Colors.Black54
          )
        ),

        CardWidget(
          width: cardWidth,
          height: cardHeight,
          Color: Colors.Transparent
        ),

        Expanded(
          child: Container(
             color: Colors.Black54
          )
        ),
      ]
    ),

    Expanded(
      child: Container(
        color: Colors.Black54
      )
    ),

  ]
)

但我想知道有没有简单的方法，例如：

 Container(
  color: Colors.Black54,
  child: center(
    child: CardWidget(
      width: cardWidth,
      height: cardHeight,
      background: Colors.Transparent
    )
  )
)

请让我知道是否有其他方法可以像上面的代码一样简单。谢谢

【问题讨论】：

标签： dart flutter

【解决方案1】：

您是否正在尝试做这样的事情？

如果是，代码如下：

new Container(
      decoration: new BoxDecoration(
          border: Border(
            top: BorderSide(width: 300, color: Colors.grey[700]),
            left: BorderSide(width: 100, color: Colors.grey[700]),
            right: BorderSide(width: 100, color: Colors.grey[700]),
            bottom: BorderSide(width: 300, color: Colors.grey[700]),
          ),
          color: Colors.transparent),
    )

【讨论】：

你也可以添加一个widget作为Container的child来进行相机预览，它将被放置在白色的矩形中
是的，完全一样。我想知道，它是否适合多种设备？不过谢谢好主意
您可以通过以下方式更改尺寸：MediaQuery.of(context).size.width * 0.2 (idem for height) 以适应所有设备尺寸
我计算了卡片大小。它将指导其余的
如何去掉这行？