CODEWITHSUNDEEP
flutterdartflutter-layoutflutter-designdart-ui
taha khamis
taha khamis

Reputation: 567

Place an icon on the buttom right of a Container

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.

Upvotes: 0

Views: 1846

Answers (3)

Arun Xena
Arun Xena

Reputation: 74

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

Upvotes: 0

David Sedlář
David Sedlář

Reputation: 777

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

Upvotes: 3

AlishanMuhammadAmin
AlishanMuhammadAmin

Reputation: 310

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

Upvotes: 1

Related Questions