How to fill color in the icon in flutter

user_11427294 0
Viewed 4278

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)

flutter-dependencies flutter-layout flutter
1 Answers

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

user_132388990
Related