Flutter新手：移除默认启动页并通过Timer实现自定义启动页

你看到的默认启动页是Flutter的原生启动页，和Dart代码里的自定义启动页属于不同层级，所以必须先修改Android和iOS的原生配置移除它，再确保Dart端的启动页逻辑正常。

一、移除Android原生默认启动页 #

1. 打开项目路径：android/app/src/main/res/drawable/launch_background.xml
2. 替换文件内容为自定义启动样式（比如和你Dart启动页一致的纯色背景）：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 自定义背景色，对应你Dart代码里的Colors.indigo[300] -->
    <item android:drawable="@color/indigo_300" />
    <!-- 可选：添加自定义logo，取消注释并替换资源路径 -->
    <!--
    <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/your_custom_logo" />
    </item>
    -->
</layer-list>

3. 若使用自定义颜色，需在android/app/src/main/res/values/colors.xml中定义：

<color name="indigo_300">#9FA8DA</color>

二、移除iOS原生默认启动页 #

1. 打开iOS项目：终端执行open ios/Runner.xcworkspace，或直接用Xcode打开ios/Runner.xcworkspace
2. 两种方案选其一：
   • 方案1：替换启动图：找到Assets.xcassets里的LaunchImage.imageset，替换默认的3张图片为你的自定义启动图（尺寸对应1x:320x480、2x:640x960、3x:960x1440）
   • 方案2：用Storyboard自定义：打开LaunchScreen.storyboard，删除默认的Flutter logo和文字，添加你需要的背景色、logo等元素，保持和Dart启动页样式一致

三、优化Dart启动页代码 #

你的Timer逻辑核心没问题，修正几个小细节让代码更规范：

1. startSplashScreenTimer不需要async（Timer不是Future类型），直接简化：

void startSplashScreenTimer() {
  var _duration = Duration(seconds: 5);
  Timer(_duration, navigationToNextPage);
}

2. 遵循Dart大驼峰类名规范，把secondPage改为SecondPage，同时更新导入路径：

import 'package:splash_screen_flutter/second_page.dart'; // 对应文件名改为second_page.dart

3. Dart 2.0+无需new关键字，简化跳转代码：

void navigationToNextPage() {
  Navigator.pushAndRemoveUntil(
    context,
    MaterialPageRoute(builder: (context) => SecondPage()),
    (Route<dynamic> route) => false,
  );
}

四、验证效果 #

重新运行项目：

flutter run

现在启动时会先显示你配置的原生启动页（和Dart启动页无缝衔接），进入自定义启动页后5秒自动跳转到目标页面，不会再出现默认Flutter启动页。

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