如何在 flutter 中模糊网络图像

Question

有人知道如何在 flutter 中模糊 Image.Network 吗？

Image.network(

                  user.profileImageUrl,
                  fit: BoxFit.cover,
                ),
                Center(
                  child: Text(
                    user.name,
                    style: TextStyle(
                      fontSize: 30,
                    ),
                  ),
                )

Answer 1

尝试以下操作：

double _sigmaX = 0.0; // from 0-10
double _sigmaY = 0.0; // from 0-10
double _opacity = 0.1; // from 0-1.0

Container(
  width: 350,
  height: 300,
  decoration: BoxDecoration(
    image: DecorationImage(
      image: Image.network(user.profileImageUrl,
                  fit: BoxFit.cover,
                )
    ),
  ),
  child: BackdropFilter(
    filter: ImageFilter.blur(sigmaX: _sigmaX, sigmaY: _sigmaY),
    child: Container(
      color: Colors.black.withOpacity(_opacity),
    ),
  ),
);

如何在 flutter 中模糊网络图像

How to blur a Network Image in flutter

blur

firebase

flutter