flutter 配置 安卓、Ios启动图

android 配置启动图

launch_background.xml

复制代码
<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="?android:colorBackground" />
<item>
        <bitmap
           android:gravity="fill"
            android:src="@mipmap/launch" />
    </item>
    <!-- You can insert your own image assets here -->
    <!-- <item>
        <bitmap
            android:gravity="fill"
            android:src="@mipmap/launch_image" />
    </item> -->
</layer-list>

注意:这里在drawable和drawable-v21目录中的两个文件都需要更换android:gravity="fill" 就是铺满,android:gravity="center",图片居中,通常用于 logo + 纯色背景

AndroidManifest.xml

android:theme="@style/LaunchTheme" 如下图添加位置

复制代码
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
 <!-- 这里必须设置 -->
    <application
        android:label="storeapp"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">
        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:launchMode="singleTop"
            android:taskAffinity=""
             android:theme="@style/LaunchTheme" 
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">

mipmap-mdpi

这几个文件内部吧launch.png图片放进去

  • 重新运行就可以了

iOS 启动页配置

iOS的启动页通常是Storyboard文件:ios/Runner/Base.lproj/LaunchScreen.storyboard

步骤

  1. 打开 ios/Runner.xcworkspace(Xcode工程)
  2. 到 LaunchScreen.storyboard 文件
  3. 你可以在Storyboard里编辑启动页的布局、图片和背景颜色
  4. 启动页的颜色也可以在 Info.plist 的 UILaunchStoryboardName 项确认为 LaunchScreen

推荐自动化方案 你也可以用Flutter插件

  • 你也可以用Flutter插件 flutter_native_splash 来自动帮你生成配置启动页。

使用示例

复制代码
安装插件
dev_dependencies:
  flutter_native_splash: ^2.2.10

yaml配置

复制代码
flutter_native_splash:
  color: "#ffffff"  # 启动页背景色(可根据图片底色自定义)
  image: assets/launch.png  # 一整张图的路径
  android: true
  ios: true
  fullscreen: true  # 推荐设置为 true,一整张图全屏展示


解构
your_project/
├── assets/
│   └── launch.png   ← 一整张启动图

在 pubspec.yaml 中声明图片资源

复制代码
flutter:
  assets:
    - assets/launch.png

运行

复制代码
flutter pub run flutter_native_splash:create
相关推荐
2601_949970697 小时前
HumanizeDuration 跨端三方库仓颉适配全流程
前端·javascript·flutter
独隅8 小时前
Claude API 实战教程:从入门到完整项目
android·java·数据库·claude·claude code
传奇开心果编程9 小时前
【Flutter踩坑排雷】第3课:const 误用坑|const 错误使用引发 UI 异常与性能损耗
flutter·移动开发·跨平台·dart·编程语言理论·编程框架·声明式ui
程序员老刘11 小时前
你的Flutter项目要不要紧急升级3.47.8?
flutter·客户端
且随疾风前行.12 小时前
Paint Cavans高级绘制:[一]Paint画笔高级应用
android·ui
Talyra4213 小时前
不想开会员,我写了一个记账 App
flutter
VicLi13 小时前
把常用 iOS 调试操作放进一个 macOS 控制台: iCATBox
ios
郑州光合科技余经理13 小时前
同城小程序开发:同一笔单在用户端和商家端各显示到哪
android·java·开发语言·前端·后端·uni-app·php
茶底世界之下14 小时前
雾景需要更强反差吗?用 Awaking 检查树影与雾气的平衡
ios
pigdreams15 小时前
Google 官方 Android CLI:让AI直接读布局结构而不是用adb截图验证
android·人工智能·adb