如何在Flutter中为圆形容器复刻Figma图层模糊效果？

我在Figma中有一个带图层模糊效果的圆形设计（深色圆形带有向外扩散的柔和模糊光晕），尝试使用flutter_blur包的Blur组件无法实现一致效果，代码如下：

@override
Widget build(BuildContext context) {
  var height = MediaQuery.of(context).size.height;
  return Scaffold(
    body: Stack(
      children: [
        Blur(
          blur: 10,
          borderRadius: BorderRadius.circular(180),
          blurColor: Color.fromARGB(255, 10, 14, 81),
          child: Container(
            width: 302,
            height: 302,
            decoration: const BoxDecoration(
              shape: BoxShape.circle,
            ),
          ),
        ],
      ),
    );
  }

运行结果仅在圆形边缘有模糊，没有向外扩散的柔和光晕效果。

解决方案 #

flutter_blur的Blur组件仅针对子组件内部做模糊处理，无法模拟Figma中图层向外扩散的模糊光晕效果。可以通过Flutter原生的BoxShadow+BackdropFilter或者堆叠模糊容器的方式实现：

方案1：结合阴影与内部模糊

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

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.black, // 匹配Figma深色背景
    body: Center(
      child: Container(
        width: 302,
        height: 302,
        // 用阴影模拟向外扩散的模糊光晕
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          boxShadow: [
            BoxShadow(
              color: Color.fromARGB(255, 10, 14, 81).withOpacity(0.6),
              blurRadius: 40, // 调整模糊程度，对应Figma的模糊值
              spreadRadius: 20, // 控制光晕扩散范围
            ),
          ],
        ),
        child: ClipOval(
          // 给圆形内部添加模糊
          child: BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
            child: Container(
              width: 302,
              height: 302,
              color: Color.fromARGB(255, 10, 14, 81).withOpacity(0.3),
            ),
          ),
        ),
      ),
    ),
  );
}

方案2：堆叠模糊背景容器

通过叠加一个更大的模糊圆形作为背景，模拟扩散效果：

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

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.black,
    body: Center(
      child: Stack(
        alignment: Alignment.center,
        children: [
          // 外层扩散模糊的圆形（比内层大）
          Container(
            width: 380,
            height: 380,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: Color.fromARGB(255, 10, 14, 81).withOpacity(0.4),
            ),
            child: ClipOval(
              child: BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 30, sigmaY: 30),
                child: Container(color: Colors.transparent),
              ),
            ),
          ),
          // 内层主体圆形
          Container(
            width: 302,
            height: 302,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: Color.fromARGB(255, 10, 14, 81).withOpacity(0.7),
            ),
          ),
        ],
      ),
    ),
  );
}

参数调整提示 #

• 根据Figma中的模糊数值，修改blurRadius（阴影模糊）或sigmaX/Y（BackdropFilter模糊）
• 调整spreadRadius（阴影扩散）或外层容器的大小，控制光晕的扩散范围
• 微调颜色透明度，匹配Figma中的图层不透明度

内容的提问来源于stack exchange，提问作者Antonio Komang Yudistira