令人叹为观止！Flutter 实现背景图片毛玻璃效果，打造视觉冲击力

Android

2023-10-27 21:00:39

Flutter中的毛玻璃效果：点亮你的应用，营造视觉盛宴

什么是毛玻璃效果？

毛玻璃效果是一种朦胧、半透明的效果，可以让背景元素透出前景，营造出一种迷人的层次感。它经常用于创建高级的视觉效果，增强用户界面（UI）的沉浸感。

在Flutter中实现毛玻璃效果

在Flutter中，毛玻璃效果可以通过使用CustomPaint组件和ImageFilter类来实现。CustomPaint组件允许我们自定义绘制任何类型的图形，而ImageFilter类提供了丰富的图像处理功能，包括毛玻璃效果。

实现步骤

创建CustomPaint组件： 创建一个CustomPaint组件并重写paint方法。
添加毛玻璃效果： 在paint方法中，使用ImageFilter.blur()方法对背景图应用毛玻璃效果。
将CustomPaint组件应用于背景： 将CustomPaint组件应用于背景小部件，作为背景图的容器。
调整模糊程度： 通过调整ImageFilter.blur()方法中的sigmaX和sigmaY参数，可以调整毛玻璃效果的模糊程度。

代码示例

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

class FrostedBackground extends StatelessWidget {
  final Widget child;
  final double sigmaX;
  final double sigmaY;

  const FrostedBackground({
    Key? key,
    required this.child,
    this.sigmaX = 10.0,
    this.sigmaY = 10.0,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: FrostedBackgroundPainter(sigmaX, sigmaY),
      child: child,
    );
  }
}

class FrostedBackgroundPainter extends CustomPainter {
  final double sigmaX;
  final double sigmaY;

  FrostedBackgroundPainter(this.sigmaX, this.sigmaY);

  @override
  void paint(Canvas canvas, Size size) {
    canvas.saveLayer(Offset.zero & size, Paint());
    canvas.drawColor(Colors.white, BlendMode.src);
    canvas.restore();
    canvas.saveLayer(Offset.zero & size, Paint());
    canvas.drawImageFilter = ImageFilter.blur(sigmaX: sigmaX, sigmaY: sigmaY);
    canvas.drawImage(backgroundImage, Offset.zero, Paint());
    canvas.restore();
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}