App Icon & Splash Screen
White-label VieLang Mobile bằng cách thay icon và splash screen thành thương hiệu riêng của bạn — không cần sửa code.
Danh sách file cần thay thế
Tất cả assets nằm trong thư mục assets/branding/:
| File | Kích thước | Mô tả |
|---|---|---|
icon_filled.png | 512×512px | Icon với nền màu |
icon_foreground.png | 438×438px | Icon foreground (nền trong suốt) |
icon_monochrome.png | 438×438px | Icon một màu (Android 13+) |
splash.png | 320×320px | Logo trên splash screen |
splash_android_12.png | Xem bên dưới | Splash cho Android 12+ |
Kích thước splash_android_12.png
| Loại | Kích thước | Ghi chú |
|---|---|---|
| Không có background | 1152×1152px | Hiển thị trong vòng tròn 768px |
| Có background | 960×960px | Hiển thị trong vòng tròn 640px |
Bước 1: Chuẩn bị assets
Xuất icon từ Figma / Illustrator
icon_filled.png:
- Canvas: 512×512px
- Logo + background màu thương hiệu
- Export: PNG, không nén
icon_foreground.png:
- Canvas: 512×512px (nội dung chiếm 438×438px center)
- Chỉ logo, nền trong suốt
- Padding 37px mỗi cạnh (safe zone adaptive icon)
icon_monochrome.png:
- Canvas: 512×512px
- Logo màu trắng/đen thuần, nền trong suốt
- Dùng cho widget và themed icon Android 13+
Bước 2: Thay thế files
# Copy assets vào thư mục branding
cp your-icon-filled.png assets/branding/icon_filled.png
cp your-icon-foreground.png assets/branding/icon_foreground.png
cp your-icon-mono.png assets/branding/icon_monochrome.png
cp your-splash.png assets/branding/splash.png
cp your-splash-a12.png assets/branding/splash_android_12.pngBước 3: Cấu hình App Icon
File pubspec.yaml (phần cuối):
flutter_launcher_icons:
android: "launcher_icon"
ios: true
remove_alpha_ios: true
# Android
image_path_android: "assets/branding/icon_filled.png"
adaptive_icon_background: "#YOUR_BRAND_COLOR"
adaptive_icon_foreground: "assets/branding/icon_foreground.png"
adaptive_icon_foreground_inset: 16
adaptive_icon_monochrome: "assets/branding/icon_monochrome.png"
min_sdk_android: 21
# iOS
image_path_ios: "assets/branding/icon_foreground.png"
background_color_ios: "#ffffff"
image_path_ios_dark: "assets/branding/icon_foreground.png"
background_color_ios_dark: "#1a1a2e"
image_path_ios_tinted: "assets/branding/icon_monochrome.png"
image_path_ios_dark_transparent: "assets/branding/icon_foreground.png"Bước 4: Cấu hình Splash Screen
File flutter_native_splash.yaml:
flutter_native_splash:
# Background màu
color: "#ffffff"
color_dark: "#1a1a2e"
# Logo
image: assets/branding/splash.png
image_dark: assets/branding/splash.png
# Android 12+
android_12:
image: assets/branding/splash_android_12.png
color: "#ffffff"
icon_background_color: "#YOUR_BRAND_COLOR"
image_dark: assets/branding/splash_android_12.png
color_dark: "#1a1a2e"
# Platforms
android: true
ios: true
web: falseBước 5: Generate assets
# Generate app icons
dart run flutter_launcher_icons
# Generate splash screens
dart run flutter_native_splash:create
# Kiểm tra
flutter run --dart-define-from-file configs.jsonĐổi tên app
Android — android/app/src/main/AndroidManifest.xml
<application android:label="Tên App Của Bạn" ...>iOS — ios/Runner/Info.plist
<key>CFBundleDisplayName</key>
<string>Tên App Của Bạn</string>Đổi package name
Android (android/app/build.gradle):
android {
defaultConfig {
applicationId "com.yourcompany.yourapp"
}
}iOS: Xcode → Project → General → Bundle Identifier.
Checklist White-label
-
icon_filled.png— icon với màu brand -
icon_foreground.png— icon nền trong suốt -
icon_monochrome.png— icon một màu -
splash.png— logo splash -
splash_android_12.png— splash Android 12+ -
pubspec.yaml— màu background adaptive icon -
flutter_native_splash.yaml— màu splash -
AndroidManifest.xml— tên app -
Info.plist— tên app iOS - Package name / Bundle ID đã đổi
-
dart run flutter_launcher_iconsđã chạy -
dart run flutter_native_splash:createđã chạy