如何在Flutter中为圆形图片添加模糊阴影效果

实现逻辑非常简单，通过Stack层叠两层相同的图片组件即可：底层对图片做模糊偏移作为阴影，上层裁剪为圆形展示清晰原图，全程使用Flutter SDK自带组件，无需引入第三方依赖。

• 核心实现代码：

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

class CircularImageWithBlurShadow extends StatelessWidget {
  /// 图片资源地址，支持本地资源或网络地址
  final String imagePath;
  /// 圆形图片的尺寸
  final double size;
  /// 阴影相对于图片的偏移量
  final Offset shadowOffset;
  /// 阴影模糊半径
  final double blurRadius;
  /// 阴影透明度
  final double shadowOpacity;

  const CircularImageWithBlurShadow({
    super.key,
    required this.imagePath,
    this.size = 120,
    this.shadowOffset = const Offset(0, 8),
    this.blurRadius = 15,
    this.shadowOpacity = 0.7,
  });

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      // 总高度预留阴影偏移的空间
      height: size + shadowOffset.dy.abs(),
      width: size,
      child: Stack(
        alignment: Alignment.topCenter,
        children: [
          // 底层模糊阴影层
          Positioned(
            top: shadowOffset.dy,
            left: shadowOffset.dx,
            child: Opacity(
              opacity: shadowOpacity,
              child: ClipOval(
                child: ImageFiltered(
                  imageFilter: ImageFilter.blur(
                    sigmaX: blurRadius,
                    sigmaY: blurRadius,
                  ),
                  // 如果是本地资源替换为Image.asset即可
                  child: Image.network(
                    imagePath,
                    width: size,
                    height: size,
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ),
          ),
          // 上层清晰圆形图片层
          ClipOval(
            child: Image.network(
              imagePath,
              width: size,
              height: size,
              fit: BoxFit.cover,
            ),
          )
        ],
      ),
    );
  }
}

• 调用示例：

// 页面中直接调用组件即可
CircularImageWithBlurShadow(
  imagePath: "你的图片地址",
  size: 140,
  blurRadius: 18,
  shadowOffset: Offset(0, 10),
)

• 参数调整说明：
  • 调整blurRadius数值可以改变阴影的模糊程度，数值越大阴影越散
  • 调整shadowOffset的dx、dy值可以改变阴影的偏移方向和距离
  • 调整shadowOpacity可以改变阴影的深浅
  • 如果需要给圆形图片增加边框，可在上层ClipOval外层套Container，设置border和borderRadius: BorderRadius.circular(size/2)即可

内容的提问来源于stack exchange，提问作者Anas Ezzat