Place an icon on the buttom right of a Container

Question

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.

Can you try Align widget? You need to use alignment.bottomright property — Yunus Emre Çelik, Jul 14 '22 at 09:08
Container widget has an alignment property, did you check it? — Siavash Mirzaei-Fard, Jul 14 '22 at 09:23
@YunusEmreÇelik Thanks for your fast response. That actually worked for me. I just had to add a padding widget. — taha khamis, Jul 14 '22 at 09:31
@SiavashMirzaei-Fard Thank you for the response. I replaced the posioned widget with align widget and padding widget — taha khamis, Jul 14 '22 at 09:32

score 3 · Accepted Answer · answered Jul 14 '22 at 09:28

3

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

answered Jul 14 '22 at 09:28

David Sedlář

706
5
15

1

Container has it's own alignment property, what's the point to use Alignment inside a Container? – Nagual Jul 14 '22 at 09:31
1

same for padding – Nagual Jul 14 '22 at 09:32
1

I totally agree and I would use these properties as well inside my app. But this way it might be more explicit for OP to learn about these widgets, and then even about these properties since he tried positioning with Positioned widget outside Stack. – David Sedlář Jul 14 '22 at 09:35
@Nagual I tried using the Container properties (alignment and padding) and they gave me the same behaviour as wraping with align and padding widgests. Thank you for the useful comment – taha khamis Jul 14 '22 at 09:36
@DavidSedlář I appreciate your answer. Thank you. – taha khamis Jul 14 '22 at 09:37

score 1 · Answer 2 · answered Jul 14 '22 at 09:24

1

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

answered Jul 14 '22 at 09:24

AlishanMuhammadAmin

290
1
8

score 0 · Answer 3 · answered Jul 14 '22 at 09:41

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

Place an icon on the buttom right of a Container

3 Answers3