Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Centering a widget on the screen

i am trying to center a circular avatar on the SCREEN and next to it an icon button.

       Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CircleAvatar(
              radius: 35,
              backgroundColor: Colors.grey[400],
              backgroundImage: NetworkImage(_userInfo!.profileImageUrl),
            ),
            IconButton(onPressed: editProfile, icon: Icon(Icons.edit),),
          ],
        ),

i tried using "align" it did not work

Tags:

2

Answers


  1. 0

    To center the CircleAvatar on the screen, theres’s widget for that!

    Use Center:

    Center(
    child: CircleAvatar(

    enter image description here

    Login or Signup to reply.
  2. 0

    You can use the row property in your tree widget instead of the extra cost of creating an additional widget Like this :

    Row(
      mainAxisAlignment: MainAxisAlignment.center, 
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        CircleAvatar(
          radius: 35,
          backgroundColor: Colors.grey[400],
          backgroundImage: NetworkImage(profileImageUrl),
        ),
        const SizedBox(width: 10),
        IconButton(
          onPressed: editProfile,
          icon: Icon(Icons.edit),
          iconSize: 24,
        ),
      ],
    );

    screenshot of result

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search