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

Question

我想创建一个 Widget，它是一个带有网络图像的圆形按钮。点击时应该会产生链式 react 。

我尝试过使用 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: () {})),
                  ),
                ],
              ),
            ),