Flutter每日库 | flutter_native_splash：快速定制原生启动图，告别“白屏尴尬”

作为 Flutter 开发者，你是否苦恼于应用启动时的短暂“白屏”？虽然 Flutter 性能优秀，但原生启动画面的默认配置可能让用户体验打折扣。今天推荐一款神器——flutter_native_splash，只需简单配置，即可生成专业级启动画面，适配 Android、iOS 等多平台，甚至支持 Android 12 新特性！

---

🌟 为何选择 flutter_native_splash？

0. 一键生成：自动拷贝图片资源、生成多倍图，告别手动配置原生工程。
1. 灵活控制：支持背景色、图片、全屏模式，兼容深色主题（Dark Mode）。
2. 开发友好：可通过开发依赖模式减少包体积，仅需几行代码延迟移除启动图。

---

📦 安装指南：两种模式按需选择

1. 基础模式（开发依赖）

若启动图展示时间较短（如快速加载首页），推荐将插件添加至 dev_dependencies：

dev_dependencies:
  flutter_native_splash: ^2.4.7

2. 延长展示模式

需手动控制启动图移除时机时，使用常规依赖并在代码中调用：

import 'package:flutter_native_splash/flutter_native_splash.dart';
​
void main() {
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding); // 保留启动图
  runApp(const MyApp());
}
​
// 初始化完成后移除启动图（如网络请求后）
FlutterNativeSplash.remove();

---

⚙️ 配置详解：YAML 文件的艺术

建议将配置独立为 flutter_native_splash.yaml，避免污染 pubspec.yaml。以下是核心参数解析：

flutter_native_splash:
  web: false  # 禁用 Web 平台启动图
  background_image: "assets/images/3.0x/FullBg.png"  # 背景图（与color二选一）
  image: assets/images/LogoWhite.png  # 中心 Logo 图片
  fullscreen: true  # 全屏显示（隐藏状态栏）
​
  # Android 12+ 专属配置（适配新启动动画API）
  android_12:
    color: "#42a5f5"  # 背景色
    image: assets/images/LogoWhite.png  # 中心图标
    # image_dark: assets/logo_dark.png  # 深色模式图标（可选）

更多配置请参考官方文档。

✅ 关键提示：

• 图片路径：务必确保路径正确，推荐将图片统一存放于 assets/splash 目录。
• 多分辨率适配：为高清屏提供 @2x、@3x 图片（如示例中的 FullBg.png）。
• Android 12：若不配置 android_12 字段，高版本设备可能显示默认动画。

---

生成与生效：命令行一触即发

执行以下命令，插件会自动修改原生工程配置：

dart run flutter_native_splash:create --path=./flutter_native_splash.yaml

重启应用即可看到全新启动图！

---

💡 避坑指南

0. Android 12 兼容性：部分设备可能因系统限制无法显示自定义背景图，需按文档配置 android_12 字段。
1. 图片格式：仅支持 PNG 格式，且中心 Logo 建议为 4 倍图以保证清晰度。
2. 深色模式：通过 image_dark 和 color_dark 字段可适配深色主题，提升用户体验。