如何在Flutter中原生添加动画启动页？旧方法报错且已废弃

旧文章里用的SplashScreen组件早已被Flutter官方废弃，这就是你遇到“无法解析SplashScreen”错误的核心原因。以下是当前主流的实现流程，分为原生启动页配置和Flutter动画过渡两部分：

一、先配置原生启动页（避免初始化白屏） #

Flutter引擎启动需要时间，先通过原生启动页填补这段空白，再过渡到Flutter的动画页面。我们用官方推荐的flutter_native_splash包快速生成各平台原生启动页：

1. 在pubspec.yaml添加依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_native_splash: ^2.3.11 # 建议使用最新版本

2. 在pubspec.yaml末尾添加启动页配置（按需修改）：

flutter_native_splash:
  color: "#ffffff" # 启动页背景色
  image: assets/images/splash_logo.png # 静态启动图标路径
  android: true # 为Android生成
  ios: true # 为iOS生成

3. 执行命令生成原生启动页文件：

flutter pub run flutter_native_splash:create

二、实现Flutter内的动画启动页 #

原生启动页显示完毕后，Flutter引擎初始化完成，进入第一个Flutter页面，在这里实现动画过渡到主页：

完整示例代码 #

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

void main() {
  // 启动时隐藏状态栏和导航栏（可选）
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '动画启动页示例',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const AnimatedSplashPage(),
    );
  }
}

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

  @override
  State<AnimatedSplashPage> createState() => _AnimatedSplashPageState();
}

class _AnimatedSplashPageState extends State<AnimatedSplashPage> with SingleTickerProviderStateMixin {
  late AnimationController _animController;
  late Animation<double> _scaleAnim;
  late Animation<double> _fadeAnim;

  @override
  void initState() {
    super.initState();
    // 初始化动画控制器，设置时长为2秒
    _animController = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 2),
    );

    // 缩放动画：从0.5倍放大到1倍，用回弹曲线
    _scaleAnim = Tween<double>(begin: 0.5, end: 1.0).animate(
      CurvedAnimation(parent: _animController, curve: Curves.easeOutBack),
    );

    // 渐隐动画：从完全显示到透明
    _fadeAnim = Tween<double>(begin: 1.0, end: 0.0).animate(
      CurvedAnimation(parent: _animController, curve: Curves.easeIn),
    );

    // 启动动画，完成后跳转到主页
    _animController.forward().whenComplete(() {
      Navigator.of(context).pushReplacement(
        MaterialPageRoute(builder: (context) => const HomePage()),
      );
      // 恢复状态栏显示（可选）
      SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: FadeTransition(
          opacity: _fadeAnim,
          child: ScaleTransition(
            scale: _scaleAnim,
            child: Image.asset('assets/images/splash_logo.png'), // 动画图标路径
          ),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('主页')),
      body: const Center(child: Text('欢迎使用')),
    );
  }
}

额外说明 #

• 你可以根据需求修改动画类型（比如平移、旋转）、时长、曲线，还能添加文字动画等效果。
• 原生启动页和Flutter动画页的背景色尽量保持一致，避免过渡时出现突兀的颜色变化。

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