Question

new Container(

                  width: 80.0,
                  height: 80.0,
                  decoration: new BoxDecoration(

                      shape: BoxShape.circle,
                      image: new DecorationImage(
                          fit: BoxFit.fill,
                          image: new NetworkImage(widget.profile_picture)))),

目前我有一个NetworkImage，但我想要改为使用圆形CachedNetworkImage。

Answer 1

您可以像这样使用CachedNetworkImageProvider：

new Container(
    width: 80.0,
    height: 80.0,
    decoration: new BoxDecoration(
        shape: BoxShape.circle,
        image: new DecorationImage(
            fit: BoxFit.fill,
            image: new CachedNetworkImageProvider(widget.profile_picture),
            ),
          ),
        ),

Answer 2

您可以使用

ClipRRect(borderRadius: BorderRadius.circular(10000.0),
child: CachedNetworkImage(...))

由于CachedNetworkImageProvider不是Widget，因此无法代替CachedNetworkImage。意味着它将没有占位符小部件选项。

Answer 3

我用它来创建一个带有边框颜色的圆形缓存图像网络

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';

class CircularCachedNetworkImage extends StatelessWidget {
  final String imageURL;
  final double size;
  final Color borderColor;
  final BoxFit fit;
  final double borderWidth;

  const CircularCachedNetworkImage({
    required this.imageURL,
    required this.size,
    required this.borderColor,
    this.fit = BoxFit.fill,
    this.borderWidth = 2,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      width: size,
      height: size,
      decoration: BoxDecoration(
        color: borderColor,
        shape: BoxShape.circle,
      ),
      child: Padding(
        padding: EdgeInsets.all(borderWidth),
        child: Container(
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.white, // inner circle color
          ),
          child: ClipRRect(
            borderRadius: BorderRadius.all(Radius.circular(300.0)),
            child: CachedNetworkImage(
              imageUrl: imageURL,
              fit: fit,
            ),
          ),
        ),
      ),
    );
  }
}

使用

CircularCachedNetworkImage(
   imageURL: "your image URL in here",
   size: 100,
   borderColor: Colors.green,
)

Answer 4

您应该尝试

ClipOval(
   child: CachedNetworkImage(
       imageUrl: url,
       fit: BoxFit.cover
   ),
)

Answer 5

您可以使用imageBuilder中的CachedNetworkImage：

CachedNetworkImage(
    imageUrl: imageUrl,
    imageBuilder: (context, imageProvider) => Container(
        height: 100,
        width: 100,
        decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(50)),
            image: DecorationImage(
                image: imageProvider,
                fit: BoxFit.cover,
            ),
        ),
    ),
    placeholder: (context, url) => placeholder,
    errorWidget: (context, url, error) => errorWidget,
)

要使图像变圆，请将宽度和高度设置为相同的值，并将borderRadius设置为高度的一半。

Answer 6

边界半径和边框颜色

第一种方法

Container(
   decoration: BoxDecoration(
     border: Border.all(color: Palette.greyTextColor),
     borderRadius: BorderRadius.all(Radius.circular(8.0)),),
                  child:  ClipRRect(
                    borderRadius: BorderRadius.all(Radius.circular(8.0)),
                    child: CachedNetworkImage(

第二种方式

CachedNetworkImage(
                       imageBuilder: (context, imageProvider) => Container(
                         width: width,
                         decoration: BoxDecoration(
                           border: Border.all(color: Palette.greyTextColor),
                           borderRadius: BorderRadius.all(Radius.circular(8.0)),
                           image: DecorationImage(image: imageProvider),
                         ),
                       ),

Flutter中的圆形CachedNetworkImage

6 个答案: