import 'dart:ui'; import 'package:flutter/material.dart'; /// 球体配置类:控制颜色、大小、以及运动轨迹 class GlowBlobConfig { final Color color; final double size; final Alignment begin; final Alignment end; GlowBlobConfig({ required this.color, required this.size, required this.begin, required this.end, }); } class LiquidGlowBackground extends StatefulWidget { // 支持传入配置列表 final List blobs; final Duration duration; final double blurSigma; const LiquidGlowBackground({ super.key, required this.blobs, this.duration = const Duration(seconds: 8), this.blurSigma = 50.0, }); @override State createState() => _LiquidGlowBackgroundState(); } class _LiquidGlowBackgroundState extends State with SingleTickerProviderStateMixin { late AnimationController _controller; @override void initState() { super.initState(); _controller = AnimationController( vsync: this, duration: widget.duration, )..repeat(reverse: true); // 设置为 reverse 让往返运动更丝滑 } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return AnimatedBuilder( animation: _controller, builder: (context, child) { return Stack( alignment: Alignment.center, children: [ // 根据传入的配置动态生成球体 ...widget.blobs.map((config) { // 使用 AnimationController 在 begin 和 end 之间插值 final currentAlignment = Alignment.lerp( config.begin, config.end, _controller.value, )!; return _buildBlob( color: config.color, size: config.size, alignment: currentAlignment, ); }), // 核心模糊效果层 Positioned.fill( child: BackdropFilter( filter: ImageFilter.blur( sigmaX: widget.blurSigma, sigmaY: widget.blurSigma, ), child: Container(color: Colors.transparent), ), ), ], ); }, ); } Widget _buildBlob({ required Color color, required double size, required Alignment alignment, }) { return Align( alignment: alignment, child: Container( width: size, height: size, decoration: BoxDecoration( color: color, shape: BoxShape.circle, backgroundBlendMode: BlendMode.screen, // 让光影融合更自然 ), ), ); } }