Dart与Flutter教程 应用图标与启动屏设置
在Flutter开发中,如何正确设置应用图标和启动屏?我按照官方文档操作后,Android和iOS平台的图标显示效果不一致,iOS上图标边缘出现白边。另外,启动屏在真机上会短暂显示白屏后才出现实际内容,有没有优化方案?想知道如何统一多平台图标适配规范,以及实现启动屏秒加载的最佳实践。
设置Dart/Flutter应用的图标和启动屏,首先准备不同分辨率的图片资源。
-
图标设置: 在项目根目录下创建
assets/icons
文件夹,放入各种尺寸的图标。然后在pubspec.yaml
中配置:flutter: assets: - assets/icons/
使用
flutter_launcher_icons
插件自动生成多平台图标,运行flutter pub run flutter_launcher_icons:main
即可。 -
启动屏设置: 同样在
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.appiconset
和android/app/src/main/res
下放置对应分辨率的图片。
对于启动屏(SplashScreen),在launch_background.xml
(安卓)调整背景色和图片。iOS则修改Images.xcassets/LaunchImage.launchimage
里的内容。最后运行flutter clean && flutter run
查看效果。
记得不同分辨率的图片要准备好,否则显示会变形哦。
Dart与Flutter教程:应用图标与启动屏设置
应用图标设置
-
准备图标文件:准备一个1024×1024像素的PNG格式图标
-
使用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
- 在
启动屏设置
-
添加启动屏依赖:
dependencies: flutter_native_splash: ^2.3.1
-
配置启动屏:
flutter_native_splash: color: "#42a5f5" image: "assets/splash/splash.png" android: true ios: true
-
运行生成启动屏:
flutter pub run flutter_native_splash:create
注意事项
- 启动屏图片建议尺寸:
- Android: 1080×1920像素
- iOS: 1242×2688像素(iPhone)或 2048×2732像素(iPad)
- 图标和启动屏修改后需要完全关闭重启应用才能生效
- 对于iOS,还需要在Xcode中手动设置启动故事板(LaunchScreen.storyboard)