flutter如何实现flutter_native_splash插件

在Flutter项目中如何使用flutter_native_splash插件实现自定义启动页？我按照官方文档添加了依赖并配置了flutter_native_splash.yaml文件，但编译后启动页没有变化。是否需要额外设置Android和iOS的原生配置？如果希望动态调整启动页的图片或背景色，应该如何实现？

2 回复

使用flutter_native_splash插件实现启动屏：

  1. 在pubspec.yaml添加依赖
  2. 配置flutter_native_splash参数
  3. 运行flutter pub run flutter_native_splash:create
  4. 自动生成各平台启动图

支持自定义颜色、图片和状态栏样式。

更多关于flutter如何实现flutter_native_splash插件的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


Flutter 中实现类似 flutter_native_splash 插件的功能，主要是通过配置原生启动页（Android 的 launch_background.xml 和 iOS 的 LaunchScreen.storyboard）来实现。以下是手动实现步骤：

Android 配置

  1. 准备启动图片
    将启动图片（如 splash.png）放入 android/app/src/main/res/drawable 目录。

  2. 修改 launch_background.xml
    编辑 android/app/src/main/res/drawable/launch_background.xml，设置图片为背景：

    <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/launch_background_color" /> <!-- 可选背景色 -->
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/splash" />
    </item>
</layer-list>

  3. 调整主题
    确保 android/app/src/main/res/values/styles.xml 中的启动主题使用该背景：

    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
    <item name="android:windowBackground">@drawable/launch_background</item>
</style>

iOS 配置

  1. 替换启动图片
    在 Xcode 中打开 ios/Runner/Assets.xcassets/LaunchImage.imageset，替换为你的启动图片。

  2. 修改 LaunchScreen.storyboard（可选）
    如果需要自定义布局，可编辑 LaunchScreen.storyboard，添加 ImageView 并约束到父视图。

Flutter 端处理

在 main.dart 中延迟隐藏启动页，确保 Flutter 加载完成：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 可选：延迟确保启动页显示足够时间
  await Future.delayed(const Duration(milliseconds: 500));
  
  runApp(MyApp());
}

注意事项

  • 图片尺寸：需适配不同屏幕密度（Android 的 drawable-xxxhdpi、iOS 的多种分辨率）。
  • 平台差异：Android 和 iOS 的启动页机制不同，需分别配置。
  • 动态内容：原生启动页仅支持静态内容，复杂效果需在 Flutter 中实现。

通过以上步骤，即可手动实现启动页功能。使用 flutter_native_splash 插件可自动化此过程，但理解原理有助于自定义需求。

回到顶部