Place an icon on the buttom right of a Container-CodePudding

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.

CodePudding user response：

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,
                      ),
                    ),
                  ),
                ),
...

CodePudding user response：

Container has align property you can use that or instead of Positined you can use Alignment Widget for Aligning your widget

CodePudding user response：

For more control over postioning, just change the padding values.

                             Center(
                                child: Container(
                                  child: Material(
                                    child: InkWell(
                                      customBorder: CircleBorder(),
                                      onTap: () {},
                                      child: Container(
                                        width: 150.0,
                                        height: 150.0,
                                        child: Container(
                                          padding: EdgeInsets.only(
                                              right: 20, bottom: 10),
                                          alignment: Alignment.bottomRight,
                                          child: Icon(
                                              Icons.account_circle_rounded),
                                        ),
                                      ),
                                    ),
                                    color: Colors.transparent,
                                  ),
                                  decoration: BoxDecoration(
                                    color: Colors.orange,
                                    shape: BoxShape.circle,
                                  ),
                                ),
                              ),