Flutter: Position Icon next to a centered CircleAvatar

5,997

Try to use a Stack:

Container(
  width: 200,
  height: 200,
  child: Stack(
    children: <Widget>[
      Align(
        alignment: Alignment.topRight,
        child: Icon(Icons.access_time),
      ),
      Container(
        width: 200,
        height: 200,
        child: CircleAvatar(
          child: Text('Avatar'),
        ),
      ),
    ],
  ),
),

Result:

Result

Share:
5,997
David Berryman
Author by

David Berryman

Updated on December 21, 2022

Comments

  • David Berryman
    David Berryman over 1 year

    I am trying to put an edit Icon on the right top side next to a centered Circle Avatar. But if I use a Center Widget inside of a Row Widget it does not work:

    Row(
                  children: <Widget>[
                    Center(
                      child:
                    CircleAvatar(
                      radius: 70,
                      backgroundImage: NetworkImage(
                          ""),
                    ),
                    ),
                    Icon(Icons.edit),
                  ],
                )
    

    and if I center the Rows Content with mainaxisalignment, it does not center the avatar but the avatar together with the Icon:

    Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    CircleAvatar(
                      radius: 70,
                      backgroundImage: NetworkImage(
                          "https://autix.ch/wp-content/uploads/profile-placeholder.png"),
                    ),
                    Icon(Icons.edit),
                  ],
                ),
    

    It should look like this: