How to stack two icons one on top of the other?

Issue

I have two icons in a stack. I want one to hide the other, but instead it's semi-transparent and the other is shown behind it.

This is the code:

Stack(
     children: [
         Container(child: Icon(Icons.account_circle_rounded), padding: EdgeInsets.only(left: 10),),
         Container(child: Icon(Icons.account_circle_rounded), padding: EdgeInsets.only(left: 20),),
    ],
)

This is how it looks:

Solution

Icons are more like SVG, use vector to draw shape. There are some empty spaces inside the icon to draw the path, and we can see the background though this. Also, it contains padding around it, You can use your assets to draw the UI.

We can wrap with another ColoredBox to hide the background icon, but it will get extra padding from IconData.

This snippet shows basic level structure.

SizedBox(
  height: 24,
  width: 24 * 1.7,
  child: Stack(
    alignment: Alignment.center,
    children: [
      Align(
        alignment: Alignment.centerLeft,
        child: Container(
          child: const Icon(
            Icons.account_circle_rounded,
          ),
          decoration: const BoxDecoration(
            color: Colors.white,
            shape: BoxShape.circle,
          ),
        ),
      ),
      Align(
        alignment: Alignment.centerRight,
        child: Container(
          child: const Icon(
            Icons.account_circle_sharp,
          ),
          decoration: const BoxDecoration(
            color: Colors.white,
            shape: BoxShape.circle,
          ),
        ),
      ),
    ],
  ),
),

Widget renders bottom to top.

Answered By - Yeasin Sheikh