如何实现ScrollView边缘渐变模糊效果？消除生硬边界

要解决模糊区域边界生硬的问题，你可以通过ShaderMask + 线性渐变控制模糊效果的可见度，让模糊从无到有平滑过渡。修改后的代码如下：

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

return Scaffold(
  body: Stack(
    fit: StackFit.expand,
    children: [
      SingleChildScrollView(
        // 你的滚动内容
        child: Column(
          children: List.generate(50, (index) => ListTile(title: Text('Item $index'))),
        ),
      ),
      Positioned(
        top: 0,
        left: 0,
        right: 0,
        child: ShaderMask(
          // 定义从顶部到底部的渐变：完全透明 → 不透明
          shaderCallback: (Rect bounds) => LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [Colors.transparent, Colors.black],
            stops: const [0.0, 1.0],
          ).createShader(bounds),
          // 混合模式：用渐变的透明度裁剪模糊效果
          blendMode: BlendMode.dstIn,
          child: BackdropFilter(
            filter: ui.ImageFilter.blur(sigmaX: 5, sigmaY: 5),
            child: Container(
              height: MediaQuery.of(context).size.height * 0.15,
              color: Colors.transparent,
            ),
          ),
        ),
      ),
    ],
  ),
);

关键逻辑说明 #

• ShaderMask：通过线性渐变生成遮罩，顶部为完全透明（对应模糊效果不可见），底部为不透明（对应模糊效果完全显示）。
• BlendMode.dstIn：让遮罩的透明度决定下方模糊区域的显示程度，实现模糊强度的平滑过渡。
• 移除原代码中手动设置的width，改用left:0, right:0让模糊区域自动适配屏幕宽度，更灵活。

内容的提问来源于stack exchange，提问作者Geremia Moretti