如何移除Flutter应用中的默认启动页（Splash Screen）

第一步：彻底干掉原生默认启动页 #

默认的Flutter启动页是Android/iOS原生层自带的，Flutter层面的包根本管不到它，必须先从原生配置下手：

Android端操作 #

1. 打开android/app/src/main/res/drawable/launch_background.xml
2. 删掉里面的Flutter图标代码，改成和你自定义启动页一致的背景色：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/your_custom_bg_color" />
    <!-- 把原来带Flutter图标的<item>节点删掉 -->
</layer-list>

iOS端操作 #

1. 打开ios/Runner/Assets.xcassets/LaunchImage.imageset
2. 把里面的默认LaunchImage替换成和你自定义启动页背景一致的图，或者直接用透明图；也可以编辑LaunchScreen.storyboard，删掉默认Flutter图标，设置纯色背景。

嫌原生改代码麻烦？用flutter_native_splash配置一个无图标原生启动页更快捷：
在pubspec.yaml里加配置：

flutter_native_splash:
  color: "#your_custom_bg_color"
  # 不要设置image参数，这样就只有纯色背景
  android: true
  ios: true

然后运行flutter pub run flutter_native_splash:create，原生启动页就会变成你要的背景。

第二步：实现带动画的自定义启动页 #

原生默认页搞定后，就可以放心做动画启动页了，用animated_splash_screen或者自己写都可以：

用animated_splash_screen的示例代码 #

import 'package:flutter/material.dart';
import 'package:animated_splash_screen/animated_splash_screen.dart';
import 'package:page_transition/page_transition.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: AnimatedSplashScreen(
        splash: Column(
          children: [
            // 这里放你的动画组件，比如旋转的Logo
            RotationTransition(
              turns: Tween(begin: 0.0, end: 1.0).animate(
                CurvedAnimation(
                  parent: AnimationController(
                    vsync: const SingleTickerProviderStateMixin(),
                    duration: const Duration(seconds: 2),
                  )..forward(),
                  curve: Curves.easeInOut,
                ),
              ),
              child: const Icon(Icons.star, size: 100, color: Colors.yellow),
            ),
            const SizedBox(height: 20),
            const Text('我的应用'),
          ],
        ),
        nextScreen: const HomePage(),
        splashTransition: SplashTransition.fadeTransition,
        pageTransitionType: PageTransitionType.fade,
        backgroundColor: Colors.white, // 必须和原生启动页背景色完全一致
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(title: const Text('首页')));
  }
}

关键提醒 #

• 原生启动页和Flutter动画页的背景色必须完全匹配，这样切换时才不会有闪屏感。
• 动画启动页里别塞太重的初始化逻辑，尽量把耗时操作放在动画执行时异步处理，避免启动延迟。

排查小技巧 #

• 如果还是出现默认启动页，先跑flutter clean清缓存再重新编译；再检查Android的launch_background.xml和iOS的LaunchScreen配置是否生效。
• 要是flutter_native_splash没生效，确认你运行了生成命令，并且配置里的颜色/路径没写错。

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