如何移除Flutter中的系统默认启动页？自定义启动页后仍显示默认页

一、彻底移除系统默认启动页 #

你看到的系统默认启动页是Flutter引擎初始化前，Android/iOS原生平台加载的启动页，和你写的Flutter层SplashScreen无关。要消除它，必须让原生启动页和你的自定义启动页视觉完全一致，实现无缝过渡：

步骤1：用flutter_native_splash配置原生启动页 #

这个包专门用来生成和自定义页一致的原生启动页，解决默认页问题：

1. 在pubspec.yaml添加依赖：

dependencies:
  flutter_native_splash: ^2.3.11

2. 在pubspec.yaml末尾添加配置（和你的Flutter SplashScreen对齐）：

flutter_native_splash:
  color: "#替换成你的mainColor十六进制值" # 比如mainColor是蓝色就写"#0000FF"
  image: assets/images/logo.png # 和你Flutter代码里用的logo路径一致
  android: true
  ios: true

3. 运行命令生成原生启动页：

flutter pub run flutter_native_splash:create

运行后，Android和iOS的原生启动页会被替换成你配置的样式，用户再也看不到系统默认页。

步骤2：在Flutter层实现动画启动页 #

flutter_native_splash只做静态原生启动页，动画要在Flutter的SplashScreen里实现。修改你的代码，添加淡入动画效果：

import 'package:educationalapp/Screens/Wellcome.dart';
import 'package:educationalapp/values/colors.dart';
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 _animationController;
  late Animation<double> _fadeAnimation;

  @override
  void initState() {
    super.initState();
    // 初始化动画控制器，时长2秒
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 2),
    );
    // 淡入动画：从完全透明到不透明
    _fadeAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(_animationController);

    // 播放动画，完成后延迟2秒跳转到欢迎页
    _animationController.forward().then((_) {
      Future.delayed(const Duration(seconds: 2), () {
        // 用pushReplacement避免返回启动页
        Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => const WellcomePage()));
      });
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: double.infinity,
        width: double.infinity,
        color: mainColor,
        child: Center(
          // 用FadeTransition包裹图片，实现淡入效果
          child: FadeTransition(
            opacity: _fadeAnimation,
            child: Image(image: AssetImage('assets/images/logo.png')),
          ),
        ),
      ),
    );
  }
}

你可以根据需求替换动画类型，比如缩放、平移等，只要用对应的Transition组件即可。

为什么flutter_animated_splash还显示默认页？ #

这个包是Flutter层面的组件，还是要等Flutter引擎启动后才会显示，所以原生启动页依然会先出现。必须先配置原生启动页，才能彻底消除默认页。

二、无需完整依赖流程添加Flutter包的方法 #

如果不想通过pub仓库拉取依赖，推荐以下两种方法：

方法1：本地路径依赖（推荐） #

1. 在项目根目录创建packages文件夹，把要使用的包的代码克隆或复制到这个文件夹里；
2. 在pubspec.yaml里引用本地路径：

dependencies:
  包名:
    path: ./packages/包名文件夹名

这种方式保留了依赖管理的结构，方便后续升级和维护，同时不用走pub流程。

方法2：直接复制包代码到项目（不推荐，仅临时测试用） #

把包的lib目录下的所有代码复制到你项目的lib目录下（可以新建子文件夹存放），然后直接导入使用。但这种方式会污染你的代码结构，后续升级和排查依赖问题很麻烦，只适合临时测试极小的包。

注意：无论哪种方法，如果包本身依赖其他第三方包，你依然需要在自己的pubspec.yaml里添加这些依赖，否则会编译报错。

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