求助：如何在Flutter中实现带平滑动画的动态渐变流动背景

你要实现的是动态流体渐变背景（Animated Fluid Gradient Background），这类效果靠渐变颜色的平滑过渡、路径的缓慢变形来营造流动感，下面给你两种实现思路：

一、原生实现（无需第三方包） #

通过CustomPaint自定义绘制流动路径，配合AnimationController驱动动画，完全可控：

import 'package:flutter/material.dart';

class FluidBackground extends StatefulWidget {
  const FluidBackground({super.key});

  @override
  State<FluidBackground> createState() => _FluidBackgroundState();
}

class _FluidBackgroundState extends State<FluidBackground> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    // 8秒循环播放，来回反向动画
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 8),
    )..repeat(reverse: true);
    _animation = Tween<double>(begin: 0, end: 1).animate(
      CurvedAnimation(parent: _controller, curve: Curves.easeInOut),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnimatedBuilder(
        animation: _animation,
        builder: (context, child) {
          return CustomPaint(
            painter: _FluidPainter(progress: _animation.value),
            child: child,
          );
        },
        child: const Center(
          child: Text(
            "动态流体背景示例",
            style: TextStyle(color: Colors.white, fontSize: 24),
          ),
        ),
      ),
    );
  }
}

class _FluidPainter extends CustomPainter {
  final double progress;

  _FluidPainter({required this.progress});

  @override
  void paint(Canvas canvas, Size size) {
    // 定义过渡渐变色彩
    final gradient = LinearGradient(
      colors: [
        Colors.blue.shade400,
        Colors.purple.shade500,
        Colors.pink.shade400,
      ],
      stops: const [0.0, 0.5, 1.0],
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
    );

    // 随动画进度变化的流体路径（二次贝塞尔曲线模拟波浪）
    final path = Path()
      ..moveTo(0, size.height * (0.3 + progress * 0.2))
      ..quadraticBezierTo(
        size.width * 0.3,
        size.height * (0.2 - progress * 0.15),
        size.width * 0.5,
        size.height * (0.35 + progress * 0.1),
      )
      ..quadraticBezierTo(
        size.width * 0.7,
        size.height * (0.5 + progress * 0.2),
        size.width,
        size.height * (0.4 - progress * 0.1),
      )
      ..lineTo(size.width, size.height)
      ..lineTo(0, size.height)
      ..close();

    // 绘制渐变填充路径
    final paint = Paint()..shader = gradient.createShader(Rect.fromLTWH(0, 0, size.width, size.height));
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant _FluidPainter oldDelegate) {
    return oldDelegate.progress != progress;
  }
}

调整建议： #

• 修改Duration可以改变动画快慢
• 替换LinearGradient的颜色数组、对齐方式，匹配视频色调
• 调整路径中的控制点坐标，能模拟出更贴近视频的波浪形态

二、第三方包快速实现 #

如果不想自己写自定义绘制，可以用animated_gradient包快速搭建：

1. 先在pubspec.yaml添加依赖：

dependencies:
  animated_gradient: ^1.0.0

2. 实现代码：

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

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: AnimatedGradient(
          duration: const Duration(seconds: 6),
          reverseDuration: const Duration(seconds: 6),
          // 主色组
          primaryColors: [
            Colors.blue.shade400,
            Colors.purple.shade500,
            Colors.pink.shade400,
          ],
          // 过渡色组
          secondaryColors: [
            Colors.pink.shade300,
            Colors.blue.shade500,
            Colors.purple.shade300,
          ],
          child: const Center(
            child: Text(
              "快速实现流体背景",
              style: TextStyle(color: Colors.white, fontSize: 24),
            ),
          ),
        ),
      ),
    );
  }
}

这个包已经封装好了颜色流动、渐变过渡的逻辑，只需配置参数就能快速出效果。

内容的提问来源于stack exchange，提问作者Gajendra Pandeya