flutter如何实现填充阴影模糊效果

在Flutter中如何给Widget添加填充阴影并设置模糊效果？我尝试使用BoxShadow，但发现阴影只在Widget外部显示，无法实现向内填充的效果。请问有没有办法实现类似CSS中box-shadow: inset这样的内阴影效果？或者还有其他组件或方法可以实现这个功能吗？

2 回复

在Flutter中，使用BoxDecoration的boxShadow属性实现填充阴影模糊效果。示例代码：

Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        blurRadius: 10, // 模糊半径
        spreadRadius: 2, // 扩散范围
        color: Colors.black.withOpacity(0.3),
      )
    ],
  ),
)

更多关于flutter如何实现填充阴影模糊效果的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现填充阴影模糊效果，可以使用 BackdropFilter 组件结合 BoxDecoration 的阴影属性。以下是具体实现方法：

核心代码示例

import 'package:flutter/material.dart';

class ShadowBlurEffect extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          width: 200,
          height: 200,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(20),
            boxShadow: [
              BoxShadow(
                color: Colors.black.withOpacity(0.3),
                blurRadius: 20,    // 模糊程度
                spreadRadius: 5,   // 阴影扩展范围
                offset: Offset(0, 4),
              )
            ],
          ),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(20),
            child: BackdropFilter(
              filter: ImageFilter.blur(
                sigmaX: 5,  // X轴模糊强度
                sigmaY: 5,  // Y轴模糊强度
              ),
              child: Container(
                color: Colors.white.withOpacity(0.2),
                alignment: Alignment.center,
                child: Text(
                  '模糊阴影效果',
                  style: TextStyle(fontSize: 18),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

关键参数说明：

  1. BoxShadow 属性：

    • blurRadius：控制阴影模糊程度
    • spreadRadius：控制阴影扩展范围
    • color：设置阴影颜色和透明度

  2. BackdropFilter：

    • sigmaX/sigmaY：控制背景模糊强度（数值越大越模糊）

其他实现方式

如需更高效的性能，可改用 ShaderMask：

ShaderMask(
  shaderCallback: (Rect bounds) {
    return LinearGradient(
      colors: [Colors.black12, Colors.black38],
    ).createShader(bounds);
  },
  child: YourContentWidget(),
)

注意事项

  • 使用 BackdropFilter 时会占用较多性能，建议适度使用
  • 可通过调整 opacity 和模糊参数控制效果强度
  • 确保父容器有明确的尺寸约束

这种方法可以实现带有模糊效果的填充阴影，适用于卡片、对话框等需要突出显示的场景。

回到顶部