Flutter 如何为透明PNG设置彩色背景并实现透明文本框

• Flutter的Container组件明确不支持同时配置顶层color参数与decoration参数：顶层color本质是未配置decoration时的快捷背景设置，二者共存会直接触发渲染冲突、抛出异常。
• 你当前虽然把背景色移入了BoxDecoration内部，但依然存在渲染顺序不直观、可控性差的问题：BoxDecoration内部的背景色、装饰图是按照框架固定顺序绘制的，一旦PNG本身存在导出问题、fit规则不匹配，就很容易出现橙色背景被完全遮挡的情况。
• 代码中存在一处小冗余：你写的Colors.white70.withOpacity(0.7)属于重复设置透明度，Colors.white70本身已经是70%不透明度的白色，叠加后实际透明度仅为49%，和预期的半透明效果有偏差。

最稳妥的方式是用Stack组件做分层渲染，因为Stack的子组件严格按照数组顺序从下到上绘制，完全不存在装饰层的绘制顺序歧义，能够精准保证橙色背景在透明PNG的下层。
分层结构从下到上依次为：

• 最底层：纯浅橙色背景容器，尺寸与外层容器完全一致
• 中间层：透明PNG图片，按需求设置适配规则
• 最上层：原有的文本内容（包括半透明文本容器）

修正后完整代码 #

Widget build(BuildContext context) {
  return Material(
    child: Column(
      mainAxisSize: MainAxisSize.max,
      children: [
        AppBar(),
        SizedBox(
          height: 400,
          width: 450,
          child: Stack(
            children: [
              // 最下层：浅橙色背景
              Container(
                color: Colors.deepOrange.shade50,
              ),
              // 中间层：透明PNG图片
              Positioned.fill(
                child: Image.asset(
                  "assets/images/transparent.png",
                  fit: BoxFit.none,
                ),
              ),
              // 最上层：文本内容
              Padding(
                padding: const EdgeInsets.all(10.0),
                child: Column(
                  children: [
                    Text(
                      'Lorem ipsum dolor sit amet',
                      style: TextStyle(color: Colors.black, fontSize: 33.0),
                    ),
                    Container(
                      padding: EdgeInsets.symmetric(horizontal: 60),
                      // 移除冗余的透明度叠加逻辑
                      color: Colors.white70,
                      child: Text(
                        'Lorem ipsum dolor sit amet',
                        style: TextStyle(color: Colors.black, fontSize: 22.0),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        )
      ],
    ),
  );
}

• 确认你的透明PNG导出时，没有携带不透明的底色蒙版：部分设计软件导出PNG时，看似透明的区域实际填充了不透明色块，会完全遮挡下层的橙色背景。
• 透明PNG的fit规则可以根据图片尺寸调整，比如需要撑满容器就改成BoxFit.cover，需要居中适配就改成BoxFit.contain，避免图片因为尺寸过大完全盖住背景层。

内容的提问来源于stack exchange，提问作者Cem Kaan