fit image asset in flutter-CodePudding

I'm trying to fit the image with my CircleAvatar, I've tried setting the height and width of the image but it didn't work. Tried BoxFit.fill, BoxFit.cover, BoxFit.fitWidth and BoxFit.fitHeight but still didn't work.

Here is the CircleAvatar:

And my code:

  ClipOval(
    child: conversation.image=='' ? 
           CircleAvatar(child: Image.asset('assets/images/defaultuser.png',),radius: 25,) : 
           CircleAvatar(child: Image.network(conversation.image!),radius: 25,)
    ),

Any solutions?

CodePudding user response：

ClipOval(
                                  child: CachedNetworkImage(
                                    width: 100.0,
                                    height: 100.0,
                                    fit: BoxFit.cover,
                                    imageUrl: "",
                                    placeholder: (context, url) =>
                                        new CircularProgressIndicator(),
                                    errorWidget: (context, url, error) =>
                                        new Icon(
                                      Icons.account_circle,
                                      color: Colors.blue,
                                      size: 100,
                                    ),
                                  ),
                                ),

CodePudding user response：

Wrap ClipOval with Sizebox so that always it have same size and height

                   SizedBox(
                            height: 60,
                            width: 60,
                            child: ClipOval(
                                    child: conversation.image=='' ? 
           Image.asset('assets/images/defaultuser.png',fit:BoxFit.cover,):
           Image.network(conversation.image!,fit:BoxFit.cover,),))

This should generate image like this: https://i.stack.imgur.com/uxq4c.png

CodePudding user response：

Use backgroundImage instead of child property of CircleAvatar.

class MyWidget extends StatelessWidget {
  final networkImage =
      'https://images.pexels.com/photos/462118/pexels-photo-462118.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500';
  final assetImage = 'assets/images/defaultuser.png';

  @override
  Widget build(BuildContext context) {
    return Center(
      child: CircleAvatar(
        radius: 25.0,
        backgroundImage: networkImage.isEmpty
            ? AssetImage(assetImage)
            : NetworkImage(networkImage) as ImageProvider,
        child: const SizedBox.shrink(),
      ),
    );
  }
}

CodePudding user response：

Use "backgroundImage" property instead of "child" property of CircleAvatar

ClipOval(
   child: conversation.image=='' ?
   CircleAvatar(
     backgroundImage: AssetImage('assets/images/defaultuser.png',),radius: 25):
   CircleAvatar(
     backgroundImage: NetworkImage(conversation.image!),radius: 25)),

CodePudding user response：

I think your image is rectangular that's why it doesn't fit in CircleAvatar.

Try this

 CircleAvatar(
          backgroundColor: Colors.transparent,
          child: ClipOval(
            clipBehavior: Clip.antiAlias,
            child: ImageAssetWidget(
              imagePath: ImageAssets.cardHomeTopBG,
            ),
          ),
          radius: 25,
        ),