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

Question

我想创建一个Widget，它是一个带有网络图像的圆形按钮。敲击时应该有涟漪效应。

我已经尝试过使用墨水瓶，但即使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它是一个小工具我如何实现这一目标？

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

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

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

不要忘记热重启应用程序。

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

UPDATE

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