如何在Flutter中实现Figma图层模糊效果及对应圆形模糊样式

该需求完全可实现，你之前用径向渐变达不到效果是因为径向渐变是颜色线性过渡，而Figma的图层模糊是真实的高斯弥散效果，两者底层逻辑不同。

核心用到的组件 #

• ImageFiltered：用于给当前组件自身添加模糊效果，对应Figma的「图层模糊」属性
• BackdropFilter：用于给当前组件下方的背景内容添加模糊效果，对应Figma的「背景模糊」属性
• ClipOval：用于将模糊区域裁剪为圆形

代码示例 #

场景1：圆形自身图层模糊（比如模糊的圆形色块效果） #

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

class BlurCircleDemo extends StatelessWidget {
  const BlurCircleDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        // 自身模糊的圆形色块
        child: ImageFiltered(
          // sigmaX、sigmaY直接填Figma标注的模糊数值即可
          imageFilter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
          child: Container(
            width: 200,
            height: 200,
            decoration: const BoxDecoration(
              color: Colors.blue,
              shape: BoxShape.circle,
            ),
          ),
        ),
      ),
    );
  }
}

场景2：圆形区域背景模糊（比如圆形毛玻璃效果，下层内容被圆形区域模糊） #

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

class BackdropBlurCircleDemo extends StatelessWidget {
  const BackdropBlurCircleDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 下层背景内容，替换为你自己的页面元素即可
          Positioned.fill(
            child: Container(color: Colors.purple),
          ),
          Center(
            // 裁剪成圆形，只让圆形区域的背景被模糊
            child: ClipOval(
              child: BackdropFilter(
                // 模糊数值对应Figma标注
                filter: ImageFilter.blur(sigmaX: 15, sigmaY: 15),
                child: Container(
                  width: 200,
                  height: 200,
                  // 可以加半透明填充色对齐Figma效果
                  color: Colors.white.withOpacity(0.1),
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}

对齐Figma效果的调整技巧 #

• 模糊半径参数sigmaX和sigmaY直接和Figma模糊属性的数值一一对应，不需要额外换算
• 如果Figma的模糊效果带透明度，可在外层套Opacity组件调整整体透明度
• 若需要调整模糊边缘的软硬程度，可配合MaskFilter做边缘渐变过渡

内容的提问来源于stack exchange，提问作者nischal nayak