CODEWITHSUNDEEP
flutterflutter-layoutflutter-dependencies
Kaushik Bhingradiya
Kaushik Bhingradiya

Reputation: 907

How to fill color in the icon in flutter

I am new in flutter. I am using multiple theme(i.e. dark mode) in the app. So, When we use icon in different theme, automatically take background color according to the theme. I want background color of theme but not inside the icon.

Example: I am using youtube's icon in dark theme so look like below,

enter image description here

But i want to like below,

enter image description here

I am using 

Icon(
    FontAwesomeIcons.youtube,
    color: Colors.red
)

So how to fill the color white in this icon ? (Or also you can suggest me to do that in proper as well as better way to implement)

(so, i can use white filled icon in every theme)

Upvotes: 5

Views: 9980

Answers (2)

shubham
shubham

Reputation: 1

I also faced the same issue. I think there could be a modification in Sidak's solution. Instead of using a container in the background, we could use the same Icon of the desired color in the background using the stack widget.

Stack(children: <Widget>[
      Positioned.fill(
        child: Container(
          margin: EdgeInsets.all(5), // Modify this till it fills the color properly
          color: Colors.white, // Color
        ),
      ),
      Icon(
        FontAwesomeIcons.youtube, // Icon
        color: Colors.red,
      ),
      ),
    ])

Upvotes: -1

Sidak
Sidak

Reputation: 1283

You can use a Stack to place a filled Container under your icon like so:

Stack(children: <Widget>[
      Positioned.fill(
        child: Container(
          margin: EdgeInsets.all(5), // Modify this till it fills the color properly
          color: Colors.white, // Color
        ),
      ),
      Icon(
        FontAwesomeIcons.youtube, // Icon
        color: Colors.red,
      ),
      ),
    ])

Since its a container, you can also modify its shape in case there are random icon shapes that a normal square does not help in :P

I tried filling the icon play_circle_filled with green using this on DartPad and it gave me this:

enter image description here

Upvotes: 14

Related Questions