CODEWITHSUNDEEP
dartflutter
Rishabh
Rishabh

Reputation: 2548

Changing Background Color Of Image in Flutter

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.

enter image description here

Upvotes: 8

Views: 52829

Answers (7)

Kr INFINITY
Kr INFINITY

Reputation: 11

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

Upvotes: 0

ᴅ ᴇ ʙ ᴊ ᴇᴇ ᴛ
ᴅ ᴇ ʙ ᴊ ᴇᴇ ᴛ

Reputation: 519

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)),
                          ),

Upvotes: 1

Rafael Tadeu Silva
Rafael Tadeu Silva

Reputation: 96

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/

Upvotes: 7

Zog
Zog

Reputation: 1143

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.

Upvotes: 0

Imran Sefat
Imran Sefat

Reputation: 773

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.

Upvotes: 0

Soundbytes
Soundbytes

Reputation: 1249

You can't do that with flutter. You need an image editor to change the background color.

If you want to change the background color dynamically you will first have to make the background transparent by adding an alpha channel mask to the image (again using an image editor) You will then be able to define a background color by putting the image inside a widget that has a background color.

Here is a complete example app. The background color changes at random when the widget is reloaded.

import 'dart:math';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  Color randomColor() =>
      Color((Random().nextDouble() * 0xFFFFFF).toInt() << 0).withOpacity(1.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MyApp',
      home: Center(
        child: Container(
          decoration: BoxDecoration(
            color: randomColor(),
          ),
          child: Image.network(
            'https://i.sstatic.net/O02Ip.png',
          ),
        ),
      ),
    );
  }
}

Upvotes: 12

Mohamed Mo Kawsara
Mohamed Mo Kawsara

Reputation: 4688

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,
)

Upvotes: 11

Related Questions