Flutter：带时长与进度条的启动闪屏实现问题

嘿，作为Flutter新手能尝试做闪屏功能真的很棒！我来给你一个简单又贴合需求的实现方案，亲测好用～

我们可以借助Flutter自带的动画组件和状态管理来完成这个需求，核心思路是让进度条的动画时长和闪屏显示时长完全同步，下面是完整的实现步骤和代码：

步骤1：创建闪屏页面组件 #

import 'package:flutter/material.dart';

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

  @override
  State<SplashScreen> createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> with SingleTickerProviderStateMixin {
  late AnimationController _progressController;
  late Animation<double> _progressAnimation;

  @override
  void initState() {
    super.initState();
    // 初始化动画控制器，时长设为3秒，和闪屏显示时间一致
    _progressController = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 3),
    );
    // 创建从0到1的进度动画
    _progressAnimation = Tween<double>(begin: 0, end: 1).animate(_progressController);

    // 启动进度条动画
    _progressController.forward();

    // 3秒后自动跳转到主页面
    Future.delayed(const Duration(seconds: 3), () {
      Navigator.of(context).pushReplacement(
        MaterialPageRoute(builder: (context) => const HomeScreen()), // 这里替换成你的实际主页面
      );
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white, // 可自定义闪屏背景色
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 这里替换成你的应用Logo或其他展示内容
            const Icon(
              Icons.flutter_dash,
              size: 120,
              color: Colors.blue,
            ),
            const SizedBox(height: 40),
            // 带动画的进度条
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 40),
              child: AnimatedBuilder(
                animation: _progressAnimation,
                builder: (context, child) {
                  return LinearProgressIndicator(
                    value: _progressAnimation.value,
                    backgroundColor: Colors.grey[200],
                    color: Colors.blue,
                    minHeight: 8,
                    borderRadius: BorderRadius.circular(4),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

// 示例主页面，替换成你自己的主页面即可
class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('主页面')),
      body: const Center(child: Text('欢迎来到Flutter世界！')),
    );
  }
}

步骤2：设置闪屏为应用初始页面 #

在你的main.dart中，把初始路由指向闪屏页面：

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Splash Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const SplashScreen(), // 这里设置闪屏为首页
    );
  }
}

关键细节说明 #

• 同步动画与时长：AnimationController的时长设为3秒，和闪屏显示时间完全匹配，确保进度条刚好在3秒内完成加载，视觉体验更协调。
• 页面跳转逻辑：使用pushReplacement跳转主页面，这样用户无法通过返回键回到闪屏，符合常规闪屏的交互逻辑。
• 内存管理：在dispose方法中销毁动画控制器，这是Flutter开发中避免内存泄漏的基本操作，新手一定要养成这个习惯哦。
• 自定义扩展：你可以把示例中的Icon换成自己的应用Logo图片，调整背景色、进度条样式，让闪屏更贴合你的应用风格。

这样实现的闪屏完全满足你的需求：启动后显示3秒，进度条同步加载，时间到自动消失进入主页面。代码逻辑清晰，没有复杂依赖，非常适合新手入门尝试～

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