创建具有网络图像和波纹效果的圆形按钮

Question

我想创建一个带有网络图像的圆形按钮的小部件。点按时应该会产生连锁反应。

我尝试过使用 Inkwell，但即使 type: MaterialType.circle 仍然在加载图像后它显示为方形图像并且它没有被裁剪为圆形。

return Material(
          elevation: 0,
          type: MaterialType.circle,
          color: Colors.grey[200],
          child: Ink.image(
            image: NetworkImage(url),
            fit: BoxFit.cover,
            width: 120.0,
            height: 120.0,
            child: InkWell(
              onTap: () {},
              child: null,
            ),
          ),

编辑

谢谢各位！几乎可以使用以下代码：

但是如何让网络图片在加载时淡入？

FadeInImage.memoryNetwork 不是 ImageProvider 它是一个 Widget 我该如何完成？

return Material(
            type: MaterialType.circle,
            clipBehavior: Clip.hardEdge,
            color: Colors.grey[200],
            child: Ink.image(
              image: NetworkImage(url),
              fit: BoxFit.fill,
              child: InkWell(
                onTap: () {},
                child: null,
              ),
            ));

Answer 1

只需在您的Material 小部件中将clipBehavior 属性设置为Clip.hardEdge。

Material(
      elevation: 0,
      type: MaterialType.circle,
      clipBehavior: Clip.hardEdge,
      ...

别忘了热重启应用。

更多信息在这里：https://docs.flutter.io/flutter/material/Material/clipBehavior.html

更新

使用FadeInImage 小部件

    Material(
              elevation: 0,
              clipBehavior: Clip.hardEdge,
              type: MaterialType.circle,
              color: Colors.grey[200],
              child: Stack(
                children: [
                  FadeInImage.assetNetwork(
                    placeholder: "resources/your_placeholder_image.png",
                    image:
                        'https://img.depor.com/files/ec_article_multimedia_gallery/uploads/2018/07/05/5b3e3ad01bd47.jpeg',
                    fit: BoxFit.cover,
                    width: 120.0,
                    height: 120.0,
                  ),
                  Positioned.fill(
                    child: Material(
                        color: Colors.transparent,
                        child: InkWell(
                            splashColor: Colors.lightGreenAccent, onTap: () {})),
                  ),
                ],
              ),
            ),