Flutter一键生成Android、 iOS启动页

使用 flutter_native_splash 插件，一键生成启动页，支持Android、iOS、Web。

除了能生成不同平台、不同尺寸的启动图，它还能区分浅色与深色主题，这一点我很喜欢。

（试想一下，手机设置了深色主题，点开某个App时，弹出了白色的启动页，这App太没品味了。）

使用步骤

安装

flutter pub add dev:flutter_native_splash

配置文件

重要提示：Android 12及更高版本，需要单独配置在文件中的android_12部分。

创建flutter_native_splash.yaml文件：

简单配置全部参数

yaml

flutter_native_splash:
  color: "#ffffff"
  color_dark: "#151515"
  android_12:
    color: "#ffffff"
    color_dark: "#151515"

yaml

flutter_native_splash:

  # color 或 background_image 是唯一的必填参数。
  # 使用 color 设置启动屏的背景为纯色。
  # 使用 background_image 设置启动屏的背景为 PNG 图片（适用于渐变等效果）。
  # 图片会被拉伸至应用大小。color 和 background_image 不能同时设置。
  color: "#42a5f5"
  background_image: "assets/background.png"

  # 以下是可选参数。启用参数时，需要去掉前面的 # 符号。

  # image 参数允许指定启动屏图片，必须为 PNG 格式，且应为 4x 像素密度。
  image: assets/splash.png

  # branding 参数允许指定一个用于启动屏中的品牌标识图片。
  # 它必须是 PNG 文件，支持 Android、iOS 和 Web。关于 Android 12，请参阅下方的 android_12 部分。
  branding: assets/dart.png

  # 将品牌标识图片放置在屏幕底部，可以使用 bottom、bottomRight 和 bottomLeft。
  # 如果未指定或设置了其他值，默认值为 bottom。
  branding_mode: bottom
  
  # 设置品牌标识图片距离屏幕底部的间距，默认值为 0。
  branding_bottom_padding: 24

  # color_dark、background_image_dark、image_dark 和 branding_dark 是用于设备处于深色模式时的背景和图片参数。
  # 如果未指定深色模式参数，则应用将使用上述普通模式的参数。
  # 如果指定了 image_dark，则必须指定 color_dark 或 background_image_dark。
  # color_dark 和 background_image_dark 不能同时设置。
  color_dark: "#042a49"
  background_image_dark: "assets/dark-background.png"
  image_dark: assets/splash-invert.png
  branding_dark: assets/dart_dark.png

  # 从 Android 12 开始，启动屏处理方式与之前版本不同。
  # 请访问 https://developer.android.com/guide/topics/ui/splash-screen 查看详情。
  # 以下是 Android 12+ 的特定参数。
  android_12:
    # image 参数设置启动屏的图标图片。如果未指定此参数，将使用应用的启动图标。
    # 请注意，启动屏图片将被裁剪为屏幕中央的圆形区域。
    # 含背景的图标：建议大小为 960×960 像素，放置在直径 640 像素的圆形区域内。
    # 无背景的图标：建议大小为 1152×1152 像素，放置在直径 768 像素的圆形区域内。
    image: assets/android12splash.png

    # 启动屏背景颜色
    color: "#42a5f5"

    # 应用图标背景颜色
    icon_background_color: "#111111"

    # branding 参数允许指定一个用于启动屏中的品牌标识图片。
    branding: assets/dart.png

    # image_dark、color_dark、icon_background_color_dark 和 branding_dark 是用于深色模式的参数。
    # 如果未指定，则使用普通模式的参数。
    image_dark: assets/android12splash-invert.png
    color_dark: "#042a49"
    icon_background_color_dark: "#eeeeee"

  # android、ios 和 web 参数可用于禁用某个平台的启动屏。
  android: false
  ios: false
  web: false

  # 平台特定的图片可以通过以下参数指定，这些参数会覆盖对应的普通参数。
  # 您可以选择全部、部分或不指定这些参数：
  color_android: "#42a5f5"
  color_dark_android: "#042a49"
  color_ios: "#42a5f5"
  color_dark_ios: "#042a49"
  color_web: "#42a5f5"
  color_dark_web: "#042a49"
  image_android: assets/splash-android.png
  image_dark_android: assets/splash-invert-android.png
  image_ios: assets/splash-ios.png
  image_dark_ios: assets/splash-invert-ios.png
  image_web: assets/splash-web.gif
  image_dark_web: assets/splash-invert-web.gif
  background_image_android: "assets/background-android.png"
  background_image_dark_android: "assets/dark-background-android.png"
  background_image_ios: "assets/background-ios.png"
  background_image_dark_ios: "assets/dark-background-ios.png"
  background_image_web: "assets/background-web.png"
  background_image_dark_web: "assets/dark-background-web.png"
  branding_android: assets/brand-android.png
  branding_bottom_padding_android: 24
  branding_dark_android: assets/dart_dark-android.png
  branding_ios: assets/brand-ios.png
  branding_bottom_padding_ios: 24
  branding_dark_ios: assets/dart_dark-ios.png
  branding_web: assets/brand-web.gif
  branding_dark_web: assets/dart_dark-web.gif

  # splash 图片的位置可以通过 android_gravity、ios_content_mode 和 web_image_mode 参数设置。
  # 默认值为 center。
  #
  # android_gravity 的可选值参考 Android Gravity 文档：
  # https://developer.android.com/reference/android/view/Gravity
  # 可选值：bottom、center、center_horizontal、center_vertical、clip_horizontal、clip_vertical、end、fill、fill_horizontal、fill_vertical、left、right、start 或 top。
  android_gravity: center
  #
  # ios_content_mode 的可选值参考 iOS UIView.ContentMode 文档：
  # https://developer.apple.com/documentation/uikit/uiview/contentmode
  # 可选值：scaleToFill、scaleAspectFit、scaleAspectFill、center、top、bottom、left、right、topLeft、topRight、bottomLeft 或 bottomRight。
  ios_content_mode: center
  #
  # web_image_mode 的可选值：center、contain、stretch 和 cover。
  web_image_mode: center

  # 可以通过 android_screen_orientation 参数设置 Android 的屏幕方向。
  # 有效值参考：
  # https://developer.android.com/guide/topics/manifest/activity-element#screen
  android_screen_orientation: sensorLandscape

  # 如果需要隐藏通知栏，请使用 fullscreen 参数。此参数在 Web 中无效，因为 Web 没有通知栏。默认为 false。
  # 注意：与 Android 不同，iOS 在应用加载时不会自动显示通知栏。
  # 如果需要在 iOS 中显示通知栏，请在 Flutter 应用中添加以下代码：
  # WidgetsFlutterBinding.ensureInitialized();
  # SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [SystemUiOverlay.bottom, SystemUiOverlay.top], );
  fullscreen: true

  # 如果修改了 info.plist 文件的名称，可以通过 info_plist_files 参数指定文件路径：
  info_plist_files:
    - 'ios/Runner/Info-Debug.plist'
    - 'ios/Runner/Info-Release.plist'

生成

dart run flutter_native_splash:create

撤销

还原成Flutter默认的启动页。

dart run flutter_native_splash:remove

Flutter一键生成Android、 iOS启动页 ​

使用步骤 ​

安装 ​

配置文件 ​

生成 ​

撤销 ​

Flutter一键生成Android、 iOS启动页

使用步骤

安装

配置文件

生成

撤销