CircleAvatar() size is not changing inside the appBar

Question

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?

Answer 1

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