8.4 启动优化与闪屏

App 冷启动速度直接影响用户留存。Flutter 项目的启动优化涉及原生闪屏配置、Dart 代码初始化策略和渲染首帧时间缩短。一、Native Splash Screen1.1 flutter_native_splash推荐dependencies:flutter_native_splash:^2.4.0# pubspec.yaml 或 flutter_native_splash.yamlflutter_native_splash:color:#FFFFFF# 背景色image:assets/splash/logo.png# 居中 Logocolor_dark:#121212# 暗色模式背景image_dark:assets/splash/logo_dark.png# 暗色模式 Logoandroid:trueios:trueweb:true# Android 12 启动画面android_12:color:#FFFFFFimage:assets/splash/icon.pngicon_background_color:#6750A4# 保持闪屏直到手动关闭# 设置为 true 后需要在 Dart 代码中手动关闭# preserve_splash_screen: true# 生成闪屏资源dart run flutter_native_splash:create1.2 手动保持闪屏importpackage:flutter_native_splash/flutter_native_splash.dart;voidmain()async{// 保持闪屏finalwidgetsBindingWidgetsFlutterBinding.ensureInitialized();FlutterNativeSplash.preserve(widgetsBinding:widgetsBinding);// 执行初始化任务awaitFuture.wait([Firebase.initializeApp(),PreferencesService.init(),DependencyInjection.setup(),]);runApp(constMyApp());// 初始化完成后移除闪屏FlutterNativeSplash.remove();}二、启动耗时分析2.1 测量启动时间# Androidflutter run --trace-startup--profile# 输出 build/start_up_info.json# {# engineEnterTimestampMicros: ...,# timeToFrameworkInitMicros: ..., ← Dart VM 初始化# timeToFirstFrameRasterizedMicros: ..., ← 首帧渲染完成# }# iOSflutter run --trace-startup--profile-dios_device2.2 Dart 代码级别测量voidmain()async{finalstopwatchStopwatch()..start();WidgetsFlutterBinding.ensureInitialized();debugPrint(绑定初始化:${stopwatch.elapsedMilliseconds}ms);awaitFirebase.initializeApp();debugPrint(Firebase 初始化:${stopwatch.elapsedMilliseconds}ms);awaitPreferencesService.init();debugPrint(Preferences 初始化:${stopwatch.elapsedMilliseconds}ms);awaitsetupDependencies();debugPrint(DI 初始化:${stopwatch.elapsedMilliseconds}ms);stopwatch.stop();debugPrint(总初始化时间:${stopwatch.elapsedMilliseconds}ms);runApp(constMyApp());}三、启动优化策略3.1 延迟初始化// ❌ 在 main() 中初始化所有东西voidmain()async{awaitFirebase.initializeApp();awaitHive.initFlutter();awaitPushNotificationService.init();// 非首帧必需awaitAnalyticsService.init();// 非首帧必需awaitAdService.init();// 非首帧必需runApp(constMyApp());}// ✅ 只初始化首帧必需的voidmain()async{WidgetsFlutterBinding.ensureInitialized();FlutterNativeSplash.preserve(widgetsBinding:WidgetsBinding.instance);// 必须在首帧前完成的awaitFirebase.initializeApp();awaitPreferencesService.init();runApp(constMyApp());FlutterNativeSplash.remove();// 首帧渲染后延迟初始化不阻塞首屏WidgetsBinding.instance.addPostFrameCallback((_)async{awaitPushNotificationService.init();awaitAnalyticsService.init();awaitAdService.init();});}3.2 并行初始化// ❌ 串行等待耗时累加awaitFirebase.initializeApp();// 200msawaitHive.initFlutter();// 100msawaitPreferencesService.init();// 50ms// 总计: 350ms// ✅ 并行执行耗时取最大值awaitFuture.wait([Firebase.initializeApp(),// 200msHive.initFlutter(),// 100msPreferencesService.init(),// 50ms]);// 总计: ~200ms3.3 首屏轻量化// ✅ 首帧渲染一个极轻量的 WidgetclassMyAppextendsStatelessWidget{overrideWidgetbuild(BuildContextcontext){returnMaterialApp(home:FutureBuilder(future:_loadInitialData(),// 异步加载builder:(context,snapshot){if(snapshot.connectionState!ConnectionState.done){// 轻量级骨架屏fast to renderreturnconstHomeSkeleton();}returnconstHomePage();},),);}}四、App 图标管理dependencies:flutter_launcher_icons:^0.13.1# pubspec.yamlflutter_launcher_icons:android:trueios:trueimage_path:assets/icon/app_icon.png# 自适应图标Androidadaptive_icon_background:#6750A4adaptive_icon_foreground:assets/icon/app_icon_foreground.png# Webweb:generate:trueimage_path:assets/icon/app_icon.pngbackground_color:#FFFFFFtheme_color:#6750A4# macOSmacos:generate:trueimage_path:assets/icon/app_icon.pngdart run flutter_launcher_icons小结优化方向手段原生闪屏flutter_native_splash保持至初始化完成延迟初始化非首帧必需的服务在addPostFrameCallback中初始化并行初始化Future.wait并发执行首屏轻量化骨架屏 FutureBuilder 异步加载数据App 图标flutter_launcher_icons批量生成各平台图标 下一节继续阅读后续章节