How to give a CircleAvatar an image from assets

Question

I'm doing some testing with the CircleAvatar. I know that the background image would normally be obtained from the network, which is what the documentation shows:

CircleAvatar(
  backgroundImage: NetworkImage(userAvatarUrl),
)

However, for testing purposes I just want to use asset images. I can't do this

leading: CircleAvatar(
  backgroundImage: Image.asset('assets/horse.png'),
)

because as the error says

The argument type Image can't be assigned to the parameter type ImageProvider.

How do I give an assets image to ImageProvider?

Answer 1

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

Answer 2

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: