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

Question

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

Klaraklarika

Answer 1

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.

Klaraklarika

Answer 2

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

Flittermouse

Answer 3

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

Tidewaiter

Answer 4

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

Decahedron

Both ways did not work. It was not possible to wrap it in a Positioned because the ancestor is not a Stack. – Beetroot

Answer 5

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

Deify