使图像资产适合 flutter

Question

我正在尝试使图像适合我的 CircleAvatar，我已经尝试设置图像的高度和宽度，但它不起作用。尝试了 BoxFit.fill、BoxFit.cover、BoxFit.fitWidth 和 BoxFit.fitHeight，但仍然没有用。

这是 CircleAvatar：

还有我的代码：

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

有什么解决办法吗？

Answer 1

用Sizebox包裹ClipOval，这样它总是有相同的大小和高度

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

这应该生成这样的图像：https://i.stack.imgur.com/uxq4c.png

Answer 2

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

Answer 3

使用“backgroundImage”属性代替“child”属性 CircleAvatar

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

Answer 4

使用 backgroundImage 代替 CircleAvatar 的 child 属性。

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(),
      ),
    );
  }
}

Answer 5

我认为您的图片是矩形的，所以它不适合 CircleAvatar。

试试这个

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

使图像资产适合 flutter

fit image asset in flutter

flutter

flutter-layout