CODEWITHSUNDEEP
flutterflutter-layout
xyz83242
xyz83242

Reputation: 824

How can I add an opaque overlay over the image on box decoration in Flutter

I am struggling to come up with a solution to this seemingly simple task. I need an opaque overlay over an image in Flutter. I have tried to add the overlay different ways, but the image will always overlay on top of whatever I do. Mind you I need the opaque overlay over the image, but not over the title or text that sits on top of both the image and the overlay. Alternatively, I could have a black background and make the image opaque resulting possibly in the same effect that I want to achieve? Before I start to hack too much I would like to see how pros are doing it the way it should be done. Thank you all for your kind advices.

                  Container(
                    width: 320.0,
                    height: 180.0,
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: NetworkImage(
                            news[index]['jetpack_featured_media_url'],
                        ),
                        fit: BoxFit.cover,
                      ),
                      color: Color(0xFF1F1F98),
                      gradient: LinearGradient(
                        begin: Alignment.topCenter,
                        colors: [Colors.black, Colors.black],
                        stops: [0.0, 0.5]
                      ),
                      borderRadius: new BorderRadius.only(
                          topLeft: const Radius.circular(8.0),
                          topRight: const Radius.circular(8.0)
                      ),
                    ),
                    child: Padding(
                        padding: const EdgeInsets.all(20.0),
                        child: Text(
                            cardTitle(news[index]['title']['rendered']),
                            style: kCardOverlayTitleTextStyle
                        )
                    ) /* add child content here */,
                  ),

Upvotes: 6

Views: 15056

Answers (2)

Sudeep Bashistha
Sudeep Bashistha

Reputation: 1618

BlendMode.srcOver composite the source image over the destination image. So, if you want to add the overlay, this will be the option of choice. You can find more about this blend mode here

Here is the snippet that will work:

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: const AssetImage('../your-image.png'),
      fit: BoxFit.cover,
      colorFilter: ColorFilter.mode(
        Colors.red.withOpacity(0.8),
        BlendMode.srcOver,
      ),
    ),
  ),
)

Upvotes: 0

Yogesh Chawla
Yogesh Chawla

Reputation: 733

You can use the ColorFilter option available in the DecoratedImage Widget

Container(
          width: 320.0,
          height: 180.0,
          decoration: BoxDecoration(
            image: DecorationImage(
              image: NetworkImage(news[index['jetpack_featured_media_url']),
              fit: BoxFit.cover,
               colorFilter: ColorFilter.mode(
                Colors.black.withOpacity(0.2),
                BlendMode.darken
               ),
           ),
         ),

Upvotes: 28

Related Questions