CODEWITHSUNDEEP
flutter
Nestor Ariza
Nestor Ariza

Reputation: 69

How can I make a favorite icon with white border and background color?

I'm trying to achieve the icon you can see in the image, it is a favorite icon with white border and some background color, just to be clear, not the functionality because I think I can handle this just changing the background color with some boolean variable. I have tried stack, and Icon.favorite_border, and Icon.favorite, but I had no success.

I appreciate your help.

Icon image

Upvotes: 1

Views: 640

Answers (1)

Shri Hari L
Shri Hari L

Reputation: 4894

I could give you an idea on implementing using Stack

  1. With same icon (by adjusting height)
    Container(
              height: 50.0,
              width: 50.0,
              child: Center(
                child: Stack(children: [
                  Center(
                    child: Icon(Icons.favorite,
                        color: Colors.white, size: 50.0),
                  ),
                  Center(
                    child: Icon(Icons.favorite, color: Colors.red, size: 40.0))
                ]
            ),
        ),
     ),

enter image description here

  1. With complementary icon set, no size adjustment.
   SizedBox(
    height: 50.0,
    width: 50.0,
    child: Stack(
      children: [
        Icon(Icons.favorite, color: Colors.red), 
        Icon(Icons.favorite_border, color: Colors.white)
         ],
     ),
  ),

enter image description here

Hope this suits your case!

Upvotes: 5

Related Questions