Place an icon on the buttom right of a Container

July 14, 2022

I have a Widget to creat a circular container. I want to place an icon on the buttom right, so I tried to use Positioned to place it where I want but its not moving. Its fixed on the center on the container.


Widget buildImage() {
    return Center(
      child: Container(
        child: Material(
          child: InkWell(
            customBorder:  CircleBorder(),
            onTap: (){},
            child: Container(
              width: 150.0,
              height: 150.0,
              child:  Positioned(
                bottom: 4,
                right: 0,
                child: Icon (Icons.account_circle_rounded),
              ),
            ),
          ),
          color: Colors.transparent,
        ),
        decoration:  BoxDecoration(
          color: Colors.orange,
          shape: BoxShape.circle,
        ),
      ),

    );
  }

What am I doing wrong here?

Your answers are highly appreciated.

>Solution :

Positioned is used only in Stack widget. So if you want to position your icon inside Container, you can use Align widget, withPadding which will create desired behavior specified before in Positioned.
Somehow like this:

...    
Container(
                  width: 150.0,
                  height: 150.0,
                  child: Align(
                    alignment: Alignment.bottomRight,
                    child: Padding(
                      padding: const EdgeInsets.only(right: 4.0),
                      child: Icon(
                        Icons.account_circle_rounded,
                      ),
                    ),
                  ),
                ),
...