Dart与Flutter教程 应用图标与启动屏设置

在Flutter开发中,如何正确设置应用图标和启动屏?我按照官方文档操作后,Android和iOS平台的图标显示效果不一致,iOS上图标边缘出现白边。另外,启动屏在真机上会短暂显示白屏后才出现实际内容,有没有优化方案?想知道如何统一多平台图标适配规范,以及实现启动屏秒加载的最佳实践。

3 回复

设置Dart/Flutter应用的图标和启动屏,首先准备不同分辨率的图片资源。

  1. 图标设置: 在项目根目录下创建assets/icons文件夹,放入各种尺寸的图标。然后在pubspec.yaml中配置:

    flutter:
      assets:
        - assets/icons/
    

    使用flutter_launcher_icons插件自动生成多平台图标,运行flutter pub run flutter_launcher_icons:main即可。

  2. 启动屏设置: 同样在pubspec.yaml添加启动图资源路径。准备launch_background.xml(Android)和Assets.xcassets/LaunchImage.launchimage(iOS)。 Android需修改styles.xml

    <style name="LaunchTheme" parent="Theme.AppCompat">
        <item name="android:windowBackground">@drawable/launch_background</item>
    </style>
    

    iOS则直接拖拽图片到对应文件夹。完成后执行flutter clean && flutter pub get更新资源。

更多关于Dart与Flutter教程 应用图标与启动屏设置的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


设置Dart/Flutter应用的图标和启动屏很简单。首先准备不同分辨率的图标文件(如icon.png),然后在pubspec.yaml中配置:

flutter:
  uses-material-design: true
  assets:
    - assets/icon/
  icon: 
    image_path: assets/icon/icon.png

接着替换启动画面:在ios/Runner/Assets.xcassets/AppIcon.appiconsetandroid/app/src/main/res下放置对应分辨率的图片。

对于启动屏(SplashScreen),在launch_background.xml(安卓)调整背景色和图片。iOS则修改Images.xcassets/LaunchImage.launchimage里的内容。最后运行flutter clean && flutter run查看效果。

记得不同分辨率的图片要准备好,否则显示会变形哦。

Dart与Flutter教程:应用图标与启动屏设置

应用图标设置

  1. 准备图标文件:准备一个1024×1024像素的PNG格式图标

  2. 使用Flutter工具生成图标

    • pubspec.yaml中添加依赖:
      dev_dependencies:
        flutter_launcher_icons: ^0.13.1
      
    • 配置图标:
      flutter_icons:
        android: true
        ios: true
        image_path: "assets/icon/icon.png"
      
    • 运行命令生成图标:
      flutter pub run flutter_launcher_icons:main
      

启动屏设置

  1. 添加启动屏依赖

    dependencies:
      flutter_native_splash: ^2.3.1
    
  2. 配置启动屏

    flutter_native_splash:
      color: "#42a5f5"
      image: "assets/splash/splash.png"
      android: true
      ios: true
    
  3. 运行生成启动屏

    flutter pub run flutter_native_splash:create
    

注意事项

  • 启动屏图片建议尺寸:
    • Android: 1080×1920像素
    • iOS: 1242×2688像素(iPhone)或 2048×2732像素(iPad)
  • 图标和启动屏修改后需要完全关闭重启应用才能生效
  • 对于iOS,还需要在Xcode中手动设置启动故事板(LaunchScreen.storyboard)
回到顶部