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
相关推荐
韩仔搭建22 分钟前
第二章:安卓端启动流程详解与疑难杂症调试手册
android·ui·娱乐
A-花开堪折24 分钟前
Android7 Input(七)App与input系统服务建立连接
android
冰糖葫芦三剑客24 分钟前
Android 自定义悬浮拖动吸附按钮
android
吃汉堡吃到饱28 分钟前
【Android】从Choreographer到UI渲染(二)
android·ui
微信公众号:AI创造财富41 分钟前
显示的图标跟UI界面对应不上。
android·ui
安和昂1 小时前
iOS 工厂模式
ios
aningxiaoxixi1 小时前
安卓 Audio Stream 类型
android
程序猿阿伟1 小时前
《社交应用动态表情:RN与Flutter实战解码》
javascript·flutter·react native
明似水1 小时前
Flutter 开发入门:从一个简单的计数器应用开始
前端·javascript·flutter
周胡杰1 小时前
组件导航 (Navigation)+flutter项目搭建-混合开发+分栏
数码相机·flutter·华为·电脑·harmonyos·鸿蒙