颤动中的透明图像和透明文本框背景

Question

如何拥有透明的png彩色背景和透明的文本框？

预期结果：

我想要透明 png 后面的彩色背景。 但是Container不接受 color: Colors.deepOrange.shade50, 和 ...image: DecorationImage(image: AssetImage("transparent.png")一起。

那么我应该如何在我的 transaprent.png 图像后面保留橙色？

当前代码结果 ....

  Widget build(BuildContext context) {
    return Material(
      child: Column(mainAxisSize: MainAxisSize.max, children: [
        AppBar(),
        Container(
          // color: Colors.deepOrange.shade50,
          padding: const EdgeInsets.all(10.0),
          height: 400,
          width: 450,
          decoration: BoxDecoration(
            color: Colors.deepOrange.shade50,
            image: DecorationImage(
                image: AssetImage("assets/images/transparent.png"),
                fit: BoxFit.none),
          ),
          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.withOpacity(0.7),
                child: Text(
                  'Lorem ipsum dolor sit amet',
                  style: TextStyle(color: Colors.black, fontSize: 22.0),
                ),
              ),
            ],
          ),
        )
    );
  }

Answer 1

您的透明文本框已经在工作，您只需调整不透明度级别即可注意到它。

要添加透明色背景，您需要将所有代码包装在 Stack Widget 中，以便在一个区域中将图层相互堆叠。 Stack 中小部件的顺序决定了哪个小部件位于哪个小部件之上，因此我从背景容器中删除了您的 Column 并将其放置在堆栈的底部，这样它就不会受到透明颜色背景的影响。

Widget build(BuildContext context) {
    return Material(
      child: Column(
        mainAxisSize: MainAxisSize.max,
        children: [
          AppBar(),
          Stack(
            children: [
              Container(
                //color: Colors.deepOrange.shade50,
                padding: const EdgeInsets.all(10.0),
                height: MediaQuery.of(context).size.height * 0.5,
                width: double.infinity,
                decoration: BoxDecoration(
                  color: Colors.deepOrange.shade50,
                  image: DecorationImage(
                    image: AssetImage("assets/images/transparent.png"),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              Container(
                height: MediaQuery.of(context).size.height * 0.5,
                width: double.infinity,
                color: Colors.deepOrange.shade50.withOpacity(0.1),
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Text(
                    'Lorem ipsum dolor sit amet',
                    style: TextStyle(color: Colors.black, fontSize: 33.0),
                    textAlign: TextAlign.center,
                  ),
                  SizedBox(
                    height: 20,
                  ),
                  Container(
                    padding: EdgeInsets.symmetric(horizontal: 60),
                    decoration: BoxDecoration(
                      color: Colors.white70.withOpacity(0.5),
                      border: Border.all(color: Colors.black, width: 2),
                    ),
                    child: Text(
                      'Lorem ipsum dolor sit amet\n\nLorem ipsum dolor sit amet\n\nLorem ipsum dolor sit amet\n\nLorem ipsum dolor sit amet',
                      style: TextStyle(color: Colors.black, fontSize: 22.0),
                    ),
                  ),
                  SizedBox(
                    height: 20,
                  ),
                  Container(
                    height: 200,
                    width: MediaQuery.of(context).size.width * 0.94,
                    child: Opacity(
                      opacity: 0.6,
                      child: Image(
                        fit: BoxFit.cover,
                        image: AssetImage("assets/images/transparent.png"),
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }

Answer 2

您可以使用两个容器而不是一个。将图像分配给其中一个，将背景颜色分配给另一个。