2

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?

Md. Yeasin Sheikh
  • 54,221
  • 7
  • 29
  • 56
editix
  • 322
  • 2
  • 14

1 Answers1

5

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,
    ),
  ),
Md. Yeasin Sheikh
  • 54,221
  • 7
  • 29
  • 56
  • Glad to help. Also, I was thinking not to use appBar here. Going for Row. Also while we are already using `PreferredSize`, We can have more control over AppBar like creating new widget [implementing PreferredSizeWidget](https://stackoverflow.com/a/69056129/10157127) – Md. Yeasin Sheikh Jul 31 '22 at 18:16