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

Question

How to have a transparent png colored background and transparent text box?

Expected result:

I want a colored background behind transparent png. But Container does not accept color: Colors.deepOrange.shade50, and ...image: DecorationImage(image: AssetImage("transparent.png") together.

So how should I keep the orange color behind my transaprent.png image?

Current code results....

  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

You can use two containers instead of one. Assign image to one of them and background color to the other.

Answer 2

Your transparent text box is already working, you just need to adjust the opacity level to notice it.

To add a transparent color background you need to wrap all of your code in a Stack Widget in order to stack layers on top of each other in one area. The order of widgets inside the Stack decides which widget goes on top of which widget, so I removed your Column from your background container and placed it to the bottom of the stack so it does not get affected by the transparent color background.

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"),
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }