1

Is it possible to add a background color to the Icon image? I am using the below code to render icon.

      Icon(
            Icons.check_circle_outline,
            size: 35.0,
          )

I want output like below when the image is drawn

enter image description here

Jitesh Mohite
  • 31,138
  • 12
  • 157
  • 147
  • does this answer your question. https://stackoverflow.com/a/52777666/7924072 – Viren V Varasadiya Apr 20 '20 at 12:17
  • @VirenVVarasadiya: That will not help in icons case, do you have any other solution? – Jitesh Mohite Apr 20 '20 at 12:37
  • you can wrap it inside a container and change the background color by giving the container a color also you can change the icon color, other than that you can't do any change to icon, you should get an icon and put it in your assets and use it. – hewa jalal Apr 20 '20 at 12:51

4 Answers4

3

If you try to get the icon exactly like in your picture then this is not possible. The icon check_circle_outline looks like the following:

enter image description here

So you have a checkmark and a circle all in one icon. What you want is to change only parts of the icon (in your case the circle)

But if you just want to add a background color behind the icon, then you can do it like Viren said:

Container(
  color: Colors.blue,
  child: Icon(
    Icons.check_circle_outline,
    size: 35.0,
  ),
)

enter image description here

If you want the exact same icon as in your picture, use another icon check circle and this snippet:

ClipOval(
  child: Container(
    color: Colors.green,
    child: Icon(        
      Icons.check,
      color: Colors.white,
      size: 35.0,
    ),
  ),
);

enter image description here

Manuel
  • 293
  • 2
  • 17
0

How about this?

Container(
  color: Colors.blue,
  child: Icon(
    Icons.check_circle_outline,
    size: 35.0,
  ),
),

enter image description here

Yuu Woods
  • 1,303
  • 6
  • 17
0

Below Solution provide an exact output

Container(
          color: Colors.blue,
          padding: EdgeInsets.all(5),
          child: ClipOval(
            child: Container(
              color: Colors.green,
              child: Icon(
                Icons.check,
                color: Colors.white,
                size: 30,
              ),
            ),
          ),
        )

Output:

enter image description here

Jitesh Mohite
  • 31,138
  • 12
  • 157
  • 147
-1

Depending on the shape and size of your icon, stacking your icon on top of a square widget that has your desired background color can work.

  Stack(alignment: Alignment.center, children: [
    Container(height: 20.0, width: 20.0, color: Colors.black),
    Icon(Icons.photo_size_select_actual, color: Colors.cyanAccent, size: 35.0)
  ]),

You could stack on top of a circular widget as well.

Scott Ober
  • 1