Reputation: 578
So am trying to display circular user image in the home page of an application the image position is at the top left of the screen, after searching and trying i managed to use this approach:
return Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(100.0),
child: AppBar(
backgroundColor: Colors.purple,
elevation: 0,
leading: CircleAvatar(
radius: 10,
backgroundColor: Colors.black,
backgroundImage: AssetImage('assets/DefaultImage.png'),
),
),
),
);
the image is displayed fine but i want to increase the size of it and "radius" is not working at all, i tried to wrap the avatar with container to add some margins but also didn't work.
my questions are :
1- how to increase the size of CircleAvatar()
inside an AppBar()
.
2- is CircleAvatar()
the right choice for user profile image especially if this image was retrieved from firestore?
Upvotes: 3
Views: 6324
Reputation: 63799
leading
is controlled by leadingWidth
and toolbarHeight
. You can increase the size to have more space.
child: AppBar(
backgroundColor: Colors.purple,
elevation: 0,
toolbarHeight: 100, //this
leadingWidth: 100, //this
leading: CircleAvatar(
radius: 60,
backgroundColor: Colors.black,
),
),
Upvotes: 5