CODEWITHSUNDEEP
flutterdarticonscenter
zweifärbbar
zweifärbbar

Reputation: 407

Flutter: How to place an Icon on a CircleAvatar and center it?

enter image description here

I want to center the camera icon but i couldnt do it. I tried to use an image instead of an icon but this still didnt work. I think it doesnt work because it is not possible to place an icon on a CircleAvatar but there must be a way to this. Here is my Code:

    return SizedBox(
      height: 115,
      width: 115,
      child: Stack(
        clipBehavior: Clip.none,
        fit: StackFit.expand,
        children: [
          CircleAvatar(
            backgroundImage: AssetImage("assets/images/Profile Image.png"),
          ),
          Positioned(
              right: -16,
              bottom: 0,
              child: SizedBox(
                  height: 46,
                  width: 46,
                  child: FlatButton(
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(50),
                      side: BorderSide(color: Colors.white),
                    ),
                    color: Color(0xFFF5F6F9),
                    onPressed: () {},
                    // TODO: Icon not centered.
                    child: Center(child: Icon(Icons.camera_alt_outlined)),
                  )))
        ],
      ),
    );

Upvotes: 8

Views: 34303

Answers (5)

Aravindan
Aravindan

Reputation: 1

Try this:

Positioned(
           bottom: 0,
           right: 0,
           child: InkWell(
                          onTap: () {
                            showModalBottomSheet();
                          },
                          child: Container(
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(50),
                              color: Colors.white,
                              boxShadow: const [
                                BoxShadow(color: Colors.grey, blurRadius: 10)
                              ],
                            ),
                            height: 30,
                            width: 30,
                            child: const Icon(
                              Icons.camera_alt,
                              color: Colors.grey,
                            ),
                          ),
                        ),
                      )

Upvotes: 0

Nana kTk
Nana kTk

Reputation: 261

Try this

CircleAvatar(
  radius: 58,
  backgroundImage: AssetImage("assets/images/Profile Image.png"),
  child: Stack(
    children: [
       Align(
          alignment: Alignment.bottomRight,
          child: CircleAvatar(
            radius: 18,
            backgroundColor: Colors.white70,
            child: Icon(CupertinoIcons.camera),
          ),
       ),
    ]
  ),
)

Upvotes: 4

Boris Kamtou
Boris Kamtou

Reputation: 492

Instead of using CircleAvatar prefer using a Container like this:

 Container(
                  height: 46,
                  width: 46,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Colors.green,
                  ),
                  child: Icon(Icons.camera, color: Colors.white,),
                  alignment: Alignment.center,
                ),

Upvotes: 5

zweifärbbar
zweifärbbar

Reputation: 407

Widget build(BuildContext context) {
    return SizedBox(
      height: 115,
      width: 115,
      child: Stack(
        clipBehavior: Clip.none,
        fit: StackFit.expand,
        children: [
          CircleAvatar(
            backgroundImage: AssetImage("assets/images/Profile Image.png"),
          ),
          Positioned(
              bottom: 0,
              right: -25,
              child: RawMaterialButton(
                onPressed: () {},
                elevation: 2.0,
                fillColor: Color(0xFFF5F6F9),
                child: Icon(Icons.camera_alt_outlined, color: Colors.blue,),
                padding: EdgeInsets.all(15.0),
                shape: CircleBorder(),
              )),
        ],
      ),
    );
  }

I've removed the SizedBox and used a RawMaterialButton instead.

Upvotes: 16

Anushka Pubudu
Anushka Pubudu

Reputation: 437

Try this two things

You can wrap your Icon with Positioned widget then set top left right sizes for it.

again another way wrap with Align widget then set alignment: Alignment.center

Upvotes: 0

Related Questions