flutter如何设置启动页

在Flutter中如何设置应用的启动页？我已经尝试在Android和iOS原生代码中配置，但启动时仍然会短暂显示白屏。有没有办法通过纯Flutter代码实现，或者需要分别修改两个平台的配置？具体应该修改哪些文件，是否需要添加特定的图片资源？

2 回复

在Flutter中设置启动页，需在android/app/src/main/res/drawable和ios/Runner/Assets.xcassets/LaunchImage.imageset中分别配置Android和iOS的启动图片。同时，在pubspec.yaml中添加flutter_native_splash插件可简化配置。

更多关于flutter如何设置启动页的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中设置启动页（启动画面）可以通过以下两种方式实现：

1. 使用原生配置（推荐）

启动页通常由原生系统控制，需要在 Android 和 iOS 项目中分别配置：

Android 配置

  1. 打开 android/app/src/main/res/drawable/launch_background.xml
  2. 修改或添加启动页背景（可设置颜色或图片）：
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/white"/> <!-- 背景色 -->
    
    <!-- 如需添加图片 -->
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/launch_image"/>
    </item>
</layer-list>

iOS 配置

  1. 在 Xcode 中打开 ios/Runner/Assets.xcassets/LaunchImage.imageset
  2. 替换启动图片（需准备 @1x、@2x、@3x 尺寸）
  3. 或修改 LaunchScreen.storyboard 来自定义界面

2. 使用 flutter_native_splash 包（最简便）

  1. 添加依赖：
dev_dependencies:
  flutter_native_splash: ^2.3.1
  1. 在 pubspec.yaml 中配置：
flutter_native_splash:
  color: "#ffffff"  # 背景颜色
  image: assets/splash.png  # 启动图片
  android: true
  ios: true
  1. 执行命令：
flutter pub get
flutter pub run flutter_native_splash:create

注意事项

  • 原生配置能获得更好的性能体验
  • 使用包的方式会自动生成所有尺寸的启动图
  • 启动页显示期间应用正在初始化，不建议在此执行复杂逻辑

完成配置后重新编译应用即可看到新的启动页效果。

回到顶部