How to give a CircleAvatar an image from assets
Use avatar_view
/// 1. Circular AvatarView Without Border
AvatarView(
radius: 60,
borderColor: Colors.yellow,
isOnlyText: false,
text: Text('C', style: TextStyle(color: Colors.white, fontSize: 50),),
avatarType: AvatarType.CIRCLE,
backgroundColor: Colors.red,
imagePath: "assets/image_1.png",
placeHolder: Container(
child: Icon(Icons.person, size: 50,),
),
errorWidget: Container(
child: Icon(Icons.error, size: 50,),
),
),
SizedBox(height: 16,),
/// 2. Circular AvatarView With Border
AvatarView(
radius: 60,
borderWidth: 8,
borderColor: Colors.yellow,
avatarType: AvatarType.CIRCLE,
backgroundColor: Colors.red,
imagePath: "assets/image_1.png",
placeHolder: Container(
child: Icon(Icons.person, size: 50,),
),
errorWidget: Container(
child: Icon(Icons.error, size: 50,),
),
),
Output:
Use child property from CircleAvatar:
CircleAvatar(
child: Image.asset('assets/horse.png'),
);
or if you want to use the backgroundImage property use the asset provider.
CircleAvatar(
backgroundImage: AssetImage('assets/horse.png'),
);