CODEWITHSUNDEEP
flutterflutter-layoutflutter-widget
Jitesh Mohite
Jitesh Mohite

Reputation: 34170

Fill background color of Image in flutter

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

Upvotes: 1

Views: 3610

Answers (4)

Scott Ober
Scott Ober

Reputation: 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.

Upvotes: -1

Jitesh Mohite
Jitesh Mohite

Reputation: 34170

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

Upvotes: 0

Manuel
Manuel

Reputation: 382

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

Upvotes: 3

Yuu Woods
Yuu Woods

Reputation: 1348

How about this?

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

enter image description here

Upvotes: 0

Related Questions