flutter如何实现渐变模糊效果

在Flutter中如何实现渐变模糊效果？比如我想让一个图片或容器从顶部到底部逐渐变模糊，或者从中心向边缘扩散模糊效果。目前只知道使用BackdropFilter可以实现整体模糊，但不知道如何控制模糊范围和渐变过渡。能否提供具体的代码示例或实现思路？最好能支持动态调整模糊程度和范围。

2 回复

在Flutter中，使用BackdropFilter结合ImageFilter.blur实现模糊效果，再配合Container的decoration属性设置渐变。例如：

BackdropFilter(
  filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
  child: Container(
    decoration: BoxDecoration(
      gradient: LinearGradient(colors: [Colors.red, Colors.blue])
    ),
  ),
)

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


在Flutter中实现渐变模糊效果，可以通过组合ShaderMask和BackdropFilter等组件实现。以下是具体实现方法：

1. 线性渐变模糊

ShaderMask(
  shaderCallback: (Rect bounds) {
    return LinearGradient(
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
      colors: [Colors.transparent, Colors.black],
      stops: [0.5, 1.0],
    ).createShader(bounds);
  },
  blendMode: BlendMode.dstIn,
  child: BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
    child: Container(
      color: Colors.transparent,
      height: 200,
      width: double.infinity,
    ),
  ),
)

2. 径向渐变模糊

ShaderMask(
  shaderCallback: (Rect bounds) {
    return RadialGradient(
      center: Alignment.center,
      radius: 0.5,
      colors: [Colors.black, Colors.transparent],
    ).createShader(bounds);
  },
  blendMode: BlendMode.dstIn,
  child: BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 8.0, sigmaY: 8.0),
    child: Container(
      color: Colors.transparent,
      height: 200,
      width: 200,
    ),
  ),
)

3. 完整示例

import 'package:flutter/material.dart';

class GradientBlurExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 背景图片
          Image.network(
            'https://example.com/your-image.jpg',
            fit: BoxFit.cover,
            height: double.infinity,
            width: double.infinity,
          ),
          // 底部渐变模糊
          Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            child: ShaderMask(
              shaderCallback: (Rect bounds) {
                return LinearGradient(
                  begin: Alignment.bottomCenter,
                  end: Alignment.topCenter,
                  colors: [Colors.black, Colors.transparent],
                  stops: [0.0, 0.5],
                ).createShader(bounds);
              },
              blendMode: BlendMode.dstIn,
              child: BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 15.0, sigmaY: 15.0),
                child: Container(
                  height: 150,
                  color: Colors.transparent,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

关键参数说明

  • sigmaX/sigmaY：模糊程度，值越大越模糊
  • stops：渐变位置控制
  • blendMode：混合模式，通常使用BlendMode.dstIn

这种方法适用于创建毛玻璃效果、图片边缘渐变模糊等场景。

回到顶部