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
相关推荐
小红星闪啊闪15 小时前
Flutter开发 -- 需要了解的Dart知识
flutter
白玉cfc16 小时前
【iOS】push,pop和present,dismiss
macos·ios·cocoa
fatiaozhang952716 小时前
中国移动浪潮云电脑CD1000-系统全分区备份包-可瑞芯微工具刷机-可救砖
android·网络·电脑·电视盒子·刷机固件·机顶盒刷机
小李A_Z17 小时前
[Flutter]介绍些flutter的弹窗
flutter
小李A_Z17 小时前
[Flutter]介绍写Flutetr的按钮
flutter
低调小一17 小时前
iOS 开发入门指南-HelloWorld
ios
2501_9159184117 小时前
iOS 开发全流程实战 基于 uni-app 的 iOS 应用开发、打包、测试与上架流程详解
android·ios·小程序·https·uni-app·iphone·webview
lichong95117 小时前
【混合开发】vue+Android、iPhone、鸿蒙、win、macOS、Linux之dist打包发布在Android工程asserts里
android·vue.js·iphone
Android出海17 小时前
Android 15重磅升级:16KB内存页机制详解与适配指南
android·人工智能·新媒体运营·产品运营·内容运营
一只修仙的猿17 小时前
毕业三年后,我离职了
android·面试