Place an icon on the buttom right of a Container

1.3k Views Asked by At

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.

3

There are 3 best solutions below

5
On BEST ANSWER

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

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

0
On

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