Flutter中如何实现列表上方Widget上下边缘的阴影模糊效果

以下是两种常用的实现方式，可根据业务场景选择： #

方案1：渐变渐隐阴影效果（性能最优，绝大多数场景适用） #

使用ShaderMask组件添加上下渐变透明遮罩，模拟边缘渐隐的阴影效果，实现成本低且无额外性能消耗：

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return ShaderMask(
      shaderCallback: (Rect bounds) {
        return LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: const [
            Colors.transparent, // 顶部边缘完全透明（渐隐起始）
            Colors.white, // 顶部渐变结束，列表主体完全显示
            Colors.white, // 列表主体区域
            Colors.transparent, // 底部边缘渐隐
          ],
          // 控制渐变区域占比，可根据需求调整数值
          stops: const [0.0, 0.05, 0.95, 1.0],
        ).createShader(bounds);
      },
      blendMode: BlendMode.dstIn,
      // 嵌套你需要加效果的Widget，可为列表、也可为列表上层的容器Widget
      child: ListView.builder(
        padding: const EdgeInsets.symmetric(vertical: 20),
        itemCount: 30,
        itemBuilder: (context, index) => Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
          child: Container(
            height: 50,
            color: Colors.blue[100 * (index % 9)],
            child: Center(child: Text("列表项 $index")),
          ),
        ),
      ),
    );
  }
}

• 如果你需要将效果加在列表上层的Widget上，只需要把ShaderMask嵌套到对应上层Widget的外层即可，也可以通过Stack组件将渐变遮罩层放在列表和上层Widget中间。
• 调整stops数组的数值、colors的透明度即可修改阴影模糊的范围和深浅程度。

方案2：真实高斯模糊边缘效果 #

如果需要实现真实的毛玻璃模糊效果，可以结合Stack和BackdropFilter组件实现上下两层独立的模糊遮罩：

import 'package:flutter/material.dart';
import 'dart:ui'; // 需导入该库使用ImageFilter

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

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        // 底层列表
        ListView.builder(
          padding: const EdgeInsets.symmetric(vertical: 20),
          itemCount: 30,
          itemBuilder: (context, index) => Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            child: Container(
              height: 50,
              color: Colors.blue[100 * (index % 9)],
              child: Center(child: Text("列表项 $index")),
            ),
          ),
        ),
        // 顶部模糊遮罩
        Positioned(
          top: 0,
          left: 0,
          right: 0,
          height: 30, // 自定义模糊区域高度
          child: BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5), // 数值越大模糊越强
            child: Container(color: Colors.white.withOpacity(0.1)),
          ),
        ),
        // 底部模糊遮罩
        Positioned(
          bottom: 0,
          left: 0,
          right: 0,
          height: 30,
          child: BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
            child: Container(color: Colors.white.withOpacity(0.1)),
          ),
        ),
        // 此处可放置你需要放在列表上层的其他Widget
      ],
    );
  }
}

• 调整sigmaX、sigmaY的数值可以修改模糊程度，调整遮罩的height可以修改模糊区域的范围。
• 注意BackdropFilter存在一定性能消耗，不建议在长列表、高频刷新的页面中大面积使用。

内容的提问来源于stack exchange，提问作者Eduardo Airton