Flutter中Firebase.initializeApp前置调用耗时过长，如何显示启动页或加载页？

嘿，这个问题我太有共鸣了！Firebase初始化那会儿的空白等待真的很影响用户第一印象，我之前做项目的时候试过几个靠谱的方案，分享给你：

其实Flutter在runApp执行前的代码都是跑在原生Android/iOS层的，所以用原生的启动页是最无缝的选择——它会自动在Firebase初始化期间一直显示，直到Flutter主页面加载完成，完全不会有白屏或者卡顿。

简单配置步骤（不用改Flutter代码）： #

• Android：找到android/app/src/main/res/drawable/launch_background.xml，把里面的占位图换成你的启动图/Logo，调整背景色到你想要的样式就行。
• iOS：打开ios/Runner/LaunchScreen.storyboard，用Xcode拖入你的启动图，调整布局和背景色，系统会自动在初始化阶段显示这个页面。

你的原main函数完全不用改，原生启动页会帮你搞定等待期间的显示~

如果不想碰原生代码，或者需要带进度提示的定制化加载效果，可以先启动一个极简的加载页，后台偷偷做Firebase初始化，完成后再切换到主应用。

代码示例：

void main() {
  // 先启动加载页
  runApp(const SplashLoadingPage());
  // 后台执行初始化
  _initAppAndSwitch();
}

Future<void> _initAppAndSwitch() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  // 初始化完成，切换到主应用
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white,
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 替换成你的应用Logo
              Image.asset('assets/app_logo.png', height: 120),
              const SizedBox(height: 24),
              const CircularProgressIndicator(color: Colors.deepOrange),
              const SizedBox(height: 12),
              const Text('正在准备应用...', style: TextStyle(fontSize: 16)),
            ],
          ),
        ),
      ),
    );
  }
}

这个方法的好处是快速实现，不用改原生配置，而且能加各种动画效果提升体验。

如果想把初始化逻辑和页面状态绑定，还能处理初始化失败的情况，FutureBuilder是个不错的选择——把初始化逻辑放到MyApp里，根据异步状态决定显示加载页还是主页面。

代码示例：

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

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

  // 封装所有初始化逻辑
  Future<void> _initializeEverything() async {
    WidgetsFlutterBinding.ensureInitialized();
    await Firebase.initializeApp();
    // 这里还能加其他初始化，比如读取本地缓存、请求配置接口等
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FutureBuilder(
        future: _initializeEverything(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            // 等待时显示加载页
            return const SplashScreen();
          } else if (snapshot.hasError) {
            // 初始化失败，显示错误处理页
            return const ErrorPage();
          } else {
            // 一切就绪，显示主页面
            return const HomePage();
          }
        },
      ),
    );
  }
}

// 自定义加载页
class SplashScreen extends StatelessWidget {
  const SplashScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[50],
      body: Center(child: Image.asset('assets/splash.png')),
    );
  }
}

这个方案的优势是逻辑集中，能统一处理成功/失败/等待三种状态，适合复杂一点的初始化场景。

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