flutterdarticonscenter

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

Solution

  • 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.