Flutter: AVATAR VIEW
Published in
2 min readJan 17, 2021
Flutter has a CircleAvatar widget that comes with very limited functionality, to solve this I have created my own flutter lib called avatar_view. This will solve some of the common problems which we faced while development.
AvatarView Features
All below features will be supported for network and assets images.
- Circular AvatarView Without Border
- Circular AvatarView With Border
- Rectangular AvatarView Without Border
- Rectangular AvatarView With Border
- Circular/Rectangular Text Widget
- Error Support Widgets.
Some of the examples which describe how we can use this.
Circular AvatarView Without Border
AvatarView(
radius: 60,
borderColor: Colors.yellow,
avatarType: AvatarType.CIRCLE,
backgroundColor: Colors.red,
imagePath:
"https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?cs=srgb&dl=pexels-pixabay-415829.jpg",
placeHolder: Container(
child: Icon(Icons.person, size: 50,),
),
errorWidget: Container(
child: Icon(Icons.error, size: 50,),
),
),
Circular AvatarView With Border
AvatarView(
radius: 60,
borderWidth: 8,
borderColor: Colors.yellow,
avatarType: AvatarType.CIRCLE,
backgroundColor: Colors.red,
imagePath:
"https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?cs=srgb&dl=pexels-pixabay-415829.jpg",
placeHolder: Container(
child: Icon(Icons.person, size: 50,),
),
errorWidget: Container(
child: Icon(Icons.error, size: 50,),
),
),
Rectangular AvatarView Without Border
AvatarView(
radius: 60,
borderColor: Colors.grey,
avatarType: AvatarType.RECTANGLE,
backgroundColor: Colors.red,
imagePath:
"https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?cs=srgb&dl=pexels-pixabay-220453.jpg",
placeHolder: Container(
child: Icon(Icons.person, size: 50,),
),
errorWidget: Container(
child: Icon(Icons.error, size: 50,),
),
),
Rectangular AvatarView With Border
AvatarView(
radius: 60,
borderWidth: 8,
borderColor: Colors.grey,
avatarType: AvatarType.RECTANGLE,
backgroundColor: Colors.red,
imagePath:
"https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?cs=srgb&dl=pexels-pixabay-220453.jpg",
placeHolder: Container(
child: Icon(Icons.person, size: 50,),
),
errorWidget: Container(
child: Icon(Icons.error, size: 50,),
),
),
Output:
Please find examples repository inside below given GitHub URL, Please do star if you like the repository.