Flutter App 图标与启动图自动生成

在 Flutter 中配置应用图标和启动图时，选择适当的尺寸对于确保应用在不同设备和分辨率下的显示效果非常重要。下面是图标和启动图的尺寸建议：

当然，也是可以自己手动到原生工程中自己配置的，如果想简单点可以通过自动生成的方式会比较节省时间。

1. 应用图标（App Icon）尺寸建议

对于应用图标，通常需要提供不同的分辨率来适应不同的屏幕密度。以下是建议的尺寸和对应的资源文件夹：

Android 图标尺寸建议

ldpi (低密度屏幕)：36x36 px
mdpi (中密度屏幕)：48x48 px
hdpi (高密度屏幕)：72x72 px
xhdpi (超高密度屏幕)：96x96 px
xxhdpi (超超高密度屏幕)：144x144 px
xxxhdpi (极高密度屏幕)：192x192 px

iOS 图标尺寸建议

AppIcon：
- 20x20 px（通知图标）
- 29x29 px（设置和通知图标）
- 40x40 px（通知图标）
- 60x60 px（主屏幕图标，iPhone）
- 76x76 px（iPad 主屏幕图标）
- 83.5x83.5 px（iPad Pro 主屏幕图标）
- 120x120 px（iPhone Retina）
- 180x180 px（iPhone Retina）

建议图标的最小尺寸是 512x512 px，这样可以确保生成其他尺寸时保持清晰，符合 Android 和 iOS 平台的要求。

2. 启动图（Splash Screen）尺寸建议

启动图的尺寸需要根据设备的分辨率和屏幕尺寸来进行调整，以下是常见的建议尺寸：

Android 启动图尺寸建议

ldpi (低密度屏幕)：200x320 px
mdpi (中密度屏幕)：320x480 px
hdpi (高密度屏幕)：480x800 px
xhdpi (超高密度屏幕)：720x1280 px
xxhdpi (超超高密度屏幕)：1080x1920 px
xxxhdpi (极高密度屏幕)：1440x2560 px

iOS 启动图尺寸建议

iPhone 8 / iPhone SE：640x1136 px
iPhone 8 Plus：1242x2208 px
iPhone X / XS：1125x2436 px
iPhone XR：828x1792 px
iPhone XS Max：1242x2688 px
iPhone 12 / 13 / 14：1170x2532 px
iPhone 12 Pro Max / 13 Pro Max / 14 Pro Max：1284x2778 px
iPad 7th Gen 和以上：768x1024 px
iPad Pro (12.9-inch) ：2048x2732 px

3. 如何生成图标和启动图

应用图标：

最小建议尺寸是 512x512 px。可以准备好这张图，然后使用 flutter_launcher_icons 插件来生成不同分辨率的图标。

启动图：

推荐准备一张 1242x2436 px 的图片，作为启动图源。flutter_native_splash 插件会根据它自动为不同分辨率的设备生成合适的启动图。

4. 生成图标和启动图

图标生成：

安装 flutter_launcher_icons

$ flutter pub add --dev flutter_launcher_icons

在 pubspec.yaml 中配置图标路径，并运行命令：

# 应用图标配置
flutter_launcher_icons:
  # 为 Android 配置图标
  android: true
  # 为 iOS 配置图标
  ios: true
  # 指定图标图片路径
  image_path: "assets/images/a_appicon.png"
  # android min sdk min:16, default 21
  # min_sdk_android: 21

然后运行：

# 推荐使用
$ flutter pub run flutter_launcher_icons

# 不推荐这个命令，已放弃
$ flutter pub run flutter_launcher_icons:main

生成后可以直接运行测试，不需要 flutter clean。

启动图生成：

安装 flutter_native_splash

$ flutter pub add --dev flutter_native_splash

在 pubspec.yaml 中配置启动图路径，并运行命令：

a_splash.png 推荐为正方形，需要展示的图片信息在正中间，因为 android_12 默认只会在启动图中间显示一个圆圈展示这个内容。

# 启动图配置
flutter_native_splash:
  # 为 Android 设置启动图
  # android: "launcher_icon" # 自定义 icon 名称
  android: true
  # 为 iOS 设置启动图
  ios: true
  # 设置启动图的背景颜色（二选一）
  # color: "#FFFFFF"
  # 设置启动图的背景图片（二选一）
  background_image: "assets/images/a_splash_bg.png"
  # 设置启动图的图片路径
  image: "assets/images/a_splash.png"
  # 配置 Android 12 及以上版本的启动图，只会显示中间一个圆圈
  android_12:
    # 设置启动图的图片路径，圆圈内的图片
    image: "assets/images/a_splash.png"
    # 圆圈内图片的背景颜色
    # icon_background_color: "#FFFFFF"
    # 设置启动图的背景颜色，圆圈外的使用背景颜色
    color: "#FFFFFF"