diff --git a/docs/test-and-publish/publish/apple-app-store-deployment.md b/docs/test-and-publish/publish/apple-app-store-deployment.md index b6dd8be..ff9a5fd 100644 --- a/docs/test-and-publish/publish/apple-app-store-deployment.md +++ b/docs/test-and-publish/publish/apple-app-store-deployment.md @@ -13,10 +13,9 @@ keywords: [Apple App Store, Deployment, Dreamflow, iOS] Dreamflow allows you to deploy your apps directly to the Apple App Store from within the platform. This guide covers all the necessary prerequisites, a step-by-step deployment process, and common troubleshooting tips. :::info[Prerequisites] - +- Ensure you have [**set an app launcher icon**](pre-checks-publishing.md#add-app-launcher-icon). - Create an [**Apple account**](https://appleid.apple.com/account?appId=632&returnUrl=https%3A//developer.apple.com/account/). - [**Purchase an Apple Developer membership**](https://developer.apple.com/programs/enroll/). Learn more about the program and enrollment process [**here**](https://developer.apple.com/programs/). -- Ensure you have set an app launcher icon. If not, add an app icon to the Dreamflow assets, then use the [**flutter_launcher_icons**](https://pub.dev/packages/flutter_launcher_icons) package or ask the AI agent to set it up for you. - Ensure your app bundle identifier is correct, as it cannot be changed after publishing. To update the bundle identifier, you can use the [**change_app_package_name**](https://pub.dev/packages/change_app_package_name) package or simply ask the AI agent. - It's recommended to [**test your app on a real device**](../test/test-on-mobile-device.md) before deployment. diff --git a/docs/test-and-publish/publish/google-playstore-deployment.md b/docs/test-and-publish/publish/google-playstore-deployment.md index cc85abb..7a91653 100644 --- a/docs/test-and-publish/publish/google-playstore-deployment.md +++ b/docs/test-and-publish/publish/google-playstore-deployment.md @@ -13,9 +13,8 @@ keywords: [Google Play Store, Deployment, Dreamflow, Android] Dreamflow allows you to deploy your apps directly to the Google Play Store from within the platform. This guide covers all the necessary prerequisites, a step-by-step deployment process, and common troubleshooting tips. :::info[Prerequisites] - +- Ensure you have [**set an app launcher icon**](pre-checks-publishing.md#add-app-launcher-icon). - Register for a [**Google Play Developer account**](https://play.google.com/console/signup). -- Ensure you have set an app launcher icon. If not, add an app icon to the Dreamflow assets, then use the [**flutter_launcher_icons**](https://pub.dev/packages/flutter_launcher_icons) package or ask the AI agent to set it up for you. - Ensure your app package name is correct, as it cannot be changed after deployment. To verify it, open `android/app/build.gradle` and check the `applicationId`. To update the package name, you can use the [**change_app_package_name**](https://pub.dev/packages/change_app_package_name) package or simply ask the AI agent. - It's recommended to [**test your app on a real device**](../test/test-on-mobile-device.md) before deployment. diff --git a/docs/test-and-publish/publish/imgs/fix-with-ai.avif b/docs/test-and-publish/publish/imgs/fix-with-ai.avif new file mode 100644 index 0000000..32d2a76 Binary files /dev/null and b/docs/test-and-publish/publish/imgs/fix-with-ai.avif differ diff --git a/docs/test-and-publish/publish/pre-checks-publishing.md b/docs/test-and-publish/publish/pre-checks-publishing.md index 415b318..3d3671c 100644 --- a/docs/test-and-publish/publish/pre-checks-publishing.md +++ b/docs/test-and-publish/publish/pre-checks-publishing.md @@ -27,4 +27,178 @@ Here’s a comprehensive list of these prechecks: 9. **License and Third-Party Attributions**: Adhere to licenses and include necessary attributions for third-party libraries and assets. 10. **Prepare Marketing Assets**: Prepare all the necessary marketing assets, such as screenshots, app icons, and promotional text. 11. **Error Logging & Monitoring**: Integrate crash reporting and analytics (e.g., Firebase Crashlytics, Sentry) before release. Try triggering test crashes in debug or staging builds to confirm reports are collected correctly. -12. **Offline & Poor Network Support**: Validate app behavior with no connectivity and high-latency/packet-loss scenarios. Provide cached content, retry/backoff for API calls, and clear offline states. \ No newline at end of file +12. **Offline & Poor Network Support**: Validate app behavior with no connectivity and high-latency/packet-loss scenarios. Provide cached content, retry/backoff for API calls, and clear offline states. + + +## Add App Launcher Icon + +An **app launcher icon** is the small image that represents your app on a device’s home screen. + +When you create a new app in Dreamflow, it sets a default Dreamflow logo as the launcher icon. To give your app a unique identity, you should replace this with your own custom icon. Follow the steps below to update the launcher icon: + +1. Go to the [**Assets**](../../workspace/modules-panel/assets.md) module in Dreamflow and upload your icon image. For best results, use a square, high-resolution source image (i.e., **1024×1024 px**) to ensure your app icon looks sharp across all devices and sizes. +2. Update the code to use the new app icon. Dreamflow uses the [`flutter_launcher_icons`](https://pub.dev/packages/flutter_launcher_icons) package to set launcher icons for both platforms. You can either: + + - Ask the Agent to do it automatically. For example, you can say: + ```text + I uploaded app_icon.png to the Assets module. Please set it as the app launcher icon using flutter_launcher_icons. + - Or do it manually by updating the `image_path` in your `pubspec.yaml` file to point to the newly uploaded app icon. Here is the example configuration in `pubspec.yaml` file: + + ```jsx + flutter_launcher_icons: + android: true + ios: true + image_path: assets/images/app_icon.png + remove_alpha_ios: true + ``` + +
+ +
+

+ +:::info + +- The Agent can’t generate a launcher icon image for you; you need to upload your own image file in the **Assets** module. +- The app icon is generated during native builds (Android/iOS) before deployment. However, if you want to verify that it’s configured correctly, you can download and run the app locally on your machine. To do so: + - Ensure your Flutter environment is properly set up by following the instructions for [**Android**](../test/test-on-mobile-device.md#android-setup) or [**iOS**](../test/test-on-mobile-device.md#ios-setup), depending on the platform you want to test. + - [**Download the project**](../test/test-on-mobile-device.md#download-code-and-run), open it in your preferred IDE, and run: + + ```jsx + dart run flutter_launcher_icons + ``` + + - Build and run the app on a device, then check the device’s home screen to confirm the new icon appears. +::: + +### Platform-Specific Icon Configuration + +If you want to use different icons for Android and iOS, you can set platform-specific paths. This is useful if your design team provides unique assets for each platform. + +To do so, upload separate icons for each platform to [Assets](../../workspace/modules-panel/assets.md) module, then you can either: + +- Ask the Agent to do it automatically. For example, you can say: + + ```text + I uploaded separate icons for Android (app_icon_android.png) and iOS (app_icon_ios.png) to the Assets module. Please configure flutter_launcher_icons to use separate icons for both the platform. + ``` + +- Or manually update your `pubspec.yaml` as shown below: + + ```yaml + flutter_launcher_icons: + android: true + ios: true + image_path_android: assets/images/app_icon_android.png # Path to the Android app icon. + image_path_ios: assets/images/app_icon_ios.png # Path to the iOS app icon. + remove_alpha_ios: true + + ``` + +### Adaptive Icons for Android + +Android supports [**adaptive icons**](https://developer.android.com/develop/ui/views/launch/icon_design_adaptive#design-adaptive-icons), which allow your app icon to adapt to different shapes (circle, square, squircle, etc.). + +To setup adaptive icons, you can either use this [online tool](https://icon.kitchen/) or use these [resources](https://docs.flutterflow.io/resources/projects/settings/general-settings#create-adaptive-icon) to create one. Upload them to [Assets](../../workspace/modules-panel/assets.md) module, then you can either: + +- Ask the Agent to do it automatically. For example, you can say: + + **With image background:** + ``` + I uploaded icon_bg.png and icon_fg.png to the Assets module. + Please configure flutter_launcher_icons to use icon_bg.png as the adaptive icon background and icon_fg.png as the foreground, with a 16% inset. + ``` + + **With solid color background:** + ``` + I uploaded icon_fg.png to the Assets module. + Please configure flutter_launcher_icons to use a solid white background ("#FFFFFF") and icon_fg.png as the adaptive icon foreground, with a 16% inset. + ``` + +- Or manually update your `pubspec.yaml` as shown below: + + ```jsx + flutter_launcher_icons: + android: true + ios: true + image_path: "assets/images/app_icon.png" + + # For adaptive icon support: + adaptive_icon_background: "assets/images/icon_bg.png" # image or solid color ("#FFFFFF") + adaptive_icon_foreground: "assets/images/icon_fg.png" # your logo / symbol image + adaptive_icon_foreground_inset: 16 # optional padding percentage (default is 16) + + ``` + +:::info + +- Both `adaptive_icon_background` and `adaptive_icon_foreground` must be set for adaptive icons to be generated. +- If you do not specify adaptive layers, `flutter_launcher_icons` will fall back to generating legacy (non-adaptive) icons. + +::: + + +#### Adaptive Icon Resources + +See the following resources for more information on Android adaptive icons. + +##### Create Adaptive Icon + +- [Create app icons in Android Studio](https://developer.android.com/studio/write/create-app-icons#create-adaptive) +- [Figma template](https://material.uplabs.com/posts/adaptive-icon-sticker-sheet) (requires login) +- [Bjango templates](https://github.com/bjango/Bjango-Templates) include adaptive icons +- [Adobe XD template](https://github.com/faizmalkani/adaptive-icon-template-xd) + +##### Adaptive Icon Fundamentals + +- [Understanding Android Adaptive Icons](https://medium.com/google-design/understanding-android-adaptive-icons-cee8a9de93e2) +- [Designing Adaptive Icons](https://medium.com/google-design/designing-adaptive-icons-515af294c783) +- [Implementing Adaptive Icons](https://medium.com/google-developers/implementing-adaptive-icons-1e4d1795470e) + +## FAQs + +
+ I am getting `✗ ERROR: NoConfigFoundException – No configuration found in flutter_launcher_icons.yaml or in pubspec.yaml`. How do I fix it? + +

+This error means the `flutter_launcher_icons` package hasn’t been properly added to your project. To fix this, you can: + +- **Add it manually**: Open your `pubspec.yaml`, add the [**`flutter_launcher_icons`**](https://pub.dev/packages/flutter_launcher_icons) dependency with required configuration, then refresh dependencies by clicking **Refresh Dependencies** button at bottom left side. See the detailed guide on [**adding app launcher icon**](#add-app-launcher-icon). + +- **Use the Agent**: Click Fix with AI button when the error appears, and the Agent will add the required configuration for you. + + ![fix-with-ai](imgs/fix-with-ai.avif) +

+ +
+ + +
+ Why am I seeing this error `PathNotFoundException: Cannot open file, path = 'assets/images/icon.png' (OS Error: No such file or directory, errno = 2)` ? + +

+ This error occurs because the app icon file could not be found at the specified path. To fix this, make sure you’ve added a launcher icon [**Assets**](../../workspace/modules-panel/assets.md) module. Refer to [**adding app launcher icon**](#add-app-launcher-icon) section for step-by-step instructions. +

+ +
\ No newline at end of file