Changing Background Color Of Image in Flutter

Question

Can we Change the background color on an Image in Flutter? Like in this Image I want to change the pink color background color to something else.

Answer 1

In my case, I was trying to color a Transparent PNG

I tried this solution and it's working.

Using ShaderMask class (https://docs.flutter.io/flutter/widgets/ShaderMask-class.html)

Example:

ShaderMask(
  child: Image(
    image: AssetImage("assets/cat.png"),
  ),
  shaderCallback: (Rect bounds) {
    return LinearGradient(
      colors: [Colors.blue, Colors.lightBlue],
      stops: [
        0.0,
        0.5,
      ],
    ).createShader(bounds);
  },
  blendMode: BlendMode.srcATop,
)

Answer 2

I know that's an old question, but for those that came from google.

It's now possible, since flutter 1.9, using the widget ColorFiltered.

 body: Center(
        child: ColorFiltered(
          child:Image.network(
                      "https://cdn.pixabay.com/photo/2019/12/14/07/21/mountain-4694346_960_720.png",
                    ),
          colorFilter: ColorFilter.mode(Colors.red, BlendMode.color),
        
      ),

Full example, By Rashid: https://flutterforyou.com/how-to-change-color-of-an-image-in-flutter/

Answer 3

By wrapping the image into a container then adding colour inside of SVG file and by using the flutter_svg package there is a colour argument that will fill the color of your choice

                       child: Container(
                            decoration: BoxDecoration(
                              color: Colors.white,
                              shape: BoxShape.circle
                            ),
                            child: SvgPicture.asset('assets/images/plus.svg',
                            color: Color(0xff280D78)),
                          ),

Answer 4

I have come up with this solution. So, you can contain the widget and then decorate the container with a color.

Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(8),
              color: Colors.black,
            ),
            child: ClipRRect(
                borderRadius: BorderRadius.circular(8),
                child: Image(
                  image: AssetImage(imageLink),
                ),
              
            ),
          ),

You don't need the borderRadius but in my case I used ClipRRect with borderRadius.

Answer 5

I was also trying to add color to a background for a Transparent PNG

This can be done by using a stack widget as below follows:

Stack(
   children: <Widget>[
     Container(
       width: double.infinity,
       height: double.infinity,
       margin: EdgeInsets.all(50),
       color: Colors.blue[500],
     ),
     Image.asset(
       'images/frame.png',
        fit: BoxFit.fill,
     ),
   ],
 )

I added a margin so the colored background was only seen inside my photo frame image.

Answer 6

Widget removewhitefromImage({Widget? child, List<Color>? listofcolors}) {
  return ShaderMask(
    child: child ?? const SizedBox.shrink(),
    shaderCallback: (Rect bounds) {
      return LinearGradient(
        colors: listofcolors ?? [AppColors.cardColor, AppColors.cardColor],
      ).createShader(bounds);
    },
  );
}