Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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)),
                  )))
        ],
      ),
    );
like image 465
zweifärbbar Avatar asked Apr 05 '21 12:04

zweifärbbar


People also ask

Is there a square avatar in flutter?

Flutter Square Avatar This is a representation of an image profile into a square shape. In this avatar, your profile image edges will be a square instead of standard and circle.

How to add circle avatar in flutter?

Adding Circle Avatar Adjusting Size and background color of Circle Avatar Sample Output: (Images, Icon and Circle Avatar together) Full Application Code: Adding Images Step 1: First of all, open your flutter application(project) folder. On the top of the android studio, you may find this location if you forgot. Step 2:

How to add icons in Flutter App?

In this example, we are going to show you how to add icons to your Flutter app. You will also learn to change the size, color, or icon as well as to add icon buttons, and make the default icon clickable in your Flutter App. See the examples below: How to Add Icon in Flutter App? You can use Icon () widget to add icons to your Flutter App.

How to add images to a flutter project?

There you need to create a new folder for keeping your images. As an example, we create a folder named ‘images’. Step 3: Put the images those you want to insert into your flutter project. As an example an image, two png images named ‘rose’, and ‘dahlia’ are placed. Step 4: In android studio, make the application program in ‘Project’ explorer mode.

What is the difference between circle Avatar and Standard Widget?

Flutter Circle Avatar is most commonly used for applications. It typically represents an image in a circular shape or the user's initial if the image is not used. The real-time app examples are Facebook, Twitter, Instagram, Linked In, and others. Flutter Standard Widget is commonly used for the Dev forum community or the public forum community.


3 Answers

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.

like image 90
zweifärbbar Avatar answered Oct 22 '22 18:10

zweifärbbar


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,
                ),
like image 3
Boris Kamtou Avatar answered Oct 22 '22 17:10

Boris Kamtou


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

like image 1
Nana kTk Avatar answered Oct 22 '22 18:10

Nana kTk