From c649f0254248538bbb1de641d33c49725e20b89d Mon Sep 17 00:00:00 2001 From: "very-good-code-bot[bot]" <269805761+very-good-code-bot[bot]@users.noreply.github.com> Date: Mon, 29 Jun 2026 09:34:03 +0000 Subject: [PATCH 1/3] docs: add guide for updating app icons on core template Closes #768 Co-authored-by: marcossevilla --- site/docs/templates/core.md | 96 ++++++++++++++++++++++++++++++++++--- 1 file changed, 90 insertions(+), 6 deletions(-) diff --git a/site/docs/templates/core.md b/site/docs/templates/core.md index 7627c767c..f1d70498a 100644 --- a/site/docs/templates/core.md +++ b/site/docs/templates/core.md @@ -247,26 +247,109 @@ Out of the box, on each pull request and push, the CI `formats`, `lints`, and `t ## Updating App Icons 📱 -When you create a new project, it has a default launcher icon. To customize this icon, you can do it by using the following steps for each platform. +When you create a new project, it has a default launcher icon. To customize this icon, you can either use the [`flutter_launcher_icons`][flutter_launcher_icons_pub] package (recommended) or update the icons manually for each platform. -### Android +:::info +Very Good Core ships with separate icons for each flavor (`development`, `staging`, `production`). When updating icons, remember to update each flavor's icons. +::: + +### Using flutter_launcher_icons (Recommended) + +[`flutter_launcher_icons`][flutter_launcher_icons_pub] automates the generation of launcher icons from a single source image across all supported platforms. + +1. Add `flutter_launcher_icons` to the `dev_dependencies` in your `pubspec.yaml`: + +```sh +flutter pub add --dev flutter_launcher_icons +``` + +2. Place your source icon (for example, `assets/icon/icon.png`) in your project and add a configuration block to `pubspec.yaml`. Since Very Good Core uses flavors, you should also create a dedicated configuration file per flavor (for example, `flutter_launcher_icons-development.yaml`, `flutter_launcher_icons-staging.yaml`, `flutter_launcher_icons-production.yaml`): + +```yaml +# flutter_launcher_icons-production.yaml +flutter_launcher_icons: + image_path: "assets/icon/icon.png" + android: "ic_launcher" + min_sdk_android: 21 + ios: true + remove_alpha_ios: true + web: + generate: true + image_path: "assets/icon/icon.png" + background_color: "#hexcode" + theme_color: "#hexcode" + windows: + generate: true + image_path: "assets/icon/icon.png" + icon_size: 48 + macos: + generate: true + image_path: "assets/icon/icon.png" +``` + +3. Generate the icons for each flavor: + +```sh +# Production +dart run flutter_launcher_icons -f flutter_launcher_icons-production.yaml + +# Staging +dart run flutter_launcher_icons -f flutter_launcher_icons-staging.yaml + +# Development +dart run flutter_launcher_icons -f flutter_launcher_icons-development.yaml +``` + +4. Run the app to verify the icons were updated: + +```sh +flutter run --flavor development --target lib/main_development.dart +``` + +:::tip +For advanced configuration (such as adaptive icons on Android, image padding, or background/foreground assets), refer to the [`flutter_launcher_icons` documentation][flutter_launcher_icons_pub]. +::: + +### Manual Update + +If you prefer to replace the icons by hand, follow the steps below for each platform. Repeat the steps for each flavor by using the corresponding Android source set (`development`, `staging`, `main`) and the matching iOS/macOS `AppIcon` asset (`AppIcon-dev`, `AppIcon-stg`, `AppIcon`). + +#### Android 1. Review the [Material Design product icons][material_design_product_icons] guidelines for icon design. -2. In the `[project]/android/app/src/main/res/` directory, place your icon files in folders named using [configuration qualifiers][android_configuration_qualifiers]. The default `mipmap-` folders demonstrate the correct naming convention. +2. In the `[project]/android/app/src//res/` directory (where `` is `main`, `development`, or `staging`), replace the icon files in the `mipmap-*` folders. The default folders use [configuration qualifiers][android_configuration_qualifiers] to provide icons at different pixel densities. -3. In `AndroidManifest.xml`, update the [`application`][android_application_element] tag’s `android:icon` attribute to reference icons from the previous step (for example, ``). 4. To verify that the icon has been replaced, run your app and inspect the app icon in the Launcher. -### iOS +#### iOS 1. Review the [iOS app icons guidelines][ios_app_icon_guidelines]. -2. In the Xcode project navigator, select `Assets.xcassets` in the `Runner` folder. Update the placeholder icons with your own app icons. +2. In the Xcode project navigator, select `Assets.xcassets` in the `Runner` folder. Update the `AppIcon`, `AppIcon-dev`, and `AppIcon-stg` icon sets with your own app icons, one per flavor. 3. Verify the icon has been replaced by running your app using `flutter run`. +#### macOS + +1. Open `macos/Runner/Assets.xcassets` in Xcode and update the `AppIcon` asset. + +2. Verify the icon has been replaced by running your app using `flutter run -d macos`. + +#### Web + +1. Replace the `favicon.png` file in `web/` and the icon files (`Icon-192.png`, `Icon-512.png`, etc.) in `web/icons/`. + +2. Verify the icon has been replaced by running your app using `flutter run -d chrome`. + +#### Windows + +1. Replace `windows/runner/resources/app_icon.ico` with your custom `.ico` file. + +2. Verify the icon has been replaced by running your app using `flutter run -d windows`. + [android_application_element]: https://developer.android.com/guide/topics/manifest/application-element [android_configuration_qualifiers]: https://developer.android.com/guide/topics/resources/providing-resources#AlternativeResources [bloc_pub]: https://pub.dev/packages/bloc @@ -278,6 +361,7 @@ When you create a new project, it has a default launcher icon. To customize this [firebase_analytics_link]: https://firebase.google.com/products/analytics [flutter_install_link]: https://docs.flutter.dev/get-started/install [flutter_internationalization]: https://docs.flutter.dev/development/accessibility-and-localization/internationalization +[flutter_launcher_icons_pub]: https://pub.dev/packages/flutter_launcher_icons [flutter_localizations]: https://api.flutter.dev/flutter/flutter_localizations/flutter_localizations-library.html [github_actions]: https://docs.github.com/en/actions/learn-github-actions [ios_app_icon_guidelines]: https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons From aff684bf2337e0129b908f1ec593cc841cff3759 Mon Sep 17 00:00:00 2001 From: "unicoderbot[bot]" <269805761+unicoderbot[bot]@users.noreply.github.com> Date: Thu, 2 Jul 2026 10:19:19 +0000 Subject: [PATCH 2/3] fix: address review feedback on PR #1633 Co-authored-by: marcossevilla --- site/docs/templates/core.md | 14 +++++++------- site/package-lock.json | 32 ++++++++++++++++---------------- site/package.json | 8 ++++---- 3 files changed, 27 insertions(+), 27 deletions(-) diff --git a/site/docs/templates/core.md b/site/docs/templates/core.md index f1d70498a..8caef708f 100644 --- a/site/docs/templates/core.md +++ b/site/docs/templates/core.md @@ -268,23 +268,23 @@ flutter pub add --dev flutter_launcher_icons ```yaml # flutter_launcher_icons-production.yaml flutter_launcher_icons: - image_path: "assets/icon/icon.png" - android: "ic_launcher" + image_path: 'assets/icon/icon.png' + android: 'ic_launcher' min_sdk_android: 21 ios: true remove_alpha_ios: true web: generate: true - image_path: "assets/icon/icon.png" - background_color: "#hexcode" - theme_color: "#hexcode" + image_path: 'assets/icon/icon.png' + background_color: '#hexcode' + theme_color: '#hexcode' windows: generate: true - image_path: "assets/icon/icon.png" + image_path: 'assets/icon/icon.png' icon_size: 48 macos: generate: true - image_path: "assets/icon/icon.png" + image_path: 'assets/icon/icon.png' ``` 3. Generate the icons for each flavor: diff --git a/site/package-lock.json b/site/package-lock.json index 8deb3e0c1..794b11c9c 100644 --- a/site/package-lock.json +++ b/site/package-lock.json @@ -23,11 +23,11 @@ "@docusaurus/types": "^3.7.0", "@eslint/js": "^10.0.1", "@types/react": "^19.2.17", - "eslint": "^10.5.0", - "eslint-plugin-jest": "^29.15.2", - "globals": "^17.6.0", + "eslint": "^10.6.0", + "eslint-plugin-jest": "^29.15.3", + "globals": "^17.7.0", "jest": "^30.4.2", - "prettier": "^3.8.4", + "prettier": "^3.9.1", "typescript": "^6.0.3" }, "engines": { @@ -9962,9 +9962,9 @@ } }, "node_modules/eslint": { - "version": "10.5.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-10.5.0.tgz", - "integrity": "sha512-1y+7C+vi12bUK1IpZeaV3gsH9fHLBmPvYmPx42pvT/E9yG0IC8g3PUZZgp0+JLJl7ZDK0flc2gc+Aw9dpCvIsQ==", + "version": "10.6.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-10.6.0.tgz", + "integrity": "sha512-6lVbcqSodALYo+4ELD0heG6lFiFxnLMuLkiMi2qV8LMp54N8tE8FT1GMH+ev4Ti00nFjNze2+Su6DsV5OQW3Dg==", "dev": true, "license": "MIT", "workspaces": [ @@ -10021,9 +10021,9 @@ } }, "node_modules/eslint-plugin-jest": { - "version": "29.15.2", - "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-29.15.2.tgz", - "integrity": "sha512-kEN4r9RZl1xcsb4arGq89LrcVdOUFII/JSCwtTPJyv16mDwmPrcuEQwpxqZHeINvcsd7oK5O/rhdGlxFRaZwvQ==", + "version": "29.15.3", + "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-29.15.3.tgz", + "integrity": "sha512-iK2nHK4zBfxkkeP0japj/wvECG2z8qCdnQsOKdsNF82SfLvkD46jcrmkWTwfGCTYV9XPOZcJ7QyjFyppnp94WQ==", "dev": true, "license": "MIT", "dependencies": { @@ -11375,9 +11375,9 @@ } }, "node_modules/globals": { - "version": "17.6.0", - "resolved": "https://registry.npmjs.org/globals/-/globals-17.6.0.tgz", - "integrity": "sha512-sepffkT8stwnIYbsMBpoCHJuJM5l98FUF2AnE07hfvE0m/qp3R586hw4jF4uadbhvg1ooIdzuu7CsfD2jzCaNA==", + "version": "17.7.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-17.7.0.tgz", + "integrity": "sha512-Czmyns5dUsq4seFBR/Kdydhmo8y9kC79hiSkPn0YcGtNnYWnrgt0vjrSjx9tspoDGWm2CMarffRuLjM4xUz8xg==", "dev": true, "license": "MIT", "engines": { @@ -19560,9 +19560,9 @@ } }, "node_modules/prettier": { - "version": "3.8.4", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.4.tgz", - "integrity": "sha512-N2MylSdi48+5N/6S5j+maeHbUSIzzZ5uOcX5Hm4QpV8Dkb1HFjfAKTKX6yNPJQD9AhcT3ifHNB66tWTTJDi11Q==", + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.9.1.tgz", + "integrity": "sha512-ppiDo2CSwexck1eyZUwJHg/N3nf1+6IRCv7W/VJ5vaLnVCmB7+3CdRfMwoCHBBX6xTrREDTksZ4OZl5SSf4zXA==", "dev": true, "license": "MIT", "bin": { diff --git a/site/package.json b/site/package.json index 5e7c8b692..46f8e095d 100644 --- a/site/package.json +++ b/site/package.json @@ -33,11 +33,11 @@ "@docusaurus/types": "^3.7.0", "@eslint/js": "^10.0.1", "@types/react": "^19.2.17", - "eslint": "^10.5.0", - "eslint-plugin-jest": "^29.15.2", - "globals": "^17.6.0", + "eslint": "^10.6.0", + "eslint-plugin-jest": "^29.15.3", + "globals": "^17.7.0", "jest": "^30.4.2", - "prettier": "^3.8.4", + "prettier": "^3.9.1", "typescript": "^6.0.3" }, "browserslist": { From ddec2c4d12d7e640457f35bd4fb7b2011c633167 Mon Sep 17 00:00:00 2001 From: Marcos Sevilla Date: Thu, 2 Jul 2026 14:32:52 +0200 Subject: [PATCH 3/3] fix: spelling --- site/docs/templates/core.md | 26 ++++++++++---------------- 1 file changed, 10 insertions(+), 16 deletions(-) diff --git a/site/docs/templates/core.md b/site/docs/templates/core.md index 8caef708f..298a45e3e 100644 --- a/site/docs/templates/core.md +++ b/site/docs/templates/core.md @@ -263,7 +263,7 @@ Very Good Core ships with separate icons for each flavor (`development`, `stagin flutter pub add --dev flutter_launcher_icons ``` -2. Place your source icon (for example, `assets/icon/icon.png`) in your project and add a configuration block to `pubspec.yaml`. Since Very Good Core uses flavors, you should also create a dedicated configuration file per flavor (for example, `flutter_launcher_icons-development.yaml`, `flutter_launcher_icons-staging.yaml`, `flutter_launcher_icons-production.yaml`): +2. Place your source icon (for example, `assets/icon/icon.png`) in your project. Since Very Good Core uses flavors, create a dedicated configuration file per flavor (`flutter_launcher_icons-development.yaml`, `flutter_launcher_icons-staging.yaml`, `flutter_launcher_icons-production.yaml`): ```yaml # flutter_launcher_icons-production.yaml @@ -275,35 +275,29 @@ flutter_launcher_icons: remove_alpha_ios: true web: generate: true - image_path: 'assets/icon/icon.png' - background_color: '#hexcode' - theme_color: '#hexcode' + background_color: '#000000' + theme_color: '#000000' windows: generate: true - image_path: 'assets/icon/icon.png' icon_size: 48 macos: generate: true - image_path: 'assets/icon/icon.png' ``` 3. Generate the icons for each flavor: ```sh -# Production -dart run flutter_launcher_icons -f flutter_launcher_icons-production.yaml - -# Staging -dart run flutter_launcher_icons -f flutter_launcher_icons-staging.yaml - -# Development -dart run flutter_launcher_icons -f flutter_launcher_icons-development.yaml +for flavor in production staging development; do + dart run flutter_launcher_icons -f flutter_launcher_icons-${flavor}.yaml +done ``` -4. Run the app to verify the icons were updated: +4. Verify the icons were updated for each flavor: ```sh flutter run --flavor development --target lib/main_development.dart +flutter run --flavor staging --target lib/main_staging.dart +flutter run --flavor production --target lib/main_production.dart ``` :::tip @@ -334,7 +328,7 @@ If you prefer to replace the icons by hand, follow the steps below for each plat #### macOS -1. Open `macos/Runner/Assets.xcassets` in Xcode and update the `AppIcon` asset. +1. Open `macos/Runner/Assets.xcassets` in Xcode and update the `AppIcon`, `AppIcon-dev`, and `AppIcon-stg` icon sets, one per flavor. 2. Verify the icon has been replaced by running your app using `flutter run -d macos`.