Flutter：Liquid Swipe引导页点击按钮后Confetti动画及跳转问题

核心实现逻辑 #

• 用ConfettiController精准控制动画时长为3秒
• 监听控制器状态，在动画播放完成后执行页面跳转
• 按钮点击时仅触发动画，不直接执行跳转

具体代码修改示例 #

假设你的页面已有Confetti组件和按钮，按以下方式调整：

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

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

  @override
  State<OnboardingLastPage> createState() => _OnboardingLastPageState();
}

class _OnboardingLastPageState extends State<OnboardingLastPage> {
  late ConfettiController _confettiController;

  @override
  void initState() {
    super.initState();
    // 初始化控制器，设置动画时长为3秒
    _confettiController = ConfettiController(duration: const Duration(seconds: 3));
    // 监听动画状态变化
    _confettiController.addListener(() {
      if (_confettiController.status == AnimationStatus.completed) {
        // 动画结束后执行替换式跳转
        AppRoute.pushReplacement(context, const MyApp());
      }
    });
  }

  @override
  void dispose() {
    // 销毁控制器，避免内存泄漏
    _confettiController.dispose();
    super.dispose();
  }

  void _handleLetsGoTap() {
    // 点击按钮仅播放动画
    _confettiController.play();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        // 你的引导页内容
        Center(
          child: ElevatedButton(
            onPressed: _handleLetsGoTap,
            child: const Text("Let's Go"),
          ),
        ),
        // 彩带动画组件
        ConfettiWidget(
          confettiController: _confettiController,
          blastDirectionality: BlastDirectionality.explosive, // 向四周扩散
          colors: const [
            Colors.red, Colors.blue, Colors.green, Colors.yellow
          ], // 粒子颜色
        ),
      ],
    );
  }
}

关键细节解释 #

• 时长控制：通过ConfettiController的duration参数直接设置为3秒，替代默认的动画时长
• 状态监听：利用控制器的addListener方法捕获状态变化，当状态变为AnimationStatus.completed时，说明动画已播放完毕，此时执行跳转逻辑
• 跳转时机：按钮点击事件中仅触发动画播放，不再直接写跳转代码，确保动画优先执行

新手必看注意事项 #

• 必须在initState中初始化控制器，并在dispose方法中销毁，防止内存泄漏
• 确保跳转时context是有效的（这里动画结束时上下文处于活跃状态，不会有问题）
• 若动画仍不显示，检查ConfettiWidget是否在页面的Stack层级中，且覆盖范围足够大

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