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:
Author by
David Berryman
Updated on December 21, 2022Comments
-
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), ], ),