Search code examples
imageflutterbackgroundcontainers

Add Image and back arrow on top of container with color gradient in flutter does not work

I am trying to add an image and a white back arrow on top of a container with background gradient color while of-course preserving the background. Here is the result that I want:

enter image description here

This is the code that I tried:

    Stack(
      children: <Widget>[
        Container(
          height: 200,
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: <Color>[Color(0xffb21fc3), Color(0xff960cd1)],
            ),
          ),
        ),
        Image.asset(
          'assets/vip_big.jpg',
          colorBlendMode: BlendMode.overlay,
        ),
        Positioned(
          top: 45,
          left: 15,
          child: IconButton(
              icon: Icon(
                Icons.arrow_back_ios,
                size: 45.0,
                color: Colors.white,
              ),
              onPressed: () {}),
        ),
      ],
    ),

Here is what I got:

enter image description here

What changes do I need to make to get the correct output?

Solution

  • Replace the white color from image to transparent. Right now, because the image is jpeg, there is no transparency. So the image overlaps your gradient container.