diff --git a/docs/ff-concepts/layout/fix_app_colors_on_device.md b/docs/ff-concepts/layout/fix_app_colors_on_device.md new file mode 100644 index 00000000..34926d48 --- /dev/null +++ b/docs/ff-concepts/layout/fix_app_colors_on_device.md @@ -0,0 +1,40 @@ +--- +keywords: ['application', 'device', 'theme', 'color', 'dark mode'] +slug: /fix-app-colors-on-device +title: Fix Incorrect App Colors on Real Devices +--- + +# Fix Incorrect App Colors on Real Devices + +When testing an application on a physical device, users may notice that colors appear differently than expected. This issue is often related to theme settings, particularly when Dark Mode is enabled on the device or within the application. + +:::info[Prerequisites] +- Ensure the app has a defined theme. +- The application must be installed on a physical device for testing. +::: + +Follow these steps to verify and correct theme-related issues that affect color appearance: + +1. **Verify Dark Mode in Theme Settings** + Navigate to **Settings → Theme** inside the FlutterFlow editor. Confirm whether the **Dark Mode** toggle is enabled. + ![](imgs/20250430121247111572.png) + +2. **Test Behavior by Disabling Dark Mode** + Temporarily disable Dark Mode. Download and reinstall the app on the device. If the color issue is resolved, the cause was an incomplete or misconfigured Dark Mode theme. + +3. **Adjust the Theme for Dark Mode** + If Dark Mode is required, update the app's Dark Theme settings by selecting compatible text and background colors. This ensures proper visibility and branding across different device modes. + +4. **Use the Explore Themes Preview** + Use the **Explore Themes** option in the Theme section to preview and test color combinations. + + ![](imgs/20250430121247467739.png) + +:::tip +Dark Mode configuration is device-dependent. Always test your theme settings across both Light and Dark modes to ensure consistency. +::: + +:::note +- Devices with automatic theme switching may cause inconsistencies if both Light and Dark modes are not properly configured. +- Avoid using the same color for text and background in either theme. +::: \ No newline at end of file diff --git a/docs/ff-concepts/layout/fix_clipboard_permissions_for_widget_copy_paste.md b/docs/ff-concepts/layout/fix_clipboard_permissions_for_widget_copy_paste.md new file mode 100644 index 00000000..d3d0db52 --- /dev/null +++ b/docs/ff-concepts/layout/fix_clipboard_permissions_for_widget_copy_paste.md @@ -0,0 +1,27 @@ +--- +keywords: ['paste', 'widgets', 'copy'] +slug: /fix-clipboard-permissions-for-widget-copy-paste +title: Fix Clipboard Permissions for Copy-Pasting Widgets +--- + +# Fix Clipboard Permissions for Copy-Pasting Widgets + +If you’re unable to copy and paste widgets in FlutterFlow, the issue may be related to blocked clipboard permissions in your browser. + +:::info[Prerequisites] +Ensure you’re using a supported browser like **Google Chrome** and are signed in to your FlutterFlow project. +::: + +Follow the steps below to enable clipboard access in Chrome: + + 1. Click the **lock icon** in the address bar next to `flutterflow.io`. + 2. In the permissions popup, locate **Clipboard**. + 3. Set clipboard access to **Allow**. + 4. Refresh the page and try copying/pasting the widget again. + + ![](imgs/20250430121511630414.png) + +:::tip +For other browsers such as **Firefox**, **Edge**, or **Safari**, refer to that browser’s permission settings to enable clipboard access. +::: + diff --git a/docs/ff-concepts/layout/imgs/20250430121247111572.png b/docs/ff-concepts/layout/imgs/20250430121247111572.png new file mode 100644 index 00000000..301309a9 Binary files /dev/null and b/docs/ff-concepts/layout/imgs/20250430121247111572.png differ diff --git a/docs/ff-concepts/layout/imgs/20250430121247467739.png b/docs/ff-concepts/layout/imgs/20250430121247467739.png new file mode 100644 index 00000000..6aad86bd Binary files /dev/null and b/docs/ff-concepts/layout/imgs/20250430121247467739.png differ diff --git a/docs/ff-concepts/layout/imgs/20250430121501151202.png b/docs/ff-concepts/layout/imgs/20250430121501151202.png new file mode 100644 index 00000000..5edb49ef Binary files /dev/null and b/docs/ff-concepts/layout/imgs/20250430121501151202.png differ diff --git a/docs/ff-concepts/layout/imgs/20250430121511630414.png b/docs/ff-concepts/layout/imgs/20250430121511630414.png new file mode 100644 index 00000000..f1f7f9b0 Binary files /dev/null and b/docs/ff-concepts/layout/imgs/20250430121511630414.png differ diff --git a/docs/ff-concepts/layout/wrap_text_inside_containers.md b/docs/ff-concepts/layout/wrap_text_inside_containers.md new file mode 100644 index 00000000..6bc2814a --- /dev/null +++ b/docs/ff-concepts/layout/wrap_text_inside_containers.md @@ -0,0 +1,49 @@ +--- +keywords: ['wrap', 'text', 'container', 'overflow'] +slug: /wrap-text-in-containers +title: Wrap Text Inside Containers +--- + +# Wrap Text Inside Containers + +When building responsive layouts, text may overflow its container if not properly configured. This guide explains how to wrap text so that it fits within the container, especially in layouts such as ListView or Column. + +:::info[Prerequisites] +- Basic understanding of how to use widgets in FlutterFlow. +- A text element placed inside a container or layout widget (e.g., ListView, Row, Column). +::: + +Follow the steps below to properly wrap text: + + 1. **Select the Text Widget** + Choose the text element you want to wrap inside a container. + + 2. **Enable Soft Wrap** + In the properties panel, locate the **Text Styling** section and enable **Soft Wrap**. This allows the text to break into multiple lines. + + 3. **Set Max Lines (Optional)** + You can optionally set a **Max Lines** limit to control how many lines the text should wrap into before being truncated. + + 4. **Use Expanded or Flexible (When in Row)** + If your text is inside a `Row`, wrap it in an `Expanded` or `Flexible` widget to prevent overflow. + + 5. **Adjust Container Width** + Ensure the container has a defined or constrained width. Unlimited width will cause the text to expand rather than wrap. + + 6. **Use Overflow Handling (Optional)** + Set the **Overflow** property to `ellipsis`, `clip`, or `fade` depending on how you want to handle excess text. + + ![](imgs/20250430121501151202.png) + +:::tip +When using a `Row`, wrapping long text will not work unless the text widget is inside an `Expanded` or `Flexible` widget. This ensures the text takes only available space and can wrap as needed. +::: + +:::note +- Avoid placing long text directly inside a Row without constraints. +- Soft wrap works best when the container or parent widget has width restrictions. +::: + +:::info[Additional Rescources] +- [Flutter Text Overflow Class](https://api.flutter.dev/flutter/widgets/TextOverflow-class.html) +::: \ No newline at end of file diff --git a/docs/ff-concepts/navigation-routing/create_submenu.md b/docs/ff-concepts/navigation-routing/create_submenu.md new file mode 100644 index 00000000..e5c50acc --- /dev/null +++ b/docs/ff-concepts/navigation-routing/create_submenu.md @@ -0,0 +1,51 @@ +--- +keywords: ['menu', 'submenu', 'local state'] +slug: /create-submenu +title: Create a Submenu Using Local State +--- + +# Create a Submenu Using Local State + +This guide demonstrates how to implement a toggleable submenu in a FlutterFlow project using local state and conditional visibility logic. + +:::info[Prerequisites] +- Basic understanding of Local State. +- Familiarity with the Stack Widget in FlutterFlow. +::: + +Follow the steps below to create a Submenu using Local State: + + 1. **Create a Local State Variable** + - Add a boolean local state variable to your page. + - This variable will control the visibility of the submenu (`true` = open, `false` = closed). + + 2. **Place the Submenu Inside a Stack** + - Use a `Stack` widget to layer the submenu on top of the page content. + - Position the submenu where you want it to appear. + + 3. **Control Visibility with Local State** + - Apply a visibility condition on the submenu widget using the boolean state variable. + - When the value is `true`, the submenu will be shown; when `false`, it will be hidden. + + 4. **Add Toggle Action to Menu Icon** + - On the `onTap` event of the menu icon button, add a conditional action: + - If the state variable is `false`, set it to `true`. + - If it is `true`, set it to `false`. + + 5. **Close Menu When Item is Tapped** + - After triggering any submenu action, set the local state variable to `false` to close the menu. + + 6. **Dismiss Menu When Tapping Page Background** + - Wrap the main page content in a `GestureDetector`. + - On tap, set the local state variable to `false` to close the menu when the user taps outside it. + +:::tip +The `Stack` widget allows placing widgets on top of each other, which is essential for layering the submenu over other UI elements. +::: + +:::info[Examples] +- [Project Example](https://app.flutterflow.io/project/sub-menu-840l5q) +- [Run Mode Preview](https://app.flutterflow.io/run/LfzBGTaef8WldndHa2x4) +::: + +![](imgs/20250430121319778896.gif) \ No newline at end of file diff --git a/docs/ff-concepts/navigation-routing/imgs/20250430121319778896.gif b/docs/ff-concepts/navigation-routing/imgs/20250430121319778896.gif new file mode 100644 index 00000000..651b8f3f Binary files /dev/null and b/docs/ff-concepts/navigation-routing/imgs/20250430121319778896.gif differ diff --git a/docs/ff-concepts/notifications/enable_ios_push_notifications.md b/docs/ff-concepts/notifications/enable_ios_push_notifications.md new file mode 100644 index 00000000..3d0bbf9e --- /dev/null +++ b/docs/ff-concepts/notifications/enable_ios_push_notifications.md @@ -0,0 +1,77 @@ +--- +keywords: ['notification', 'firebase', 'ios', 'push'] +slug: /enable-ios-push-notifications +title: Enable Push Notifications for iOS Devices +--- + +# Enable Push Notifications for iOS Devices + +This guide outlines the steps required to ensure push notifications work correctly on iOS devices. + +:::info[Prerequisites] +- A registered Apple Developer account +- An app integrated with Firebase +- A real iOS device for testing (not a simulator) +::: + +:::warning +Push notifications will **not** work in the following situations: + +- The app is running on an iOS simulator. +- The user is not logged in to the app. +- The app is currently open on the device. +::: + + +Follow the steps below to enable push Notifications for iOS Devices: + +1. **Create an APNs Authentication Key in Apple Developer Account** + + To send push notifications to iOS devices, Apple requires an APNs key. + + 1. Log in to your **[Apple Developer Account](https://developer.apple.com/account)**. + 2. Navigate to **Certificates, Identifiers & Profiles > Keys**. + 3. If no push key is listed, create one. + + ![](imgs/20250430121405271522.png) + + :::tip + Make sure to download the `.p8` file and note your **Key ID** and **Team ID** after generating the key. + ::: +2. **Upload the APNs Key to Firebase** + + 1. Go to your **[Firebase Console](https://console.firebase.google.com/)** and open your project. + 2. Navigate to **Project Settings > Cloud Messaging**. + 3. Scroll to the **iOS app configuration** section. + 4. If no APNs key is listed, upload the `.p8` file you downloaded earlier. + + ![](imgs/20250430121405587477.png) + + :::tip + This step connects your Firebase backend to Apple’s notification system. + ::: + +3. **Add a Push Notification Identifier** + + 1. Log back in to your **[Apple Developer Account](https://developer.apple.com/account)**. + 2. Navigate to **Certificates, Identifiers & Profiles > Identifiers**. + 3. Select your app’s identifier. + 4. Enable the **Push Notifications** capability. + + ![](imgs/20250430121405921022.png) + + If this step is skipped, push notifications will not be delivered to iOS devices after deployment. + +4. **Refresh Your FlutterFlow Workspace** + + To ensure your environment reflects the latest settings: + + - Press `Ctrl + R` (Windows) or `Cmd + R` (Mac) to refresh the FlutterFlow editor. + - Clear your browser cache. + - Log out and log back in. + +:::note +- Ensure your app permissions for notifications are enabled under **iOS Settings > Notifications**. +- Always test push notifications on a **real device** after deployment. +- Ensure that Firebase Cloud Messaging is correctly set up and linked to your project. +::: diff --git a/docs/ff-concepts/notifications/imgs/20250430121405271522.png b/docs/ff-concepts/notifications/imgs/20250430121405271522.png new file mode 100644 index 00000000..73e3a550 Binary files /dev/null and b/docs/ff-concepts/notifications/imgs/20250430121405271522.png differ diff --git a/docs/ff-concepts/notifications/imgs/20250430121405587477.png b/docs/ff-concepts/notifications/imgs/20250430121405587477.png new file mode 100644 index 00000000..e40d081c Binary files /dev/null and b/docs/ff-concepts/notifications/imgs/20250430121405587477.png differ diff --git a/docs/ff-concepts/notifications/imgs/20250430121405921022.png b/docs/ff-concepts/notifications/imgs/20250430121405921022.png new file mode 100644 index 00000000..86a3dfcb Binary files /dev/null and b/docs/ff-concepts/notifications/imgs/20250430121405921022.png differ diff --git a/docs/ff-concepts/state-management/check_onboarding_status.md b/docs/ff-concepts/state-management/check_onboarding_status.md new file mode 100644 index 00000000..2f1919ca --- /dev/null +++ b/docs/ff-concepts/state-management/check_onboarding_status.md @@ -0,0 +1,50 @@ +--- +keywords: ['onboarding', 'state management', 'navigation'] +slug: /check-onboarding-status +title: Check Onboarding Completion Before Navigation +--- + +# Check Onboarding Completion Before Navigation + +This article describes how to validate whether a user has completed onboarding before proceeding to subsequent screens or actions. + +:::info[Prerequisites] +- An onboarding flow already built in your app. +- Knowledge of using **Local State** and **Persisted Values**. +- Familiarity with **Page Load Actions** and **Conditional Navigation**. +::: + +To enhance user experience and enforce onboarding completion, you can set up a check that redirects users who haven’t finished onboarding. This is especially helpful before allowing users to: + + - Access the home screen + - Proceed to checkout + - Use key features in the app + +Follow the steps below: + + 1. **Create a Persisted Boolean Variable** + - Navigate to **App Settings > State Management > Persisted Values**. + - Create a new boolean variable (e.g., `hasCompletedOnboarding`) and set its default to `false`. + + 2. **Update the Variable After Onboarding** + - At the final step of your onboarding flow, add an **Action > Update Persisted Value**. + - Set `hasCompletedOnboarding` to `true`. + + 3. **Add a Check on Page Load** + - On the main screen (e.g., Home or Checkout), open the **Page Load** action. + - Add a **Conditional Action**: + - **If** `hasCompletedOnboarding == false` + - **Then** navigate to the onboarding page. + + 4. **Prevent Navigation Without Onboarding** + - Apply similar checks to buttons or flows that require onboarding completion. + + :::tip + Use `Local State` when you need to check onboarding status only during the session. For persistent checks across sessions or logins, use `Persisted Values`. + ::: + +:::note +- You can enhance onboarding with tooltips, highlights, and walkthrough modals using the **Onboarding Components**. +- Consider tracking completion events using **Firebase Analytics** for additional insights. +::: + diff --git a/docs/ff-integrations/authentication/access_page_link_after_dynamic_link.md b/docs/ff-integrations/authentication/access_page_link_after_dynamic_link.md new file mode 100644 index 00000000..e5598ed4 --- /dev/null +++ b/docs/ff-integrations/authentication/access_page_link_after_dynamic_link.md @@ -0,0 +1,33 @@ +--- +keywords: ['dynamic link', 'page URL', 'deep linking'] +slug: /access-page-link-after-dynamic-link +title: Access Page Link After Activating Dynamic Link +--- + +# Access Page Link After Activating Dynamic Link + +After enabling **Deep Linking & Routing** in your FlutterFlow project, you can also enable **Firebase Dynamic Links**. This feature allows each page in your app to have a shareable, dynamic URL. + +![](imgs/20250430121453205914.png) + +:::note +Firebase dynamic links require an `https` scheme in your URL configuration. Make sure to configure this correctly when enabling dynamic links. +::: + +:::info[Prerequisites] +- Deep linking and routing must be enabled in your FlutterFlow project. +- Firebase Dynamic Links should be set up and configured correctly. +::: + +Follow the steps below to access and share the page link: + +1. **Add the Generate Current Page Link Action** + Attach this action to the widget from which you want to generate the link (e.g., a Share button). + +2. **Use the Generated Link from Widget State** + After the link is generated, you can access it via `Widget State > Current Page Link`. + +3. **Trigger a Share Action** + Add a second action that uses the generated page link as the content to share. + + ![](imgs/20250430121453493755.png) diff --git a/docs/ff-integrations/authentication/imgs/20250430121453205914.png b/docs/ff-integrations/authentication/imgs/20250430121453205914.png new file mode 100644 index 00000000..27e9b1cb Binary files /dev/null and b/docs/ff-integrations/authentication/imgs/20250430121453205914.png differ diff --git a/docs/ff-integrations/authentication/imgs/20250430121453493755.png b/docs/ff-integrations/authentication/imgs/20250430121453493755.png new file mode 100644 index 00000000..3f1d8a6c Binary files /dev/null and b/docs/ff-integrations/authentication/imgs/20250430121453493755.png differ diff --git a/docs/ff-integrations/payments/imgs/20250430121151165998.png b/docs/ff-integrations/payments/imgs/20250430121151165998.png new file mode 100644 index 00000000..84c7d43a Binary files /dev/null and b/docs/ff-integrations/payments/imgs/20250430121151165998.png differ diff --git a/docs/ff-integrations/payments/imgs/20250430121151456692.png b/docs/ff-integrations/payments/imgs/20250430121151456692.png new file mode 100644 index 00000000..046954d2 Binary files /dev/null and b/docs/ff-integrations/payments/imgs/20250430121151456692.png differ diff --git a/docs/ff-integrations/payments/imgs/20250430121151672498.png b/docs/ff-integrations/payments/imgs/20250430121151672498.png new file mode 100644 index 00000000..08538323 Binary files /dev/null and b/docs/ff-integrations/payments/imgs/20250430121151672498.png differ diff --git a/docs/ff-integrations/payments/imgs/20250430121151950315.png b/docs/ff-integrations/payments/imgs/20250430121151950315.png new file mode 100644 index 00000000..bfda652a Binary files /dev/null and b/docs/ff-integrations/payments/imgs/20250430121151950315.png differ diff --git a/docs/ff-integrations/payments/imgs/20250430121152202829.png b/docs/ff-integrations/payments/imgs/20250430121152202829.png new file mode 100644 index 00000000..f6a776a0 Binary files /dev/null and b/docs/ff-integrations/payments/imgs/20250430121152202829.png differ diff --git a/docs/ff-integrations/payments/revenuecat_subscription_one_time_payments_flutterflow.md b/docs/ff-integrations/payments/revenuecat_subscription_one_time_payments_flutterflow.md new file mode 100644 index 00000000..55a50189 --- /dev/null +++ b/docs/ff-integrations/payments/revenuecat_subscription_one_time_payments_flutterflow.md @@ -0,0 +1,117 @@ +--- +keywords: ['subscription', 'paywall', 'revenuecat'] +slug: /revenuecat-subscription-one-time-payments-flutterflow +title: RevenueCat Subscription and One-Time Payments in FlutterFlow +--- + +# RevenueCat Subscription and One-Time Payments in FlutterFlow + +In-app purchases and subscriptions are key monetization strategies for mobile apps. **RevenueCat** simplifies the implementation and management of these models when integrated with **FlutterFlow**. This guide covers how to configure RevenueCat for both **subscriptions** and **one-time payments**, and how to implement a paywall using FlutterFlow actions. + +RevenueCat acts as an intermediary between your app and app stores (Google Play and Apple App Store). It handles: + + - Subscription lifecycle management + - Purchase validation + - Cross-platform syncing + - Receipt handling + +:::info[Prerequisites] +Before integrating RevenueCat: + +- Publish your app to both the **Google Play Store** and **Apple App Store** +- Define your subscription and one-time purchase products in both stores +- Enable mobile deployment in FlutterFlow under **Settings > Integrations > Mobile Deployment** +::: + +**Configure Products in RevenueCat** + +- **Subscriptions** + + Create auto-renewable subscriptions with: + + - Unique product identifiers + - Duration, price, and tier info + - Configuration under **Product Setup** + +- **One-Time Purchases** + + Define non-consumable products with unique identifiers to support: + + - Lifetime access + - Token bundles + - Feature unlocks + + ![](imgs/20250430121151165998.png) + +**Define Entitlements and Offerings** + +- **Entitlements** + + Entitlements determine feature access based on purchase. Example: + + - `PremiumAccess` = Unlocks premium screens or features + +- **Offerings** + + Offerings link the products in your app store to RevenueCat. These define how product packages are presented on the paywall. + + ![](imgs/20250430121151456692.png) + + :::tip[Tip on Mixed Purchases] + If using both subscriptions and one-time products (e.g., token bundles), check the user's **entitlements** manually. The default paywall treats both types equally. + + If a user purchases a one-time item, their entitlement will allow them to bypass the paywall—even if they don't have a subscription. + ::: + +## Implementing a Paywall in FlutterFlow + + You can build a **paywall** screen or modal in FlutterFlow using the **Paywall Action**. This action returns a **boolean** value: + + - If `true`, the user has access (an entitlement exists) + - If `false`, guide the user to subscribe or purchase + + ![](imgs/20250430121151672498.png) + + - **Conditional Navigation** + + After a paywall action: + + - Add a conditional action block + - FlutterFlow automatically uses the paywall result + - If entitlement exists, proceed to next action + - Otherwise, show a modal or navigate to a subscription screen + + ![](imgs/20250430121151950315.png) + +## Managing Transactions in FlutterFlow + +- **Purchase Action** + + The **Purchase** action triggers the transaction and updates user entitlements. + + RevenueCat handles the store interaction securely. + +- **Restore Purchases** + + Use the **Restore Purchase** action to: + + - Retrieve entitlements on reinstall or new devices + - Sync prior purchases with RevenueCat + + ![](imgs/20250430121152202829.png) + +- **Payment ID** + + After a purchase, the result includes a `paymentId`: + + - Use the Source menu to access the output + - Confirm that `paymentId` is present before continuing + - This ensures the purchase was successful + +RevenueCat integration in FlutterFlow provides a complete solution for managing subscriptions and one-time purchases. By configuring your products, entitlements, and paywall correctly, you can streamline monetization while offering a seamless experience to your users. + +:::info[Additional Resources] +- [FlutterFlow YouTube Tutorials](https://www.youtube.com/@FlutterFlow) +- [RevenueCat Docs: Non-Subscription Purchases](https://www.revenuecat.com/docs/non-subscription-purchases) +- [FlutterFlow Community](https://community.flutterflow.io/) +::: \ No newline at end of file diff --git a/docs/resources/control-flow/login_error_snackbar.md b/docs/resources/control-flow/login_error_snackbar.md new file mode 100644 index 00000000..3b34efaf --- /dev/null +++ b/docs/resources/control-flow/login_error_snackbar.md @@ -0,0 +1,34 @@ +--- +keywords: ['login', 'authentication', 'snackbar', 'error'] +slug: /login-error-snackbar +title: Display Error Message for Invalid Login Credentials +--- + +# Display Error Message for Invalid Login Credentials + +When a user enters incorrect login credentials, FlutterFlow automatically displays a `SnackBar` with an error message. This helps users understand why their login attempt failed without needing custom logic. + +![](../imgs/20250430121519975010.gif) + +:::info[Prerequisites] +Ensure your app uses the built-in **Login Action** available in FlutterFlow and the relevant authentication method (Firebase, Supabase, etc.) is configured. +::: + +When the **Login Action** fails, a `SnackBar` is shown with the relevant error (e.g., “No user found” or “Wrong password”). This message appears automatically during runtime; no additional configuration is required. + +**Customize the SnackBar (Optional)** + + To add custom logic or change the appearance: + + 1. Select the **Login Action** from your button or trigger. + 2. In the **Actions tab**, open the **Action Output** section. + 3. Use conditional logic to check the error message. + 4. Display a custom `SnackBar` or navigate based on the message content. + +:::tip +There is no need to manually add alert dialogs for failed login attempts. FlutterFlow handles `SnackBar` display automatically when authentication fails. +::: + +:::note +To customize the `SnackBar` further, use the **Action Output** and attach additional logic based on the error string. +::: diff --git a/docs/resources/data-representation/update_user_record_from_email_input.md b/docs/resources/data-representation/update_user_record_from_email_input.md new file mode 100644 index 00000000..de4fc312 --- /dev/null +++ b/docs/resources/data-representation/update_user_record_from_email_input.md @@ -0,0 +1,57 @@ +--- +keywords: ['email', 'input', 'update'] +slug: /update-user-record-from-email-input +title: Update a User Record Using Email Input +--- + +# Update a User Record Using Email Input + +This article explains how to update a user document in Firebase based on an email address entered in a `TextField`. This approach is useful when you want to locate a user record dynamically and update it based on real-time user input. + +![](../imgs/20250430121457209095.gif) + +You may need to update or associate a document with a user record based on an email typed by the current user. Since FlutterFlow does not support queries directly as an action, this setup allows you to use widget-level queries and UI logic instead. + +:::info[Prerequisites] +- Complete your **[Firebase setup](/integrations/firebase/overview)**. +- Create a collection for storing user documents. +- Populate your collection with user data that includes an email field. +::: + +Follow the steps below to update User Record using Email input: + + 1. **Add the Input Field** + + - Place a `TextField` on the canvas to accept the email input. + - Enable **Update Page on Change** so the UI updates as the user types. + + ![](../imgs/20250430121457646837.png) + + 2. **Add a Query-Linked Widget** + + - Add a container or column widget below the `TextField`. + - Attach a **Single Document Query** to this widget, filtering by the entered email address. + - Enable **Hide widget if no match** to conditionally show the result and the action button only when a matching document is found. + + ![](../imgs/20250430121457985825.png) + + 3. **Add an Update Action** + + - Inside the visible widget, add a button. + - Set the **On Tap** action to `Update Document`. + - Select the user document from the query result as the source. + - Add a `SnackBar` action to confirm the update. + + ![](../imgs/20250430121458204938.png) + +:::tip +Instead of using **Update Page on Change**, you can: +- Store the text field value in a `localState` variable using a button action. +- Filter your query using this `localState` value. +::: + +:::info[Example Project] +Explore this setup in the following FlutterFlow project: +**[UpdateUser Page – FlutterFlow Project](https://app.flutterflow.io/project/flutterflow-adcdi2)** +::: + diff --git a/docs/resources/imgs/20250430121457209095.gif b/docs/resources/imgs/20250430121457209095.gif new file mode 100644 index 00000000..51f6c609 Binary files /dev/null and b/docs/resources/imgs/20250430121457209095.gif differ diff --git a/docs/resources/imgs/20250430121457646837.png b/docs/resources/imgs/20250430121457646837.png new file mode 100644 index 00000000..4c69ff74 Binary files /dev/null and b/docs/resources/imgs/20250430121457646837.png differ diff --git a/docs/resources/imgs/20250430121457985825.png b/docs/resources/imgs/20250430121457985825.png new file mode 100644 index 00000000..026125d6 Binary files /dev/null and b/docs/resources/imgs/20250430121457985825.png differ diff --git a/docs/resources/imgs/20250430121458204938.png b/docs/resources/imgs/20250430121458204938.png new file mode 100644 index 00000000..4363e0ca Binary files /dev/null and b/docs/resources/imgs/20250430121458204938.png differ diff --git a/docs/resources/imgs/20250430121519975010.gif b/docs/resources/imgs/20250430121519975010.gif new file mode 100644 index 00000000..c5255355 Binary files /dev/null and b/docs/resources/imgs/20250430121519975010.gif differ diff --git a/docs/resources/ui/widgets/basic-widgets/use_swipeablestack_widget.md b/docs/resources/ui/widgets/basic-widgets/use_swipeablestack_widget.md new file mode 100644 index 00000000..afe43dc5 --- /dev/null +++ b/docs/resources/ui/widgets/basic-widgets/use_swipeablestack_widget.md @@ -0,0 +1,60 @@ +--- +keywords: ['swipeablestack', 'gesture', 'cards', 'stack'] +slug: /use-swipeablestack-widget +title: Use the SwipeableStack Widget in FlutterFlow +--- + +# Use the SwipeableStack Widget in FlutterFlow + +The `SwipeableStack` widget allows you to present a stack of items that users can swipe in various directions—left, right, up, or down. This pattern is useful for building gesture-based interactions such as card swipes or content previews. + +![](../built-in-widgets/imgs/20250430121211148785.png) + +**Use Cases:** + - **Tinder-like Cards**: Implement like/dislike behavior by swiping left or right. + - **Image Gallery or Carousel**: Let users swipe horizontally through images. + - **Onboarding Screens**: Present onboarding steps that can be swiped through. + - **Content Browsing**: Let users explore products, articles, or content items via gestures. + +:::note +For large stacks, test performance on physical devices. Animations and widget rendering can affect low-end devices. +::: + +:::info[Prerequisites] +- Ensure your page has a valid `Scaffold` widget as the root. +- Add the `SwipeableStack` widget to the canvas. +::: + +Follow the steps below: + + 1. **Add the SwipeableStack Widget** + + Drag the **SwipeableStack** widget onto the canvas and configure it with the content you want to display. + + 2. **Set Up the Swipe Action on Page Load** + + - Select the `Scaffold` or parent widget. + - In the **Actions** panel, choose the `Page Load` trigger. + + ![](../built-in-widgets/imgs/20250430121211468522.png) + + 3. **Configure the Control SwipeableStack Action** + + - Under **Define Actions**, select **Control Swipeable Stack**. + + ![](../built-in-widgets/imgs/20250430121211781606.png) + + 4. **Choose a Swipe Trigger Type** + + Select one of the available swipe directions: + + 1. **Trigger Left Swipe** – Initiates a leftward swipe. + 2. **Trigger Right Swipe** – Initiates a rightward swipe. + 3. **Trigger Up Swipe** – Initiates an upward swipe. + 4. **Trigger Down Swipe** – Initiates a downward swipe. + + ![](../built-in-widgets/imgs/20250430121212153377.png) + + Once selected, the stack will respond to the defined swipe gesture. + + diff --git a/docs/resources/ui/widgets/built-in-widgets/imgs/20250430121211148785.png b/docs/resources/ui/widgets/built-in-widgets/imgs/20250430121211148785.png new file mode 100644 index 00000000..06dadb3c Binary files /dev/null and b/docs/resources/ui/widgets/built-in-widgets/imgs/20250430121211148785.png differ diff --git a/docs/resources/ui/widgets/built-in-widgets/imgs/20250430121211468522.png b/docs/resources/ui/widgets/built-in-widgets/imgs/20250430121211468522.png new file mode 100644 index 00000000..f8fe844b Binary files /dev/null and b/docs/resources/ui/widgets/built-in-widgets/imgs/20250430121211468522.png differ diff --git a/docs/resources/ui/widgets/built-in-widgets/imgs/20250430121211781606.png b/docs/resources/ui/widgets/built-in-widgets/imgs/20250430121211781606.png new file mode 100644 index 00000000..8f455910 Binary files /dev/null and b/docs/resources/ui/widgets/built-in-widgets/imgs/20250430121211781606.png differ diff --git a/docs/resources/ui/widgets/built-in-widgets/imgs/20250430121212153377.png b/docs/resources/ui/widgets/built-in-widgets/imgs/20250430121212153377.png new file mode 100644 index 00000000..fc8ad853 Binary files /dev/null and b/docs/resources/ui/widgets/built-in-widgets/imgs/20250430121212153377.png differ diff --git a/docs/testing-deployment-publishing/exporting-code/adding_dependencies_in_pubspec_yaml_file_for_entire_project.md b/docs/testing-deployment-publishing/exporting-code/adding_dependencies_in_pubspec_yaml_file_for_entire_project.md new file mode 100644 index 00000000..b9908e77 --- /dev/null +++ b/docs/testing-deployment-publishing/exporting-code/adding_dependencies_in_pubspec_yaml_file_for_entire_project.md @@ -0,0 +1,43 @@ +--- +keywords: ['dependencies', 'custom code', 'pubspec.yaml'] +slug: /add-project-dependencies +title: Add Dependencies in pubspec.yaml for Custom Code +--- + +# Add Dependencies in pubspec.yaml for Custom Code + +This article outlines the workaround for adding external dependencies when building with **Custom Widgets** or **Custom Actions** in FlutterFlow. + +:::note +FlutterFlow currently does not support directly adding dependencies for the entire project. However, dependencies can be included at the widget/action level. +::: + +:::info[Prerequisites] +- A project with at least one Custom Widget or Custom Action. +- Familiarity with editing custom code inside FlutterFlow. +::: + +Follow the steps below: + + 1. **Open the Custom Widget or Action** + - Navigate to **Custom Code > Widgets** or **Actions**, and select the one where you want to use the dependency. + + 2. **Add the Dependency** + - In the right panel, find the **Dependencies** section and add the required package. + Example: `http: ^0.13.4` + + 3. **Click the Refresh Icon** + - After adding the dependency, click the **Refresh** icon to update the `pubspec.yaml` and fetch the package. + + 4. **Import the Package in Your Code** + - Inside your Dart code, use standard import syntax: + ```dart + import 'package:http/http.dart' as http; + ``` + + ![](../imgs/20250430121235199536.png) + + :::note + - These dependencies will only be included in the scope of that specific Custom Widget or Action. + - Global dependency injection is not yet supported. + ::: diff --git a/docs/testing-deployment-publishing/exporting-code/install_java_runtime_missing_error.md b/docs/testing-deployment-publishing/exporting-code/install_java_runtime_missing_error.md new file mode 100644 index 00000000..7a8da41a --- /dev/null +++ b/docs/testing-deployment-publishing/exporting-code/install_java_runtime_missing_error.md @@ -0,0 +1,30 @@ +--- +keywords: ['java', 'runtime', 'error'] +slug: /install-java-runtime-missing-error +title: Fix Java Runtime Missing Error +--- + +# Fix Java Runtime Missing Error + +This error typically occurs when Java is not installed or configured properly on your system: + + ```text + The operation couldn’t be completed. Unable to locate a Java Runtime. + ``` + + To resolve this, you need to install the Java Runtime Environment (JRE) appropriate for your operating system. + +## Steps to Install Java Runtime + + 1. Go to the **[official Java download page](https://www.java.com/en/download/)**. + 2. Select your operating system and download the Java installer. + 3. Run the installer and follow the on-screen instructions. + 4. Restart your computer after installation. + +:::tip +On **macOS**, if you continue to see this error, open **System Preferences > Java** to verify the installation, or run `java -version` in your terminal to confirm it's available. +::: + +:::warning +Make sure to download Java only from the **official Oracle Java website** to avoid security risks. +::: diff --git a/docs/testing-deployment-publishing/exporting-code/resolve_issues_running_code_locally_after_exporting_my_code_apk.md b/docs/testing-deployment-publishing/exporting-code/resolve_issues_running_code_locally_after_exporting_my_code_apk.md new file mode 100644 index 00000000..852af2b3 --- /dev/null +++ b/docs/testing-deployment-publishing/exporting-code/resolve_issues_running_code_locally_after_exporting_my_code_apk.md @@ -0,0 +1,46 @@ +--- +keywords: ['build', 'locally', 'after'] +slug: /resolve-issues-running-code-locally-after-exporting-my-code-apk +title: Resolve Issues Running Code Locally After Exporting Code or APK +--- + +# Resolve Issues Running Code Locally After Exporting Code or APK + +When APKs exported from FlutterFlow do not function as expected, a few preliminary checks and rebuild steps can help resolve the issue. This guide outlines how to resolve problems within your project, ensure proper saving and building, and troubleshoot by running the APK locally. + +:::info[Prerequisites] +- A completed FlutterFlow project +- Firebase authentication set up (if used) +- Flutter SDK installed locally +::: + +Follow the steps below to resolve the issue: + + 1. **Resolve Any Project Issues** + - Review your FlutterFlow project for validation errors or configuration issues. + - Fix any errors displayed in the UI. + + ![](../imgs/20250430121526027709.png) + + 2. **Save the Project** + - Before exporting your build, press `Ctrl + S` or `Cmd + S` to ensure all changes are saved. + + ![](../imgs/20250430121526232282.png) + + 3. **Rebuild and Download the APK** + - Once the project is saved and issues are resolved, trigger a rebuild and download the APK file. + + ![](../imgs/20250430121526436202.png) + + 4. **Run the APK Locally** + - Run the exported APK locally using an emulator or a physical device to view any compiler errors. + - Open a terminal and navigate to your project directory to run the necessary Flutter commands. + +:::tip +To view logs, use the `flutter run` command in the terminal. This will show real-time errors and debug output. +::: + +:::warning +When running code locally, features such as **Google Sign-In** may not work by default. To enable them: +- Add your SHA-1 key to the Firebase Console under your Android app settings. +::: diff --git a/docs/testing-deployment-publishing/exporting-code/sync_limitations_modified_source_code.md b/docs/testing-deployment-publishing/exporting-code/sync_limitations_modified_source_code.md new file mode 100644 index 00000000..62638705 --- /dev/null +++ b/docs/testing-deployment-publishing/exporting-code/sync_limitations_modified_source_code.md @@ -0,0 +1,41 @@ +--- +keywords: ['android', 'flutterflow', 'import'] +slug: /sync-limitations-modified-source-code +title: Sync Limitations with Modified Source Code +--- + +# Sync Limitations with Modified Source Code + +Manually editing FlutterFlow-generated code in an external IDE such as **Android Studio** or **VS Code** can be useful for advanced customization. However, FlutterFlow does **not** support importing or syncing these changes back into the FlutterFlow visual builder. + +:::warning +Once code is modified outside of FlutterFlow, those edits **cannot** be re-imported or synced with your FlutterFlow project. +::: + +:::info[Prerequisites] +- A FlutterFlow project exported to your local IDE (VS Code, Android Studio, etc.). +- GitHub connection configured if running in Test Mode. +::: + +**Recommendations** + + If you require significant customizations: + + 1. **Export Your Code** + Use the **Download Code** feature in FlutterFlow to export your project to an IDE. + + 2. **Maintain a Separate Codebase** + Continue development independently in your IDE without expecting reverse compatibility with FlutterFlow. + + 3. **Use GitHub for Test Mode** + You can connect your GitHub repository to FlutterFlow and run your modified app using **Test Mode**. + + ![](../imgs/20250430121235199536.png) + + 4. **Document External Changes** + Track custom code modifications separately as they won't reflect in your FlutterFlow project. + +:::note +- All visual development and features within FlutterFlow must be maintained in the builder itself. +- The exported project becomes a standalone Flutter project once modified outside of FlutterFlow. +::: \ No newline at end of file diff --git a/docs/testing-deployment-publishing/imgs/20250430121235199536.png b/docs/testing-deployment-publishing/imgs/20250430121235199536.png new file mode 100644 index 00000000..4fb1b1d2 Binary files /dev/null and b/docs/testing-deployment-publishing/imgs/20250430121235199536.png differ diff --git a/docs/testing-deployment-publishing/imgs/20250430121526027709.png b/docs/testing-deployment-publishing/imgs/20250430121526027709.png new file mode 100644 index 00000000..3413e547 Binary files /dev/null and b/docs/testing-deployment-publishing/imgs/20250430121526027709.png differ diff --git a/docs/testing-deployment-publishing/imgs/20250430121526232282.png b/docs/testing-deployment-publishing/imgs/20250430121526232282.png new file mode 100644 index 00000000..67e25e97 Binary files /dev/null and b/docs/testing-deployment-publishing/imgs/20250430121526232282.png differ diff --git a/docs/testing-deployment-publishing/imgs/20250430121526436202.png b/docs/testing-deployment-publishing/imgs/20250430121526436202.png new file mode 100644 index 00000000..ac72d681 Binary files /dev/null and b/docs/testing-deployment-publishing/imgs/20250430121526436202.png differ diff --git a/docs/testing-deployment-publishing/publishing/embed_a_flutterflow_web_app_into_iframe.md b/docs/testing-deployment-publishing/publishing/embed_a_flutterflow_web_app_into_iframe.md new file mode 100644 index 00000000..e34da9f8 --- /dev/null +++ b/docs/testing-deployment-publishing/publishing/embed_a_flutterflow_web_app_into_iframe.md @@ -0,0 +1,46 @@ +--- +keywords: ['embed', 'iframe', 'web app', 'flutterflow'] +slug: /embed-web-app-in-iframe +title: Embed a FlutterFlow Web App in an Iframe +--- + +# Embed a FlutterFlow Web App in an Iframe + +Embedding a FlutterFlow web application inside an `iframe` is technically possible, but it may not always work as expected due to browser security restrictions and FlutterFlow’s use of `localStorage`. + +:::warning +Embedding a FlutterFlow web app in an `iframe` may result in **incomplete functionality** or loading issues—particularly if third-party cookies are disabled in the browser. +::: + +:::info[Prerequisites] +- A deployed FlutterFlow web app (e.g., on Firebase Hosting or FlutterFlow subdomain). +- Ability to modify the host page where the `iframe` is embedded. +::: + +Follow the steps below to embed a Web App in an Iframe: + + 1. **Enable Third-Party Cookies** + Ensure that third-party cookies are allowed in the browser for the FlutterFlow app’s domain. This is critical for `localStorage` access inside the iframe. + + 2. **Embed the Iframe Code** + Use the following HTML snippet in your host page to embed the FlutterFlow app: + + ```html + + + ![](imgs/20250430121251224097.png) + + Replace `https://your-flutterflow-app.web.app` with the actual hosted URL of your FlutterFlow web app. + +:::note +- Some features in your app might not function properly when embedded in an iframe, especially those that rely on session storage or local storage. + +- Security policies like `X-Frame-Options` or `Content-Security-Policy` headers can also prevent embedding. + +- Many platforms (e.g., Google, LinkedIn) disallow embedding their apps in iframes to prevent clickjacking and other attacks. +::: \ No newline at end of file diff --git a/docs/testing-deployment-publishing/publishing/imgs/20250430121251224097.png b/docs/testing-deployment-publishing/publishing/imgs/20250430121251224097.png new file mode 100644 index 00000000..0505df5a Binary files /dev/null and b/docs/testing-deployment-publishing/publishing/imgs/20250430121251224097.png differ diff --git a/docs/troubleshooting/ github/manage_code_edits_with_github_branches.md b/docs/troubleshooting/ github/manage_code_edits_with_github_branches.md new file mode 100644 index 00000000..586707bd --- /dev/null +++ b/docs/troubleshooting/ github/manage_code_edits_with_github_branches.md @@ -0,0 +1,50 @@ +--- +keywords: ['code', 'edits', 'github', 'branches'] +slug: troubleshooting/github/manage-code-edits-with-github-branches +title: Manage Code Edits Without Overwrites When Using GitHub +--- + +# Manage Code Edits Without Overwrites When Using GitHub + +When working with GitHub integration in FlutterFlow, it’s important to understand how FlutterFlow manages branches to prevent your custom code edits from being overwritten. + +:::info[Prerequisites] +- A FlutterFlow project linked to a GitHub repository. +- Basic understanding of Git branches and merge workflows. +::: + +FlutterFlow pushes updates only to the `flutterflow` branch of your GitHub repository. You **should not** make local changes directly to this branch, as they will be **overwritten** every time the project syncs from FlutterFlow. + +Follow the steps below to safely make and retain local code changes: + +1. **Push from FlutterFlow to GitHub** + This sends the latest generated code to the `flutterflow` branch. + +2. **Create a New Branch for Local Edits** + Checkout a separate branch (e.g., `main`) and copy the code from the `flutterflow` branch into it. + + ```bash + git checkout -b main + git merge flutterflow + ``` + +3. **Make Changes on Your Custom Branch** + Apply any local modifications on the custom branch (not on flutterflow). + +4. **Push Again From FlutterFlow When Needed** + When you push new changes from FlutterFlow, it will update the flutterflow branch. Your custom branch will remain unchanged. + +5. **Merge and Resolve Conflicts** + After FlutterFlow updates the flutterflow branch, merge it into your custom branch and resolve any conflicts: + + ```js + git checkout main + ``` + ```js + git merge flutterflow + ``` + This allows you to selectively retain or discard changes as needed. + +:::warning +Do not make direct changes to the flutterflow branch, as any future push from FlutterFlow will overwrite it. +::: \ No newline at end of file diff --git a/docs/troubleshooting/api/resolve_404_api_call_errors.md b/docs/troubleshooting/api/resolve_404_api_call_errors.md new file mode 100644 index 00000000..aa26cf2d --- /dev/null +++ b/docs/troubleshooting/api/resolve_404_api_call_errors.md @@ -0,0 +1,40 @@ +--- +keywords: ['api', '404', 'error handling', 'api call', 'http'] +slug: /resolve-404-api-call-errors +title: Resolve 404 API Call Errors in API Calls +--- + +# Resolve 404 API Call Errors in API Calls + +When working with APIs in FlutterFlow, you may encounter `404` errors, which indicate that the requested resource was not found. These are standard HTTP status codes typically triggered by incorrect endpoint configurations or missing parameters. + +This article outlines what a 404 error means and how to troubleshoot it within your API call setup. + +:::info[Prerequisites] +- A configured API call in FlutterFlow. +- Access to the API documentation for the external service you are integrating. +::: + +## Common Reasons for 404 Errors + +1. **Incorrect Endpoint URL** + Double-check that the base URL and endpoint path are spelled correctly and match what’s defined in the API documentation. + +2. **Missing or Incorrect Parameters** + Some APIs require specific query or path parameters. Ensure that all required parameters are included and correctly formatted. + +3. **Trailing Slashes** + Some endpoints treat URLs with trailing slashes (e.g., `/users/`) differently than without (e.g., `/users`). Try removing or adding the trailing slash to see if it resolves the issue. + +4. **Authorization or Access Restrictions** + If the endpoint exists but is protected, ensure that the correct headers (e.g., `Authorization`) are added to the request. + + Example Error Message: + + ![](../assets/20250430121358370953.png) + + The error message typically includes the requested URL and response code, which can help narrow down the issue. + +:::tip +Always compare the URL structure in your FlutterFlow API call to the official documentation of the API provider. Use tools like **[Postman](https://www.postman.com/)** to test endpoints independently before implementing them in FlutterFlow. +::: diff --git a/docs/troubleshooting/apple-store-deployment/fetch-signing-files/associated-domains-error.md b/docs/troubleshooting/apple-store-deployment/fetch-signing-files/associated-domains-error.md new file mode 100644 index 00000000..511dc6ff --- /dev/null +++ b/docs/troubleshooting/apple-store-deployment/fetch-signing-files/associated-domains-error.md @@ -0,0 +1,84 @@ +--- +keywords: ['associated domains', 'provisioning profile', 'apple developer', 'deployment error'] +slug: troubleshooting/apple-store-deployment/associated-domains-error +title: Provisioning Profile Error Associated Domains +--- + +# Provisioning Profile Error Associated Domains + +When deploying an iOS app to the App Store, the following error may occur: + + ```text + Provisioning profile [App Store Project ID] doesn't support the Associated Domains capability + ``` + + This error is related to missing capabilities in your provisioning profile and must be fixed in the Apple Developer portal. + +:::info[Prerequisites] +You need an active Apple Developer account with access to the **Certificates, Identifiers & Profiles** section. +::: + +This error appears when the provisioning profile does not support the **Associated Domains** capability. This is required for: + + - Universal Links + - Dynamic Links + - App Clips + - Website authentication + +Follow the steps below to resolve the error: + +1. **Open Apple Developer Portal** + + Visit the **[Apple Developer Account](https://developer.apple.com/account/)** and go to: + + **Certificates, Identifiers & Profiles > Identifiers** + + ![](../../assets/20250430121344371643.png) + + +2. **Select App Identifier** + + Click the **App ID** that matches your FlutterFlow project. + + +3. **Enable Associated Domains** + + In the capabilities section: + + - Check the box for **Associated Domains** + - You do not need to create a new App ID + + ![](../../assets/20250430121344599814.png) + + +4. **Save Changes** + + Click **Save** to update your App ID. + + +5. **Redeploy from FlutterFlow** + + Return to FlutterFlow and deploy the app again. + + +## Developer Account Limitations + + The **Associated Domains** capability is only available with a paid Apple Developer Program membership. + + + - Check Subscription Status + + In the Apple Developer portal: + + - Look for **Subscription Status** + - It should say **Active** + - If not, an **Expiration Date** will be shown + + ![](../../assets/20250430121344826995.png) + + :::warning + If you're using **Dynamic Links**, enabling this capability is required. + ::: + + +For additional support, contact Apple Developer Support at [devsupport@apple.com](mailto:devsupport@apple.com). diff --git a/docs/troubleshooting/apple-store-deployment/fetch-signing-files/fix-app_store_deploy_button_not_working.md b/docs/troubleshooting/apple-store-deployment/fetch-signing-files/fix-app_store_deploy_button_not_working.md new file mode 100644 index 00000000..916333c0 --- /dev/null +++ b/docs/troubleshooting/apple-store-deployment/fetch-signing-files/fix-app_store_deploy_button_not_working.md @@ -0,0 +1,37 @@ +--- +keywords: ['app store', 'deploy', 'codemagic', '503 error', 'large assets'] +slug: /fix-app-store-deploy-button-not-working +title: Fix App Store Deploy Button Not Working +--- + +# Fix App Store Deploy Button Not Working + +When deploying your application to the App Store, the **Deploy** button may become unresponsive. In such cases, inspecting your browser’s developer console may reveal the following error: + +```bash +POST https://api.flutterflow.io/v1/codemagicBuildRequest 503 +``` + +Why This Happens +This error usually occurs when your FlutterFlow project exceeds the maximum size limit allowed by Codemagic. Large assets such as videos or high-resolution images can cause the project to surpass this limit. + + Recommended project size: 50 MB or less + +Resolution Steps +Follow the steps below to fix the issue: + + - Remove Large Assets + + - Identify and remove large media files (e.g., videos, high-resolution images) from your project. + + - Consider hosting these assets externally using a CDN or cloud storage service, then use the network URLs in your project. + + - Check and Reduce Project Size + + - Ensure your total project size is under 50 MB before deploying. + + Projects exceeding 50 MB are likely to fail during deployment. Always monitor your asset size. + +Need Further Assistance? +If the issue persists after reducing your project size, contact FlutterFlow support support@flutterflow.io + diff --git a/docs/troubleshooting/apple-store-deployment/fetch-signing-files/fix_signing_error_imagenotification.md b/docs/troubleshooting/apple-store-deployment/fetch-signing-files/fix_signing_error_imagenotification.md new file mode 100644 index 00000000..e0349b95 --- /dev/null +++ b/docs/troubleshooting/apple-store-deployment/fetch-signing-files/fix_signing_error_imagenotification.md @@ -0,0 +1,53 @@ +--- +keywords: ['signing', 'ios', 'error'] +slug: /fix-signing-error-imagenotification +title: Fix iOS Signing Error for ImageNotification +--- + +# Fix iOS Signing Error for ImageNotification + +When building or deploying an iOS app, you may encounter the following error message: + + ```text + Signing for "ImageNotification" requires a development team + ``` + +This issue typically occurs when the signing configuration for the `ImageNotification` service extension is incomplete or misconfigured in Xcode or FlutterFlow. + +The error occurs when Xcode or FlutterFlow attempts to compile and sign the `ImageNotification` extension without a valid development team or properly configured provisioning profile. This step is necessary to ensure that all targets in your iOS app, including extensions, are signed correctly. + +Follow the steps below to resolve this issue: + +1. **Use a Valid Apple Developer Account** + + Ensure you are signed in with an **active paid Apple Developer account**. Free accounts do not support all signing and deployment capabilities. + +2. **Select a Development Team in Xcode** + + If working locally: + + - Open your project in Xcode. + - Go to the **Signing & Capabilities** tab for the `ImageNotification` target. + - Select a valid **development team** from the dropdown. + +3. **Confirm Provisioning Profiles** + + Make sure the provisioning profiles used: + + - Match the selected development team + - Are correctly configured for all targets, including the service extension + +4. **Update iOS Deployment Settings in FlutterFlow** + + If you're deploying via FlutterFlow: + + - Go to **App Settings > Mobile Deployment > App Store** + - Set the correct **Development Team ID** in the iOS configuration + +:::tip +- Not sure what type of error you’re seeing in your FlutterFlow build? + +- Refer to the **Codemagic Error Identification Guide** to learn how to identify and resolve common iOS build issues. +::: + +If the issue persists, contact FlutterFlow support: [support@flutterflow.io](mailto:support@flutterflow.io) diff --git a/docs/troubleshooting/apple-store-deployment/fetch-signing-files/pem_private_key_error.md b/docs/troubleshooting/apple-store-deployment/fetch-signing-files/pem_private_key_error.md new file mode 100644 index 00000000..af5c0e2c --- /dev/null +++ b/docs/troubleshooting/apple-store-deployment/fetch-signing-files/pem_private_key_error.md @@ -0,0 +1,43 @@ +--- +keywords: ['deployment', 'error', 'value'] +slug: troubleshooting/apple-store-deployment/pem-private-key-error +title: Invalid PEM Private Key Error +--- + +# Invalid PEM Private Key Error + +When deploying to the App Store, you may encounter the following error in the console: + + ```text + app-store-connect: error: argument --private-key: Provided value is not a valid PEM encoded private key + ``` + + This typically appears during the Fetch Signing Files step and may look like this: + + ```text + Failed Step: Fetch Signing files usage: app-store-connect ... + error: argument --private-key: Provided value is not a valid PEM encoded private key + ``` + +:::info[Prerequisites] +An active Apple Developer account and a valid PEM-encoded private key file generated from your App Store Connect account. +::: + +This error indicates that the private key provided is either invalid or incorrectly formatted. The App Store requires a valid PEM-encoded private key for deployment authentication. + +Follow the steps below to resolve the error: + +1. **Navigate to App Settings** + + Go to **App Settings** > **Mobile Deployment** > **App Store**. + +2. **Re-upload Private Key** + + - Re-upload a valid PEM-encoded private key. + - Ensure the file is not corrupted and follows the proper PEM format. + + :::tip + If the App Store configuration has not been set up yet, refer to the deployment documentation for detailed setup steps. + ::: + +If re-uploading the key does not fix the error, please contact support[support@flutterflow.io](mailto:support@flutterflow.io) diff --git a/docs/troubleshooting/apple-store-deployment/fetch-signing-files/sign_in_with_apple_provisioning_error.md b/docs/troubleshooting/apple-store-deployment/fetch-signing-files/sign_in_with_apple_provisioning_error.md new file mode 100644 index 00000000..5921618d --- /dev/null +++ b/docs/troubleshooting/apple-store-deployment/fetch-signing-files/sign_in_with_apple_provisioning_error.md @@ -0,0 +1,54 @@ +--- +keywords: ['sign-in', 'apple', 'provisioning'] +slug: troubleshooting/apple-store-deployment/sign-in-with-apple-provisioning-error +title: Sign in with Apple Provisioning Profile Error +--- + +# Sign in with Apple Provisioning Profile Error + +When deploying to the App Store, you may encounter an error stating that the provisioning profile does not support the **Sign in with Apple** capability. This error occurs when the feature is used in the app but not enabled for the associated App ID in your Apple Developer account. + +:::info[Prerequisites] +You must have a registered App ID in your Apple Developer account with a provisioning profile configured for App Store distribution. +::: + +Follow the steps below to resolve the error: + +1. **Open the Apple Developer Portal** + + - Go to **[Apple Developer](https://developer.apple.com)** + - Navigate to **Certificates, Identifiers & Profiles** + - Open the **Identifiers** tab + + ![Apple Developer Dashboard](../../assets/20250430121345698106.png) + +2. **Select Your App Identifier** + + - Find the **App ID** associated with your project + - Click on it to open its configuration page + +3. **Enable the Capability** + + - Under **Capabilities**, check the box for **Sign in with Apple** + - No new App ID or keys are required for this update + + ![Enable Capability](../../assets/20250430121345966687.png) + + +4. **Save Your Changes** + + - Click **Save** to apply the updated capability to your App ID + - Ensure no additional changes are needed before proceeding + +5. **Redeploy the App** + + - In FlutterFlow, go to **App Settings > Mobile Deployment > App Store** + - Confirm the capability is enabled, then start your deployment + + +If your app does not use **Sign in with Apple**, or if this error continues, contact **FlutterFlow Support** at [support@flutterflow.io](mailto:support@flutterflow.io). + +:::info[Additional Resources] +- [Apple Developer: Sign in with Apple](https://developer.apple.com/sign-in-with-apple/) +- **[Mobile Deployment Setup Guide](/deployment/app-store-connect/setup)** +::: \ No newline at end of file diff --git a/docs/troubleshooting/apple-store-deployment/ios-Signing/add_photo_library_permission_string_info_plist.md b/docs/troubleshooting/apple-store-deployment/ios-Signing/add_photo_library_permission_string_info_plist.md new file mode 100644 index 00000000..43cf9214 --- /dev/null +++ b/docs/troubleshooting/apple-store-deployment/ios-Signing/add_photo_library_permission_string_info_plist.md @@ -0,0 +1,60 @@ +--- +keywords: ['photo library', 'info.plist', 'permission', 'runner'] +slug: troubleshooting/apple-store-deployment/add-photo-library-permission-string-info-plist +title: Add Photo Library Permission String to Info.plist +--- + +# Add Photo Library Permission String to Info.plist + +When uploading your app to the App Store, you may receive the following error: + + ```text + ITMS-90683: Missing purpose string in Info.plist - The Info.plist file for the “Runner.app” bundle should contain a NSPhotoLibraryUsageDescription key. + ``` + + This error indicates that your app references the **Photo Library API** or a related entitlement but does not include a description of why access is needed. Apple requires a clear, user-facing message in the `Info.plist` file to explain the purpose of this data usage. + +:::info[Prerequisites] +Ensure your FlutterFlow project is connected to the App Store and you are preparing for mobile deployment. +::: + +The issue occurs when your app, or one of its dependencies, uses an API that accesses the user's photo library without providing a usage description in the `Info.plist` file. Even if your app does not directly use this API, Apple still requires a reason to be declared. + + +Follow the steps below to resolve this error: + +1. **Open Permissions Configuration** + + - Navigate to **Settings & Integrations**. + - Scroll to the **Project Setup** section. + - Click on **Permissions**. + + ![](../../assets/20250430121227744579.png) + +2. **Add a Usage Description** + + - Locate the **Photo Library** permission. + - Enter a user-facing explanation in the usage description field (e.g., “This app requires access to your photo library to allow image uploads.”). + + ![](../../assets/20250430121227989568.png) + +3. **Save and Rebuild** + + - After saving the updated permissions, rebuild and redeploy your app to the App Store. + + :::tip + Make sure your description is **clear and localized** if your app supports multiple languages. Apple requires both the base description and localized versions for supported locales. + ::: + + +If the issue persists after adding the permission string: + + - Verify that all required keys are present in `Info.plist`. + - Ensure third-party packages are not requesting additional permissions that are undocumented. + + + +:::info[Additional Resources] +- **[Apple's Documentation on Requesting Access to Protected Resources](https://developer.apple.com/documentation/uikit/protecting_the_user_s_privacy/requesting_access_to_protected_resources)** +- **[App Store Deployment Guide](/deployment/app-store)** +::: \ No newline at end of file diff --git a/docs/troubleshooting/apple-store-deployment/ios-Signing/enable_push_notifications_in_provisioning_profile.md b/docs/troubleshooting/apple-store-deployment/ios-Signing/enable_push_notifications_in_provisioning_profile.md new file mode 100644 index 00000000..9a7c6fee --- /dev/null +++ b/docs/troubleshooting/apple-store-deployment/ios-Signing/enable_push_notifications_in_provisioning_profile.md @@ -0,0 +1,64 @@ +--- +keywords: ['push notifications', 'provisioning profile', 'apple developer'] +slug: troubleshooting/apple-store-deployment/enable-push-notifications-in-provisioning-profile +title: Enable Push Notifications in Provisioning Profile +--- + +# Enable Push Notifications in Provisioning Profile + +When deploying an app to the App Store using FlutterFlow, you may encounter the following error: + + ```text + Provisioning profile doesn't support the Push Notifications capability. + ``` + +This issue indicates that push notifications have not been properly enabled in the provisioning profile associated with your App ID. + +:::info[Prerequisites] +An active Apple Developer account and an App ID registered for your app in the Apple Developer Portal. +::: + +This error occurs when an app includes push notification functionality, but the **Push Notifications** capability is not enabled in the corresponding App ID within your Apple Developer account. + + +Follow the steps below to enable the **Push Notifications** capability for your app: + +1. **Log into Apple Developer Account** + + - Go to the **[Apple Developer Portal](https://developer.apple.com/account)**. + - Navigate to **Certificates, Identifiers & Profiles** > **Identifiers**. + + ![](../../assets/20250430121236782215.png) + +2. **Select Your App Identifier** + + - Locate the App ID associated with your app. + - Click on it to open the identifier details. + +3. **Enable Push Notifications** + + - In the **Capabilities** section, check the box for **Push Notifications**. + - There is no need to modify the primary App ID or generate a new key for first-time setup. + + ![](../../assets/20250430121236976235.png) + +4. **Save Changes** + + - Click **Save** to apply the capability update. + +5. **Rebuild in FlutterFlow** + + - After updating the capability, return to FlutterFlow. + - Rebuild and deploy your app using the updated provisioning profile. + +:::tip +Need help setting up push notifications from scratch? See the **[Push Notifications Setup Guide](/notifications/push-notifications)** for a full walkthrough. +::: + + +If you've completed the steps above and still encounter the error, confirm the following: + + - The correct provisioning profile is selected during deployment. + - Your Apple Developer account is active and has the correct entitlements. + - Push notification certificates are valid and not expired. + diff --git a/docs/troubleshooting/apple-store-deployment/ios-Signing/update_version_to_fix_pre_release_train_error.md b/docs/troubleshooting/apple-store-deployment/ios-Signing/update_version_to_fix_pre_release_train_error.md new file mode 100644 index 00000000..2e74a8bf --- /dev/null +++ b/docs/troubleshooting/apple-store-deployment/ios-Signing/update_version_to_fix_pre_release_train_error.md @@ -0,0 +1,61 @@ +--- +keywords: ['release', 'build', 'deployment'] +slug: troubleshooting/apple-store-deployment/update-version-to-fix-pre-release-train-error +title: Update Version to Fix Pre-Release Train Error +--- + +# Update Version to Fix Pre-Release Train Error + +When submitting your app to the App Store, you may encounter the following error: + + ```text + Invalid Pre-Release Train. The train version 'X.X.X' is closed for new build submissions. + ``` + +This occurs when the app version you're trying to submit is already closed for new builds. Even if the build number has changed, the App Store will reject submissions for the same version number. + +:::info[Prerequisites] +You must have access to your FlutterFlow project’s deployment settings and an active Apple Developer account to complete the steps below. +::: + +Follow the steps below to resolve the issue: + +1. **Open Deployment Settings** + + - Press `Cmd/Ctrl + K`, type **"deployment"**, and hit Enter. + This will open the **Deployment** page. + + ![](../../assets/20250430121353111041.png) + + - Alternatively, go to **Project Settings > Deployment**. + + ![](../../assets/20250430121353323352.png) + +2. **Update Version Number** + + - Click the **Expand** icon next to the **Version** field. + + ![](../../assets/20250430121353635504.png) + + - Update the version to the next increment (e.g., from `1.2.0` to `1.2.1`). + + ![](../../assets/20250430121353926967.gif) + +3. **Redeploy Your App** + + After incrementing the version number, reattempt the deployment. The new version will be accepted. + +## Versioning Guidelines + + Use **Semantic Versioning** to manage your app versions effectively: + + - **Major Version** (`1.x.x`): Introduces breaking changes. + - **Minor Version** (`x.1.x`): Adds features without breaking existing functionality. + - **Patch/Build Version** (`x.x.1`): Fixes bugs or applies minor changes. + + Choose a versioning strategy that best suits your development workflow. + +:::info[Additional Resources] +- [Codemagic Error Identification Guide](/testing/codemagic-error-guide) +- [App Store Deployment Documentation](/deployment/app-store) +::: \ No newline at end of file diff --git a/docs/troubleshooting/apple-store-deployment/publishing/custom_domain_connection_error.md b/docs/troubleshooting/apple-store-deployment/publishing/custom_domain_connection_error.md index 70aa7c6c..32cec90c 100644 --- a/docs/troubleshooting/apple-store-deployment/publishing/custom_domain_connection_error.md +++ b/docs/troubleshooting/apple-store-deployment/publishing/custom_domain_connection_error.md @@ -1,6 +1,6 @@ --- keywords: ['configuration', 'connect', 'domain'] -slug: troubleshooting/apple-store-deployment-issues/custom-domain-connection-error +slug: /troubleshooting/apple-store-deployment-issues/custom-domain-connection-error title: Custom Domain Connection Error --- diff --git a/docs/troubleshooting/apple-store-deployment/publishing/custom_domain_connection_issues.md b/docs/troubleshooting/apple-store-deployment/publishing/custom_domain_connection_issues.md index ef256696..5daf9c9f 100644 --- a/docs/troubleshooting/apple-store-deployment/publishing/custom_domain_connection_issues.md +++ b/docs/troubleshooting/apple-store-deployment/publishing/custom_domain_connection_issues.md @@ -1,6 +1,6 @@ --- keywords: ['error', 'custom', 'domains'] -slug: troubleshooting/apple-store-deployment-issues/custom-domain-connection-issues +slug: /troubleshooting/apple-store-deployment-issues/custom-domain-connection-issues title: Custom Domain Connection Issues --- diff --git a/docs/troubleshooting/apple-store-deployment/publishing/enable_photo_upload_webview.md b/docs/troubleshooting/apple-store-deployment/publishing/enable_photo_upload_webview.md new file mode 100644 index 00000000..9c5c95a8 --- /dev/null +++ b/docs/troubleshooting/apple-store-deployment/publishing/enable_photo_upload_webview.md @@ -0,0 +1,52 @@ +--- +keywords: ['permissions', 'upload', 'webview'] +slug: /troubleshooting/apple-store-deployment/enable-photo-upload-webview +title: Enable Photo Uploads in WebView on Real Devices +--- + +# Enable Photo Uploads in WebView on Real Devices + +When uploading images inside a WebView, you may notice that it works correctly in Run/Test mode but fails on a real device. This typically happens due to missing permissions for accessing the device's photo library. + +During **web runs**, permissions are handled by the browser, so uploading a photo does not require additional configuration. However, on **real devices**, access to the **photo library** is considered sensitive, and the operating system requires explicit permission. + +Since the upload functionality is handled inside a **WebView**, FlutterFlow does not automatically detect the need to request photo library access — it only adds permissions based on native **Upload Image** actions. + +:::info[Prerequisites] +This solution is for apps using WebView components to upload photos on iOS or Android devices. +::: + +Follow these steps to add the required permissions and allow photo uploads via WebView on real devices: + +1. **Enable Photo Library Permission** + + - Navigate to your project’s **Settings & Integrations**. + - Click on the **Permissions** tab. + - Enable the **Photo Library** permission. + + ![](../../assets/20250430121337121891.png) + +2. **Request Permission at Runtime** + + - Before triggering the upload inside your WebView, ensure that the user has granted photo library access. + - Use the **Get Permissions** action for the photo library. + + ![](../../assets/20250430121337385659.png) + +3. **Reinstall the App** + + - Uninstall the app from your device. + - Reinstall the app so the updated permission request can trigger correctly. + - Run the app and accept the photo library access when prompted. + + :::warning + If the app is not reinstalled, the new permissions may not be applied properly, and the upload functionality inside the WebView will continue to fail. + ::: + + FlutterFlow only adds required permissions when it detects specific native actions. Since WebView is treated as an embedded browser and does not directly signal an "Upload Image" intent, permissions like **Photo Library** must be manually enabled and managed. + + +:::info[Related Resources] +- [App Permissions Setup](/settings/permissions) +- [Using WebView in FlutterFlow](/components/webview) +::: diff --git a/docs/troubleshooting/apple-store-deployment/publishing/fix_missing_purpose_string_info_plist.md b/docs/troubleshooting/apple-store-deployment/publishing/fix_missing_purpose_string_info_plist.md new file mode 100644 index 00000000..37a2808a --- /dev/null +++ b/docs/troubleshooting/apple-store-deployment/publishing/fix_missing_purpose_string_info_plist.md @@ -0,0 +1,70 @@ +--- +keywords: ['permissions', 'error', 'missing'] +slug: /troubleshooting/apple-store-deployment/fix-missing-purpose-string-info-plist +title: Fix Missing Purpose String in Info.plist +--- + +# Fix Missing Purpose String in Info.plist + +When submitting an iOS app to the App Store, you may encounter the following error: + + ```text + ITMS-90683: Missing Purpose String in Info.plist - Your app's code references one or more APIs that access sensitive user data. The app’s Info.plist file should contain a [permission] key with a user-facing purpose string explaining clearly and completely why your app needs the data. If you're using external libraries or SDKs, they may reference APIs that require a purpose string. While your app might not use these APIs, a purpose string is still required. + ``` + +:::info[Prerequisites] +You must have access to your FlutterFlow project and an active Apple Developer account to complete the steps below. +::: + +This error occurs when your app references APIs that access sensitive user data, such as photos, the microphone, or location. Apple requires a **purpose string** for each permission in the `Info.plist` file. This applies even if the reference comes indirectly through third-party libraries or SDKs. + +Follow these steps to fix the `ITMS-90683` error and provide the necessary permissions: + +1. **Identify Required Permissions** + + - Review your app features that request access to sensitive data (e.g., photos, location, camera, microphone). + +2. **Open the Permissions Section** + + - Navigate to **Settings & Integrations** in your FlutterFlow project. + - Select the **Permissions** tab. + + ![](../../assets/20250430121321604645.png) + +3. **Add Purpose Strings** + + - For each enabled permission, provide a clear and complete explanation of why your app needs access. + - These strings will be included in your app’s `Info.plist` file and shown to users during runtime prompts. + + **Examples**: + + - `NSPhotoLibraryUsageDescription`: *"This app requires access to your photo library to allow image uploads from your device."* + - `NSMicrophoneUsageDescription`: *"Microphone access is needed to record voice notes."* + + ![](../../assets/20250430121321961623.png) + +4. **Review Apple’s Privacy Guidelines** + + - Ensure all purpose strings comply with **[Apple’s official documentation](https://developer.apple.com/documentation/uikit/protecting_the_user_s_privacy/requesting_access_to_protected_resources)**. + +5. **Test Permission Prompts** + + - Run your app and verify that the correct permission prompts appear and display the purpose string. + +6. **Submit Your App** + + - Once all purpose strings are included and verified, proceed to resubmit your app to the App Store. + + :::tip + Not sure which permissions your app uses? Consider scanning your app’s features and external packages for potential access to sensitive APIs. + ::: + + Providing accurate purpose strings is essential for App Store approval and user trust. Even if the app indirectly accesses sensitive APIs through libraries, Apple mandates a valid and user-friendly explanation. + + Clear purpose strings also help users understand why permissions are needed, leading to better opt-in rates and a smoother onboarding experience. + + +:::info[Additional Resources] +- [Apple's Permission Guidelines](https://developer.apple.com/documentation/uikit/protecting_the_user_s_privacy/requesting_access_to_protected_resources) +- [FlutterFlow Permissions Setup](/settings/permissions) +::: diff --git a/docs/troubleshooting/apple-store-deployment/publishing/web_publishing_faqs.md b/docs/troubleshooting/apple-store-deployment/publishing/web_publishing_faqs.md index 49ad5123..39941271 100644 --- a/docs/troubleshooting/apple-store-deployment/publishing/web_publishing_faqs.md +++ b/docs/troubleshooting/apple-store-deployment/publishing/web_publishing_faqs.md @@ -1,6 +1,6 @@ --- keywords: ['faqs', 'publishing', 'web'] -slug: troubleshooting/apple-store-deployment-issues/web-publishing-faqs +slug: /troubleshooting/apple-store-deployment-issues/web-publishing-faqs title: Web Publishing FAQs --- diff --git a/docs/troubleshooting/assets/20250430121110741307.png b/docs/troubleshooting/assets/20250430121110741307.png new file mode 100644 index 00000000..e3401212 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121110741307.png differ diff --git a/docs/troubleshooting/assets/20250430121129656368.png b/docs/troubleshooting/assets/20250430121129656368.png new file mode 100644 index 00000000..59ad896a Binary files /dev/null and b/docs/troubleshooting/assets/20250430121129656368.png differ diff --git a/docs/troubleshooting/assets/20250430121130021370.png b/docs/troubleshooting/assets/20250430121130021370.png new file mode 100644 index 00000000..dcd33384 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121130021370.png differ diff --git a/docs/troubleshooting/assets/20250430121130276404.png b/docs/troubleshooting/assets/20250430121130276404.png new file mode 100644 index 00000000..de74bfb4 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121130276404.png differ diff --git a/docs/troubleshooting/assets/20250430121130545080.png b/docs/troubleshooting/assets/20250430121130545080.png new file mode 100644 index 00000000..8e25685a Binary files /dev/null and b/docs/troubleshooting/assets/20250430121130545080.png differ diff --git a/docs/troubleshooting/assets/20250430121130820658.png b/docs/troubleshooting/assets/20250430121130820658.png new file mode 100644 index 00000000..40111b65 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121130820658.png differ diff --git a/docs/troubleshooting/assets/20250430121131116479.png b/docs/troubleshooting/assets/20250430121131116479.png new file mode 100644 index 00000000..7211af43 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121131116479.png differ diff --git a/docs/troubleshooting/assets/20250430121131422645.png b/docs/troubleshooting/assets/20250430121131422645.png new file mode 100644 index 00000000..11fd2153 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121131422645.png differ diff --git a/docs/troubleshooting/assets/20250430121131697707.png b/docs/troubleshooting/assets/20250430121131697707.png new file mode 100644 index 00000000..c7b91482 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121131697707.png differ diff --git a/docs/troubleshooting/assets/20250430121131952557.png b/docs/troubleshooting/assets/20250430121131952557.png new file mode 100644 index 00000000..721a1444 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121131952557.png differ diff --git a/docs/troubleshooting/assets/20250430121158393454.png b/docs/troubleshooting/assets/20250430121158393454.png new file mode 100644 index 00000000..cc5936a9 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121158393454.png differ diff --git a/docs/troubleshooting/assets/20250430121201175857.png b/docs/troubleshooting/assets/20250430121201175857.png new file mode 100644 index 00000000..a8be1d90 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121201175857.png differ diff --git a/docs/troubleshooting/assets/20250430121201415199.png b/docs/troubleshooting/assets/20250430121201415199.png new file mode 100644 index 00000000..bf472f35 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121201415199.png differ diff --git a/docs/troubleshooting/assets/20250430121201673795.png b/docs/troubleshooting/assets/20250430121201673795.png new file mode 100644 index 00000000..bf472f35 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121201673795.png differ diff --git a/docs/troubleshooting/assets/20250430121201908772.png b/docs/troubleshooting/assets/20250430121201908772.png new file mode 100644 index 00000000..846252e9 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121201908772.png differ diff --git a/docs/troubleshooting/assets/20250430121202201523.png b/docs/troubleshooting/assets/20250430121202201523.png new file mode 100644 index 00000000..17fbd37d Binary files /dev/null and b/docs/troubleshooting/assets/20250430121202201523.png differ diff --git a/docs/troubleshooting/assets/20250430121202456192.png b/docs/troubleshooting/assets/20250430121202456192.png new file mode 100644 index 00000000..33431ae6 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121202456192.png differ diff --git a/docs/troubleshooting/assets/20250430121202663162.png b/docs/troubleshooting/assets/20250430121202663162.png new file mode 100644 index 00000000..21e16122 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121202663162.png differ diff --git a/docs/troubleshooting/assets/20250430121202861692.png b/docs/troubleshooting/assets/20250430121202861692.png new file mode 100644 index 00000000..bdeefbcf Binary files /dev/null and b/docs/troubleshooting/assets/20250430121202861692.png differ diff --git a/docs/troubleshooting/assets/20250430121204990541.png b/docs/troubleshooting/assets/20250430121204990541.png new file mode 100644 index 00000000..e812f488 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121204990541.png differ diff --git a/docs/troubleshooting/assets/20250430121205509269.png b/docs/troubleshooting/assets/20250430121205509269.png new file mode 100644 index 00000000..c99e3a90 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121205509269.png differ diff --git a/docs/troubleshooting/assets/20250430121205798445.png b/docs/troubleshooting/assets/20250430121205798445.png new file mode 100644 index 00000000..1250a9ab Binary files /dev/null and b/docs/troubleshooting/assets/20250430121205798445.png differ diff --git a/docs/troubleshooting/assets/20250430121206162085.png b/docs/troubleshooting/assets/20250430121206162085.png new file mode 100644 index 00000000..698bcf4c Binary files /dev/null and b/docs/troubleshooting/assets/20250430121206162085.png differ diff --git a/docs/troubleshooting/assets/20250430121206889627.png b/docs/troubleshooting/assets/20250430121206889627.png new file mode 100644 index 00000000..c30df027 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121206889627.png differ diff --git a/docs/troubleshooting/assets/20250430121207161508.png b/docs/troubleshooting/assets/20250430121207161508.png new file mode 100644 index 00000000..d450a48b Binary files /dev/null and b/docs/troubleshooting/assets/20250430121207161508.png differ diff --git a/docs/troubleshooting/assets/20250430121207438234.png b/docs/troubleshooting/assets/20250430121207438234.png new file mode 100644 index 00000000..1bb3a4c7 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121207438234.png differ diff --git a/docs/troubleshooting/assets/20250430121207744686.png b/docs/troubleshooting/assets/20250430121207744686.png new file mode 100644 index 00000000..366f1af2 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121207744686.png differ diff --git a/docs/troubleshooting/assets/20250430121208035279.png b/docs/troubleshooting/assets/20250430121208035279.png new file mode 100644 index 00000000..c99e3a90 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121208035279.png differ diff --git a/docs/troubleshooting/assets/20250430121208288087.png b/docs/troubleshooting/assets/20250430121208288087.png new file mode 100644 index 00000000..1250a9ab Binary files /dev/null and b/docs/troubleshooting/assets/20250430121208288087.png differ diff --git a/docs/troubleshooting/assets/20250430121208489158.png b/docs/troubleshooting/assets/20250430121208489158.png new file mode 100644 index 00000000..698bcf4c Binary files /dev/null and b/docs/troubleshooting/assets/20250430121208489158.png differ diff --git a/docs/troubleshooting/assets/20250430121208698400.png b/docs/troubleshooting/assets/20250430121208698400.png new file mode 100644 index 00000000..4e009b3f Binary files /dev/null and b/docs/troubleshooting/assets/20250430121208698400.png differ diff --git a/docs/troubleshooting/assets/20250430121208913054.png b/docs/troubleshooting/assets/20250430121208913054.png new file mode 100644 index 00000000..3b277163 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121208913054.png differ diff --git a/docs/troubleshooting/assets/20250430121217509964.png b/docs/troubleshooting/assets/20250430121217509964.png new file mode 100644 index 00000000..e25be4aa Binary files /dev/null and b/docs/troubleshooting/assets/20250430121217509964.png differ diff --git a/docs/troubleshooting/assets/20250430121221837885.png b/docs/troubleshooting/assets/20250430121221837885.png new file mode 100644 index 00000000..a034e997 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121221837885.png differ diff --git a/docs/troubleshooting/assets/20250430121222180988.png b/docs/troubleshooting/assets/20250430121222180988.png new file mode 100644 index 00000000..c68b1d71 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121222180988.png differ diff --git a/docs/troubleshooting/assets/20250430121222507402.png b/docs/troubleshooting/assets/20250430121222507402.png new file mode 100644 index 00000000..ed54747b Binary files /dev/null and b/docs/troubleshooting/assets/20250430121222507402.png differ diff --git a/docs/troubleshooting/assets/20250430121225466053.png b/docs/troubleshooting/assets/20250430121225466053.png new file mode 100644 index 00000000..1eb06dd7 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121225466053.png differ diff --git a/docs/troubleshooting/assets/20250430121225764598.png b/docs/troubleshooting/assets/20250430121225764598.png new file mode 100644 index 00000000..19fbaa50 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121225764598.png differ diff --git a/docs/troubleshooting/assets/20250430121226481647.png b/docs/troubleshooting/assets/20250430121226481647.png new file mode 100644 index 00000000..a225c27c Binary files /dev/null and b/docs/troubleshooting/assets/20250430121226481647.png differ diff --git a/docs/troubleshooting/assets/20250430121226777130.png b/docs/troubleshooting/assets/20250430121226777130.png new file mode 100644 index 00000000..0570f83e Binary files /dev/null and b/docs/troubleshooting/assets/20250430121226777130.png differ diff --git a/docs/troubleshooting/assets/20250430121227109718.png b/docs/troubleshooting/assets/20250430121227109718.png new file mode 100644 index 00000000..50d38f91 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121227109718.png differ diff --git a/docs/troubleshooting/assets/20250430121227744579.png b/docs/troubleshooting/assets/20250430121227744579.png new file mode 100644 index 00000000..c0805b1b Binary files /dev/null and b/docs/troubleshooting/assets/20250430121227744579.png differ diff --git a/docs/troubleshooting/assets/20250430121227989568.png b/docs/troubleshooting/assets/20250430121227989568.png new file mode 100644 index 00000000..d867215f Binary files /dev/null and b/docs/troubleshooting/assets/20250430121227989568.png differ diff --git a/docs/troubleshooting/assets/20250430121231440026.gif b/docs/troubleshooting/assets/20250430121231440026.gif new file mode 100644 index 00000000..f81963a6 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121231440026.gif differ diff --git a/docs/troubleshooting/assets/20250430121231812590.png b/docs/troubleshooting/assets/20250430121231812590.png new file mode 100644 index 00000000..80be986f Binary files /dev/null and b/docs/troubleshooting/assets/20250430121231812590.png differ diff --git a/docs/troubleshooting/assets/20250430121232082585.png b/docs/troubleshooting/assets/20250430121232082585.png new file mode 100644 index 00000000..8be0b2c4 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121232082585.png differ diff --git a/docs/troubleshooting/assets/20250430121232452872.png b/docs/troubleshooting/assets/20250430121232452872.png new file mode 100644 index 00000000..dd0d0dff Binary files /dev/null and b/docs/troubleshooting/assets/20250430121232452872.png differ diff --git a/docs/troubleshooting/assets/20250430121235746050.png b/docs/troubleshooting/assets/20250430121235746050.png new file mode 100644 index 00000000..a36f85d6 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121235746050.png differ diff --git a/docs/troubleshooting/assets/20250430121235981602.png b/docs/troubleshooting/assets/20250430121235981602.png new file mode 100644 index 00000000..4cad9ef1 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121235981602.png differ diff --git a/docs/troubleshooting/assets/20250430121236782215.png b/docs/troubleshooting/assets/20250430121236782215.png new file mode 100644 index 00000000..32687c0e Binary files /dev/null and b/docs/troubleshooting/assets/20250430121236782215.png differ diff --git a/docs/troubleshooting/assets/20250430121236976235.png b/docs/troubleshooting/assets/20250430121236976235.png new file mode 100644 index 00000000..c30f3a04 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121236976235.png differ diff --git a/docs/troubleshooting/assets/20250430121237764753.png b/docs/troubleshooting/assets/20250430121237764753.png new file mode 100644 index 00000000..d59a9b45 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121237764753.png differ diff --git a/docs/troubleshooting/assets/20250430121238081846.png b/docs/troubleshooting/assets/20250430121238081846.png new file mode 100644 index 00000000..fceb5cbb Binary files /dev/null and b/docs/troubleshooting/assets/20250430121238081846.png differ diff --git a/docs/troubleshooting/assets/20250430121238384085.png b/docs/troubleshooting/assets/20250430121238384085.png new file mode 100644 index 00000000..ce03d114 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121238384085.png differ diff --git a/docs/troubleshooting/assets/20250430121238656194.png b/docs/troubleshooting/assets/20250430121238656194.png new file mode 100644 index 00000000..8c5bda6c Binary files /dev/null and b/docs/troubleshooting/assets/20250430121238656194.png differ diff --git a/docs/troubleshooting/assets/20250430121245553425.png b/docs/troubleshooting/assets/20250430121245553425.png new file mode 100644 index 00000000..f044fb54 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121245553425.png differ diff --git a/docs/troubleshooting/assets/20250430121246143405.png b/docs/troubleshooting/assets/20250430121246143405.png new file mode 100644 index 00000000..491e241f Binary files /dev/null and b/docs/troubleshooting/assets/20250430121246143405.png differ diff --git a/docs/troubleshooting/assets/20250430121246510364.png b/docs/troubleshooting/assets/20250430121246510364.png new file mode 100644 index 00000000..f01af0c9 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121246510364.png differ diff --git a/docs/troubleshooting/assets/20250430121247111572.png b/docs/troubleshooting/assets/20250430121247111572.png new file mode 100644 index 00000000..301309a9 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121247111572.png differ diff --git a/docs/troubleshooting/assets/20250430121247467739.png b/docs/troubleshooting/assets/20250430121247467739.png new file mode 100644 index 00000000..6aad86bd Binary files /dev/null and b/docs/troubleshooting/assets/20250430121247467739.png differ diff --git a/docs/troubleshooting/assets/20250430121251986970.png b/docs/troubleshooting/assets/20250430121251986970.png new file mode 100644 index 00000000..30864a76 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121251986970.png differ diff --git a/docs/troubleshooting/assets/20250430121253789974.png b/docs/troubleshooting/assets/20250430121253789974.png new file mode 100644 index 00000000..79f871a9 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121253789974.png differ diff --git a/docs/troubleshooting/assets/20250430121254079048.png b/docs/troubleshooting/assets/20250430121254079048.png new file mode 100644 index 00000000..f4430bb8 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121254079048.png differ diff --git a/docs/troubleshooting/assets/20250430121254348087.png b/docs/troubleshooting/assets/20250430121254348087.png new file mode 100644 index 00000000..33addde8 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121254348087.png differ diff --git a/docs/troubleshooting/assets/20250430121254635672.png b/docs/troubleshooting/assets/20250430121254635672.png new file mode 100644 index 00000000..72119b34 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121254635672.png differ diff --git a/docs/troubleshooting/assets/20250430121255479960.png b/docs/troubleshooting/assets/20250430121255479960.png new file mode 100644 index 00000000..07f50a54 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121255479960.png differ diff --git a/docs/troubleshooting/assets/20250430121255810538.png b/docs/troubleshooting/assets/20250430121255810538.png new file mode 100644 index 00000000..a6f68163 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121255810538.png differ diff --git a/docs/troubleshooting/assets/20250430121256121119.png b/docs/troubleshooting/assets/20250430121256121119.png new file mode 100644 index 00000000..833c44ab Binary files /dev/null and b/docs/troubleshooting/assets/20250430121256121119.png differ diff --git a/docs/troubleshooting/assets/20250430121258715184.png b/docs/troubleshooting/assets/20250430121258715184.png new file mode 100644 index 00000000..6e4c9c09 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121258715184.png differ diff --git a/docs/troubleshooting/assets/20250430121259325933.png b/docs/troubleshooting/assets/20250430121259325933.png new file mode 100644 index 00000000..6a4d74de Binary files /dev/null and b/docs/troubleshooting/assets/20250430121259325933.png differ diff --git a/docs/troubleshooting/assets/20250430121301671136.png b/docs/troubleshooting/assets/20250430121301671136.png new file mode 100644 index 00000000..3ec4717f Binary files /dev/null and b/docs/troubleshooting/assets/20250430121301671136.png differ diff --git a/docs/troubleshooting/assets/20250430121302032059.png b/docs/troubleshooting/assets/20250430121302032059.png new file mode 100644 index 00000000..ef043508 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121302032059.png differ diff --git a/docs/troubleshooting/assets/20250430121302300256.png b/docs/troubleshooting/assets/20250430121302300256.png new file mode 100644 index 00000000..b97968ba Binary files /dev/null and b/docs/troubleshooting/assets/20250430121302300256.png differ diff --git a/docs/troubleshooting/assets/20250430121307457486.png b/docs/troubleshooting/assets/20250430121307457486.png new file mode 100644 index 00000000..33d22429 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121307457486.png differ diff --git a/docs/troubleshooting/assets/20250430121311458158.png b/docs/troubleshooting/assets/20250430121311458158.png new file mode 100644 index 00000000..4727fc17 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121311458158.png differ diff --git a/docs/troubleshooting/assets/20250430121311730523.png b/docs/troubleshooting/assets/20250430121311730523.png new file mode 100644 index 00000000..71d10043 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121311730523.png differ diff --git a/docs/troubleshooting/assets/20250430121312243075.png b/docs/troubleshooting/assets/20250430121312243075.png new file mode 100644 index 00000000..8aeb224c Binary files /dev/null and b/docs/troubleshooting/assets/20250430121312243075.png differ diff --git a/docs/troubleshooting/assets/20250430121312626400.png b/docs/troubleshooting/assets/20250430121312626400.png new file mode 100644 index 00000000..42d102d9 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121312626400.png differ diff --git a/docs/troubleshooting/assets/20250430121312919242.png b/docs/troubleshooting/assets/20250430121312919242.png new file mode 100644 index 00000000..c64a8ce1 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121312919242.png differ diff --git a/docs/troubleshooting/assets/20250430121313117339.png b/docs/troubleshooting/assets/20250430121313117339.png new file mode 100644 index 00000000..4340eaa8 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121313117339.png differ diff --git a/docs/troubleshooting/assets/20250430121313453827.png b/docs/troubleshooting/assets/20250430121313453827.png new file mode 100644 index 00000000..9bf36d3c Binary files /dev/null and b/docs/troubleshooting/assets/20250430121313453827.png differ diff --git a/docs/troubleshooting/assets/20250430121321604645.png b/docs/troubleshooting/assets/20250430121321604645.png new file mode 100644 index 00000000..96ed5002 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121321604645.png differ diff --git a/docs/troubleshooting/assets/20250430121321961623.png b/docs/troubleshooting/assets/20250430121321961623.png new file mode 100644 index 00000000..901ec07e Binary files /dev/null and b/docs/troubleshooting/assets/20250430121321961623.png differ diff --git a/docs/troubleshooting/assets/20250430121329008679.png b/docs/troubleshooting/assets/20250430121329008679.png new file mode 100644 index 00000000..77f0bc5e Binary files /dev/null and b/docs/troubleshooting/assets/20250430121329008679.png differ diff --git a/docs/troubleshooting/assets/20250430121329460301.png b/docs/troubleshooting/assets/20250430121329460301.png new file mode 100644 index 00000000..ec470a63 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121329460301.png differ diff --git a/docs/troubleshooting/assets/20250430121337121891.png b/docs/troubleshooting/assets/20250430121337121891.png new file mode 100644 index 00000000..fdc22c90 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121337121891.png differ diff --git a/docs/troubleshooting/assets/20250430121337385659.png b/docs/troubleshooting/assets/20250430121337385659.png new file mode 100644 index 00000000..e398da96 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121337385659.png differ diff --git a/docs/troubleshooting/assets/20250430121344371643.png b/docs/troubleshooting/assets/20250430121344371643.png new file mode 100644 index 00000000..32687c0e Binary files /dev/null and b/docs/troubleshooting/assets/20250430121344371643.png differ diff --git a/docs/troubleshooting/assets/20250430121344599814.png b/docs/troubleshooting/assets/20250430121344599814.png new file mode 100644 index 00000000..54eb82ea Binary files /dev/null and b/docs/troubleshooting/assets/20250430121344599814.png differ diff --git a/docs/troubleshooting/assets/20250430121344826995.png b/docs/troubleshooting/assets/20250430121344826995.png new file mode 100644 index 00000000..6a2ae44e Binary files /dev/null and b/docs/troubleshooting/assets/20250430121344826995.png differ diff --git a/docs/troubleshooting/assets/20250430121345698106.png b/docs/troubleshooting/assets/20250430121345698106.png new file mode 100644 index 00000000..32687c0e Binary files /dev/null and b/docs/troubleshooting/assets/20250430121345698106.png differ diff --git a/docs/troubleshooting/assets/20250430121345966687.png b/docs/troubleshooting/assets/20250430121345966687.png new file mode 100644 index 00000000..175639d8 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121345966687.png differ diff --git a/docs/troubleshooting/assets/20250430121353111041.png b/docs/troubleshooting/assets/20250430121353111041.png new file mode 100644 index 00000000..48705827 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121353111041.png differ diff --git a/docs/troubleshooting/assets/20250430121353323352.png b/docs/troubleshooting/assets/20250430121353323352.png new file mode 100644 index 00000000..b38450fc Binary files /dev/null and b/docs/troubleshooting/assets/20250430121353323352.png differ diff --git a/docs/troubleshooting/assets/20250430121353635504.png b/docs/troubleshooting/assets/20250430121353635504.png new file mode 100644 index 00000000..58555b33 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121353635504.png differ diff --git a/docs/troubleshooting/assets/20250430121353926967.gif b/docs/troubleshooting/assets/20250430121353926967.gif new file mode 100644 index 00000000..5c1cacd2 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121353926967.gif differ diff --git a/docs/troubleshooting/assets/20250430121356207178.png b/docs/troubleshooting/assets/20250430121356207178.png new file mode 100644 index 00000000..7437af2e Binary files /dev/null and b/docs/troubleshooting/assets/20250430121356207178.png differ diff --git a/docs/troubleshooting/assets/20250430121356535681.png b/docs/troubleshooting/assets/20250430121356535681.png new file mode 100644 index 00000000..f131dd9f Binary files /dev/null and b/docs/troubleshooting/assets/20250430121356535681.png differ diff --git a/docs/troubleshooting/assets/20250430121358370953.png b/docs/troubleshooting/assets/20250430121358370953.png new file mode 100644 index 00000000..df574029 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121358370953.png differ diff --git a/docs/troubleshooting/assets/20250430121404176944.png b/docs/troubleshooting/assets/20250430121404176944.png new file mode 100644 index 00000000..77f0bc5e Binary files /dev/null and b/docs/troubleshooting/assets/20250430121404176944.png differ diff --git a/docs/troubleshooting/assets/20250430121404592193.png b/docs/troubleshooting/assets/20250430121404592193.png new file mode 100644 index 00000000..ec470a63 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121404592193.png differ diff --git a/docs/troubleshooting/assets/20250430121454943811.png b/docs/troubleshooting/assets/20250430121454943811.png new file mode 100644 index 00000000..6a4d74de Binary files /dev/null and b/docs/troubleshooting/assets/20250430121454943811.png differ diff --git a/docs/troubleshooting/assets/20250430121455245967.png b/docs/troubleshooting/assets/20250430121455245967.png new file mode 100644 index 00000000..e533d93f Binary files /dev/null and b/docs/troubleshooting/assets/20250430121455245967.png differ diff --git a/docs/troubleshooting/assets/20250430121520677214.gif b/docs/troubleshooting/assets/20250430121520677214.gif new file mode 100644 index 00000000..bfcc8f80 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121520677214.gif differ diff --git a/docs/troubleshooting/assets/20250430121520979751.gif b/docs/troubleshooting/assets/20250430121520979751.gif new file mode 100644 index 00000000..0119c719 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121520979751.gif differ diff --git a/docs/troubleshooting/assets/20250430121527145863.png b/docs/troubleshooting/assets/20250430121527145863.png new file mode 100644 index 00000000..f1f7f9b0 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121527145863.png differ diff --git a/docs/troubleshooting/assets/20250430121527462964.png b/docs/troubleshooting/assets/20250430121527462964.png new file mode 100644 index 00000000..95091b12 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121527462964.png differ diff --git a/docs/troubleshooting/authentication/enable_google_signin_test_web.md b/docs/troubleshooting/authentication/enable_google_signin_test_web.md new file mode 100644 index 00000000..0d4cd589 --- /dev/null +++ b/docs/troubleshooting/authentication/enable_google_signin_test_web.md @@ -0,0 +1,48 @@ +--- +keywords: ['google', 'login', 'authentication', 'web'] +slug: troubleshooting/authentication/enable-google-signin-test-web +title: Enable Google Sign-In on Web and Test Mode +--- + +# Enable Google Sign-In on Web and Test Mode + +To successfully use social authentication features like **Google Sign-In**, **Facebook**, or **Microsoft login** during **Run/Test mode** or in your **published web application**, you must first authorize the domain used in your Firebase project's Authentication settings. + +:::info[Prerequisites] +- A Firebase project linked to your FlutterFlow app. +- Access to the Firebase Console with editor or owner permissions. +::: + +Follow the steps below to authorize your domain in Firebase: + +1. **Open Your Firebase Project** + - Navigate to the **[Firebase Console](https://console.firebase.google.com)**. + - Select your project. + +2. **Access the Authentication Settings** + - Go to **Authentication > Settings**. + - Click on the **Authorized Domains** section. + +3. **Add Your Domain** + - Click the **Add Domain** button. + - Enter the domain you want to authorize. + + :::tip + For FlutterFlow builds in **Run mode**, add: + `app.flutterflow.io` + + For deployed apps using the default domain, add: + `yourapp.flutterflow.app` + ::: + + ![](../assets/20250430121259325933.png) + +:::note +- Firebase blocks authentication from unauthorized domains as a security measure. +- If your app uses multiple environments (e.g., staging and production), be sure to add all relevant domains. +::: + +:::info[Additional Resources] +- [FlutterFlow Firebase Integration Guide](/integrations/firebase/overview) +- [Firebase Authentication Docs](https://firebase.google.com/docs/auth) +::: diff --git a/docs/troubleshooting/authentication/fix_auth_apk_sha1_error.md b/docs/troubleshooting/authentication/fix_auth_apk_sha1_error.md new file mode 100644 index 00000000..097c130f --- /dev/null +++ b/docs/troubleshooting/authentication/fix_auth_apk_sha1_error.md @@ -0,0 +1,48 @@ +--- +keywords: ['authentication', 'firebase', 'sha1', 'apk', 'real device'] +slug: troubleshooting/authentication/fix-auth-apk-sha1-error +title: Fix Google or Phone Authentication on Real Devices (SHA Key Issue) +--- + +# Fix Google or Phone Authentication on Real Devices (SHA Key Issue) + +When testing APKs downloaded from FlutterFlow, you may encounter issues with Google sign-in or phone authentication failing on real Android devices. This is often caused by missing **SHA-1** and **SHA-256** keys in your Firebase configuration. + +This guide explains how to manually generate and add the required keys to Firebase to resolve the issue. + +When downloading an APK from FlutterFlow’s **Source Code** menu for testing purposes, the associated SHA keys may not be auto-generated. + +Firebase uses these keys to authenticate users with services like **Google Sign-In** or **Phone Number Authentication**. If they are missing, authentication will fail during testing or production use. + +:::info[Prerequisites] +- Ensure you have already connected your FlutterFlow project to Firebase. +- You must have downloaded the APK from FlutterFlow’s **Source Code** tab. +::: + + +Follow the steps below to resolve the error: + +1. **Download the APK** + - In FlutterFlow, go to the **Source Code** tab. + - Select your project and download the APK to your local machine. + +2. **Generate SHA-1 and SHA-256 Keys** + + - Open a terminal or command prompt. + - Navigate to the directory where the APK is saved. + - Run the following command to extract SHA keys: + + ```bash + keytool -printcert -jarfile app.apk + ``` + + This will output both the SHA-1 and SHA-256 fingerprint values. + +3. **Add Keys to Firebase** + - Go to the Firebase Console. + - Select your project. + - Click the gear icon > Project settings. + - Under Your Apps, select your Android app. + - Add the SHA-1 and SHA-256 keys in the respective fields. + + Without the correct SHA keys, Firebase Authentication (Google, Phone) will not work on real Android devices. \ No newline at end of file diff --git a/docs/troubleshooting/authentication/fix_firebase_email_sign_in_error.md b/docs/troubleshooting/authentication/fix_firebase_email_sign_in_error.md new file mode 100644 index 00000000..d927fdc4 --- /dev/null +++ b/docs/troubleshooting/authentication/fix_firebase_email_sign_in_error.md @@ -0,0 +1,41 @@ +--- +keywords: ['firebase', 'email authentication', 'sign-in', 'flutterflow', 'error'] +slug: troubleshooting/authentication/fix-firebase-email-sign-in-error +title: Fix Firebase Sign-In Error for Email/Password Configuration +--- + +# Fix Firebase Sign-In Error for Email/Password Configuration + +When connecting your Firebase project to FlutterFlow, you may encounter the following error: + + ```text + Could not sign in as `firebase@flutterflow.io` to your Firebase project. Make sure "Email Sign-In" is turned on for your Firebase project, and try again. + ``` + + This issue typically occurs when the **Email/Password authentication method** has not been enabled in your Firebase project or if the FlutterFlow service account does not have the required permissions. + +:::info[Prerequisites] +- A connected Firebase project. +- Access to the Firebase Console with editor or owner privileges. +::: + + +Follow the steps to resolve the error: +1. **Enable Email/Password Authentication** + - Open the **[Firebase Console](https://console.firebase.google.com)** and select your project. + - Navigate to **Authentication > Sign-in Method**. + - Locate **Email/Password** and ensure it is **enabled**. + +2. **Verify Service Account Permissions** + - Go to the **IAM & Admin** section in Firebase (or Google Cloud Console). + - Ensure the `firebase@flutterflow.io` service account has at least the **Editor** role assigned. + - If it’s not listed, you can manually add the email and assign permissions. + +:::tip +Even if your app doesn’t use Email/Password authentication, FlutterFlow may use it during project setup or test runs. It’s recommended to enable this method during development. +::: + +:::info[Additional Resources] +- [Firebase Authentication Overview](https://firebase.google.com/docs/auth) +- [FlutterFlow Firebase Integration Guide](/integrations/firebase/overview) +::: \ No newline at end of file diff --git a/docs/troubleshooting/authentication/fix_google_sign_in_web.md b/docs/troubleshooting/authentication/fix_google_sign_in_web.md new file mode 100644 index 00000000..2d932925 --- /dev/null +++ b/docs/troubleshooting/authentication/fix_google_sign_in_web.md @@ -0,0 +1,51 @@ +--- +keywords: ['google sign-in', 'authentication', 'firebase', 'run mode', 'test mode'] +slug: troubleshooting/authentication/fix-google-sign-in-web +title: Fix Google Sign-In for Run/Test Mode and Web Deployment +--- + +# Fix Google Sign-In for Run/Test Mode and Web Deployment + +Google Sign-In and other social authentication methods may not work in **Run/Test mode** or on your **published web app** unless your domain is correctly configured in Firebase. + +This is due to Firebase requiring **authorized domains** for security when handling OAuth sign-ins. + +:::info[Prerequisites] +- You must have a Firebase project connected to your FlutterFlow app. +- Social authentication (e.g., Google, Facebook, Microsoft) must already be set up. +::: + +Follow the steps below to add authorized domains in Firebase + +1. Open your [Firebase Console](https://console.firebase.google.com) and select your project. +2. Navigate to **Authentication > Settings**. +3. Click **Authorized Domains**. +4. Click **Add Domain** and enter your app's domain. Add one or more of the following as needed: + + - For **Run Mode**: + + ```text + app.flutterflow.io + ``` + + - For a **Published Web App**: + ```text + yourapp.flutterflow.app + ``` + + - For **Test Mode Debug Sessions**: + Copy the domain from the "Known Issues" section in FlutterFlow or from the browser URL during test runs. + + ![](../assets/20250430121454943811.png) + + ![](../assets/20250430121455245967.png) + +:::tip +If you are testing social login in Run/Test mode and it fails, it's likely because the test environment's domain is not added to your Firebase authorized domains. +::: + +:::info [Additional Resources] +- [Set Up Google Authentication](/authentication/firebase/google-auth) +- [FlutterFlow Firebase Integration](/integrations/firebase/overview) +- [Known Limitations When Testing Web Apps](/testing/web-app-limitations) +::: diff --git a/docs/troubleshooting/authentication/fix_sms_code_verification.md b/docs/troubleshooting/authentication/fix_sms_code_verification.md new file mode 100644 index 00000000..4c93e77b --- /dev/null +++ b/docs/troubleshooting/authentication/fix_sms_code_verification.md @@ -0,0 +1,51 @@ +--- +keywords: ['sms', 'verification', 'text field'] +slug: troubleshooting/authentication/fix-sms-code-verification +title: Fix SMS Code Verification Errors +--- + +# Fix SMS Code Verification Errors + +During the SMS verification process, you may encounter the following error: + + ```text + SMS code field must be provided when verifying SMS code + ``` + +This article explains the reason behind this issue and how to resolve it by reviewing the widget configuration. + +This error typically occurs when the **TextField widget name** used for inputting the SMS code does not match the expected field in the **Verify SMS Code** action. + +This situation is common when duplicating pages or widgets, as the new instance may retain a different name. + +:::info[Prerequisites] +Ensure you have already set up Firebase Authentication and added the necessary phone authentication flows to your app. +::: + +Follow the steps below to resolve the issue: + +1. **Locate the SMS Input Field** + + - Open the page where the user is expected to enter the SMS verification code. + - Select the **TextField** widget used for the input. + +2. **Check the Widget Name** + + - In the widget properties panel, verify that the name is set to something meaningful like `smsCode`. + +3. **Rename if Necessary** + + - If the name does not match what is referenced in your Verify SMS Code action, rename it accordingly (e.g., `smsCode`). + +4. **Test the Verification Flow** + + - Save your changes and run the app to confirm that the error no longer appears. + + :::warning + If the field name used in the Verify SMS Code action does not match the TextField widget name exactly, the verification process will fail. This includes case sensitivity. + ::: + +:::info[Additional Resources] +- [Firebase Phone Authentication Setup](/authentication/firebase/phone-auth) +- [Managing Widget Names in FlutterFlow](/building-concepts/naming-widgets) +::: diff --git a/docs/troubleshooting/backend/fix_backend_query_no_results.md b/docs/troubleshooting/backend/fix_backend_query_no_results.md new file mode 100644 index 00000000..a3a82895 --- /dev/null +++ b/docs/troubleshooting/backend/fix_backend_query_no_results.md @@ -0,0 +1,85 @@ +--- +keywords: ['database', 'query', 'firestore', 'empty'] +slug: troubleshooting/backend/fix-backend-query-no-results +title: Fix Backend Query Not Returning Results +--- + +# Fix Backend Query Not Returning Results + +If your backend query is not returning data from Firestore even though your database contains records, there may be configuration issues in your Firestore setup or query configuration. + +--- + +:::info[Prerequisites] +- A connected Firestore database with records present. +- Backend query configured in FlutterFlow. +::: + +--- + +## Common Causes and Fixes + +### 1. Firestore Rules Not Deployed for the Collection + +When creating a new collection, rules for that collection must be defined and deployed. If not, Firebase will block read access. + +**Fix:** +- Open the **Firestore Rules** section in FlutterFlow or the Firebase Console. +- Define rules for the collection. +- Deploy the updated rules. + +![](../assets/20250430121237764753.png) + +--- + +### 2. Ignore Empty Filter Values Option with Missing Data + +If the **Ignore Empty Filter Values** option is enabled, documents missing the specified filter field or having a `null` value will be excluded from results. + +**Fix:** +- Check your query filters for this setting. +- Ensure all documents in the collection have valid values for the filtered field (e.g., `created_time`). + +![](../assets/20250430121238081846.png) + +--- + +### 3. Order By Field Is Null or Missing + +If you're using a field for ordering (e.g., `signinDate`), and that field is missing or `null` in some documents, those documents will be ignored. + +**Examples:** +- If **no** documents are returned: the field likely doesn't exist in any document. +- If **some** documents are returned: only those with a valid value for the field are included. + +**Fix:** +- Ensure the field used for ordering exists and is non-null in every document. + +![](../assets/20250430121238384085.png) + +--- + +### 4. API Returns No Results in Deployed Web App + +If an API works in **Test Mode** but fails in the **deployed web app**, it's likely due to **CORS restrictions**. + +**Fix:** +- Open the browser’s developer console. +- Look for any **CORS-related errors**. +- If found, update your server configuration or use a proxy. + +![](../assets/20250430121238656194.png) + +--- + +:::warning +If none of the steps above resolve the issue, reach out to FlutterFlow support via the in-app chat or email: **support@flutterflow.io** +::: + +--- + +## Related Resources + +- [Connect Firebase to FlutterFlow](/integrations/firebase/connect) +- [Firestore Query Filters](/database/firestore/querying-data) +- [Understanding Firestore Rules](https://firebase.google.com/docs/firestore/security/get-started) diff --git a/docs/troubleshooting/backend/fix_firebase_package_name_mismatch.md b/docs/troubleshooting/backend/fix_firebase_package_name_mismatch.md new file mode 100644 index 00000000..87e2a4b1 --- /dev/null +++ b/docs/troubleshooting/backend/fix_firebase_package_name_mismatch.md @@ -0,0 +1,42 @@ +--- +keywords: ['firebase', 'android', 'package'] +slug: troubleshooting/backend/fix-firebase-package-name-mismatch +title: Fix Firebase Config Package Name Mismatch +--- + +# Fix Firebase Config Package Name Mismatch + +This error occurs when the package name defined in FlutterFlow does not match the one used in your Firebase Android configuration. This often happens after changing the app’s package name in FlutterFlow without updating the associated Firebase configuration. + +:::tip +Ensure that the package name matches **exactly** between FlutterFlow and Firebase — including capitalization and punctuation. +::: + +:::info[Prerequisites] +Your Firebase project must already be integrated with your FlutterFlow project. +::: + +## Update Firebase Configuration Files + +Follow these steps to resolve the mismatch: + +1. Open your project in **FlutterFlow**. +2. Navigate to **Settings > Firebase**. + + ![](../assets/20250430121404176944.png) + +3. Click the **Regenerate Config Files** button. +4. Enter the updated package name. +5. Click **Generate File** to create the new configuration. + + ![](../assets/20250430121404592193.png) + +## Notes + +:::warning +Using mismatched package names between FlutterFlow and Firebase will prevent proper Firebase integration, including services like authentication and storage. +::: + +## Resources + +- **[Firebase Project Setup Guide](https://firebase.google.com/docs/android/setup)** diff --git a/docs/troubleshooting/backend/fix_image_upload_failure.md b/docs/troubleshooting/backend/fix_image_upload_failure.md new file mode 100644 index 00000000..c49da182 --- /dev/null +++ b/docs/troubleshooting/backend/fix_image_upload_failure.md @@ -0,0 +1,50 @@ +--- +keywords: ['storage', 'upload', 'image'] +slug: troubleshooting/backend/fix-image-upload-failure +title: Fix Image Upload Failure from Action +--- + +# Fix Image Upload Failure from Action + +If image uploads are failing in your app when using the **Image Upload** action, the issue is likely due to a misconfigured Firebase Storage rule. + +Firebase requires authenticated access rules to allow uploading images. This guide walks through updating those rules to resolve the issue. + +:::info[Prerequisites] +- You must have already connected your FlutterFlow project to Firebase. +- Firebase Storage must be enabled in your Firebase Console. +::: + +Follow the steps below to fix the image upload issue: + +1. **Open Firebase Storage Rules** + + - Go to the **[Firebase Console](https://console.firebase.google.com)**. + - Select your project and open the **Storage** section. + - Click the **Rules** tab at the top. + + ![](../assets/20250430121520677214.gif) + +2. **Update Storage Rules** + + - Replace the existing rules with the configuration below: + + ```js + rules_version = '2'; + service firebase.storage { + match /b/{bucket}/o { + match /{allPaths=**} { + allow read, write: if request.auth != null; + } + } + } + ``` + + ![](../assets/20250430121520979751.gif) + + - Click Publish to save the changes. + +3. **Re-upload Previous Media (Optional)** + If you had previously uploaded media before fixing the rules, re-uploading them may resolve lingering upload issues. + + Make sure the rule change above does not conflict with your app's privacy or security requirements. Only allow `request.auth != null` if authenticated users should have upload access. \ No newline at end of file diff --git a/docs/troubleshooting/backend/fix_photo_upload_to_content_manager.md b/docs/troubleshooting/backend/fix_photo_upload_to_content_manager.md new file mode 100644 index 00000000..9db93d04 --- /dev/null +++ b/docs/troubleshooting/backend/fix_photo_upload_to_content_manager.md @@ -0,0 +1,41 @@ +--- +keywords: ['content', 'upload', 'photo'] +slug: troubleshooting/backend/fix-photo-upload-to-content-manager +title: Fix Photo Upload to Content Manager +--- + +# Fix Photo Upload to Content Manager + +By default, uploading images to the Content Manager is blocked due to restrictive Firebase Storage rules. You will need to update your Firebase Storage security rules to allow authenticated access. + +:::info[Prerequisites] +Ensure you have set up Firebase integration for your FlutterFlow project. +::: + +Follow these steps to enable image uploads: + +1. Open your FlutterFlow project. +2. Navigate to **Settings & Integrations > Firebase**, then click **Open Firebase Console**. + + ![](../assets/20250430121356207178.png) + +3. In the Firebase Console, go to **Storage > Rules**. + + ![](../assets/20250430121356535681.png) + +4. Replace the existing rules with the following code: + + ```js + rules_version = '2'; + service firebase.storage { + match /b/{bucket}/o { + match /{allPaths=**} { + allow read, write: if request.auth != null; + } + } + } + + ``` + +5. Click Publish to apply the changes. +Review your Firebase Storage rules carefully before deploying your app. Incorrect rules can expose your data to unauthorized access. \ No newline at end of file diff --git a/docs/troubleshooting/backend/send_notifications_to_user_groups.md b/docs/troubleshooting/backend/send_notifications_to_user_groups.md new file mode 100644 index 00000000..256b947f --- /dev/null +++ b/docs/troubleshooting/backend/send_notifications_to_user_groups.md @@ -0,0 +1,61 @@ +--- +keywords: ['firebase', 'users', 'group'] +slug: troubleshooting/backend/send-notifications-to-user-groups +title: Send Notifications to Specific User Groups +--- + +# Send Notifications to Specific User Groups + +This guide explains how to send push notifications to a specific group of users in your FlutterFlow project based on an attribute such as `isPremium`. This is useful when you want to automatically notify a user segment whenever a new document (e.g., a post) is created. + +You can review the full working example in this **[sample FlutterFlow project](https://app.flutterflow.io/project/auto-notification-2bm5hz)**. + +:::info[Prerequisites] +- Your project must be connected to Firebase. +- Push notifications must be enabled and deployed. +- The project must be on the **Blaze** plan. +- The `firebase@flutterflow.io` service account must have proper permissions. +::: + +**Configure the Project:** + +1. Ensure Firebase is set up correctly in your FlutterFlow project. + → **See**: **[Firebase Integration Guide](/integrations/firebase/overview)** + +2. Make sure push notifications are enabled and deployed from **Settings > Notifications**. + +3. Add a user attribute (e.g., `isPremium`) in your **users** collection to filter recipients. + +## Create the Notification Workflow + +1. Select the **Submit** button or trigger event. +2. Add a **Backend Query** action: + - **Query Type**: `Query Collection` + - **Collection**: `users` + - **Query Mode**: `List of Documents` + +3. Add a **Create Document** action to create the post or data entry. + +4. Add a **Trigger Notification** action: + - Set the notification `title`, `message`, and `initial page`. + +5. In the **Recipient** section: + - Click `unset` to select the recipient source. + - Choose **User Document**. + - Select **Filter List Items**. + + :::note + To filter a specific group, such as premium users, ensure the users collection includes a boolean attribute like `isPremium`. + ::: + +6. In the filter condition popup: + - Select **Items in list** + - Set **Document Property** to `isPremium` + - Choose **is equal to** → `True` + +7. Click **Confirm** to save the condition. +8. Back in the recipient popup, select **Map List Items**. +9. Click `unset`, then select **Reference** under Document Properties. +10. Click **Confirm** in all dialogs to complete the action chain. + +The notification will be automatically triggered whenever a new document is created, and it will be sent only to users that match the filter condition. diff --git a/docs/troubleshooting/backend/share_media_files_across_users.md b/docs/troubleshooting/backend/share_media_files_across_users.md new file mode 100644 index 00000000..500e3eee --- /dev/null +++ b/docs/troubleshooting/backend/share_media_files_across_users.md @@ -0,0 +1,47 @@ +--- +keywords: ['storage', 'users', 'upload'] +slug: troubleshooting/backend/share-media-files-across-users +title: Share Media Files Across Users Using Firebase Storage +--- + +# Share Media Files Across Users Using Firebase Storage + +When one user uploads an image or file to Firebase Storage, you may want other users to be able to access the same file using shared parameters. By default, Firebase Storage applies CORS (Cross-Origin Resource Sharing) policies that may prevent files from being visible across users. + +This guide shows how to update your Firebase Storage CORS settings to allow all users to access shared files. + +:::info[Prerequisites] +- Your FlutterFlow project must be integrated with Firebase. +- You must have access to the **Google Cloud SDK** and the `gsutil` CLI tool. +::: + +## Update Firebase Storage CORS Policy + +1. Install `gsutil` by following the official guide from Google: + - **[Install gsutil](https://cloud.google.com/storage/docs/gsutil_install)** + +2. Create a file named `cors.json` in your project directory with the following content: + + ```json + [ + { + "origin": ["*"], + "method": ["GET"], + "maxAgeSeconds": 3600 + } + ] + ``` + +3. Run the following command in your terminal to apply the new CORS settings: + + ```js + gsutil cors set cors.json gs://your-project-id.appspot.com + ``` + + Replace `your-project-id` with your actual Firebase project ID. + + Using `"origin": ["*"]` allows public access to your storage. For improved security, consider specifying only the domains used by your app. + + +After applying these changes, media or file uploads by one user will be accessible to all users using the same reference path in Firebase Storage. + diff --git a/docs/troubleshooting/cloud-functions/fix_cms_access_error_firebase_account.md b/docs/troubleshooting/cloud-functions/fix_cms_access_error_firebase_account.md new file mode 100644 index 00000000..47a4dcdd --- /dev/null +++ b/docs/troubleshooting/cloud-functions/fix_cms_access_error_firebase_account.md @@ -0,0 +1,33 @@ +--- +keywords: ['firebase', 'error', 'content'] +slug: troubleshooting/cloud-functions/fix-cms-access-error-firebase-account +title: Fix CMS Access Error with firebase@flutterflow.io Account +--- + +# Fix CMS Access Error with firebase@flutterflow.io Account + +This error occurs when the `firebase@flutterflow.io` service account cannot access your Firebase project through the CMS. This typically happens when multiple FlutterFlow projects are connected to the same Firebase project, resulting in authentication conflicts. + +:::info[Prerequisites] +- Your FlutterFlow project must be integrated with Firebase. +- You should have access to Firebase Console and Authentication settings. +::: + +Follow the steps below to resolve the error: + +1. Open your **Firebase Console** and navigate to **Authentication > Users**. + + ![](../assets/20250430121311458158.png) + +2. In the user list, search for the service account email: + `firebase@flutterflow.io` + + ![](../assets/20250430121311730523.png) + +3. Select the account and remove it from the authentication table. + +4. Return to **CMS** in FlutterFlow and refresh the page. + +:::note +This issue can occur when multiple FlutterFlow projects are connected to the same Firebase database. Each project attempts to manage content through the `firebase@flutterflow.io` service account, which can lead to permission conflicts. Remov +::: diff --git a/docs/troubleshooting/cloud-functions/grant_cloud_functions_admin_role.md b/docs/troubleshooting/cloud-functions/grant_cloud_functions_admin_role.md new file mode 100644 index 00000000..86789227 --- /dev/null +++ b/docs/troubleshooting/cloud-functions/grant_cloud_functions_admin_role.md @@ -0,0 +1,46 @@ +--- +keywords: ['firebase', 'cloud', 'console'] +slug: troubleshooting/cloud-functions/grant-cloud-functions-admin-role +title: Grant Cloud Functions Admin Role in Firebase +--- + +# Grant Cloud Functions Admin Role in Firebase + +To enable FlutterFlow features like Push Notifications, you must assign the `Cloud Functions Admin` role to the `firebase@flutterflow.io` service account. This requires your Firebase project to be on the **Blaze plan**. + +:::warning +Cloud Functions permissions are only available on the Firebase Blaze plan. You will not be able to grant admin access without upgrading your plan. +::: + +:::info[Prerequisites] +- Access to your Firebase Console. +- A billing-enabled Firebase project on the Blaze plan. +::: + +**Enable the Blaze Plan** + +Follow these steps to activate the Blaze plan: + +1. Open your Firebase Console and select your project. +2. Click the **Settings** gear icon in the left panel. +3. Select **Usage and Billing**. + + ![](../assets/20250430121301671136.png) + +4. In the **Details and Settings** tab, confirm that your project is linked to a billing account and has the Blaze plan enabled. + + ![](../assets/20250430121302032059.png) + +## Assign the Cloud Functions Admin Role + +After confirming that your project is on the Blaze plan: + +1. Go to the **IAM** section in the **[Google Cloud Console](https://console.cloud.google.com/iam-admin/iam)**. +2. Click **Grant Access**. +3. Enter the email: `firebase@flutterflow.io` +4. In the role selector, search for and select **Cloud Functions Admin**. +5. Save your changes. + + ![](../assets/20250430121302300256.png) + + Once assigned, FlutterFlow will be able to deploy and manage backend functions for your project. diff --git a/docs/troubleshooting/custom-actions/convert_device_location_to_address.md b/docs/troubleshooting/custom-actions/convert_device_location_to_address.md new file mode 100644 index 00000000..dc012e47 --- /dev/null +++ b/docs/troubleshooting/custom-actions/convert_device_location_to_address.md @@ -0,0 +1,106 @@ +--- +keywords: ['device', 'address', 'current'] +slug: troubleshooting/custom-actions/convert-device-location-to-address +title: Convert Device Location to Address in FlutterFlow +--- + +# Convert Device Location to Address in FlutterFlow + +This guide explains how to convert a user's device location (latitude and longitude) into a readable address (such as city or street name) in FlutterFlow. You can do this using either the **Google Maps Geocoding API** or the **`geocoding` Dart package** via a custom action. + +Explore a live example in this **[FlutterFlow sample project](https://app.flutterflow.io/project/geo-track-rvndye)**. + +:::info[Prerequisites] +- Your project must have location permissions enabled. +- If using the Google Maps API, you must enable the **Geocoding API** in your Google Cloud project and generate an API key. +- If using a custom action with the `geocoding` Dart package, make sure custom code is enabled. +::: + +**Option 1: Using the Google Maps API** + + 1. **Enable the Geocoding API** + + 1. Go to the [Google Cloud Console](https://console.cloud.google.com/). + 2. Select your project. + 3. Search for and enable the **Geocoding API**. + + ![](../assets/20250430121231440026.gif) + + 2. **Add API Key to App State** + + 1. Go to **App State > Local State** in FlutterFlow. + 2. Add a new variable: + - `apiKey` → Type: `String` + 3. Paste your Geocoding API key as the default value. + + ![](../assets/20250430121231812590.png) + + 3. **Create the API Call** + + 1. Navigate to **API Calls** in FlutterFlow. + 2. Create a new API call with the following configuration: + + - **Base URL**: + ```js + https://maps.googleapis.com/maps/api/geocode/json + ``` + - **Method**: `GET` + + 3. Under **Variables**, add: + - `latlng` → Type: `String` + - `apiKey` → Type: `String` + + ![](../assets/20250430121232082585.png) + + 4. Create a Custom Function (LatLng → String) + + Create a custom function that accepts a `LatLng` value (device location) and returns a string in `"latitude,longitude"` format. + + This will be used to populate the `latlng` variable in your API call. + + ![](../assets/20250430121232452872.png) + + 5. **Run the API and Display the Result** + + 1. Add a button or trigger to run the API call. + 2. Pass the following: + - `latlng`: From the custom function. + - `apiKey`: From local state. + 3. From the API response, extract the address using a **JSON Path**. + + Example JSON Path for city name: + ```json + $.results[0].address_components[1].long_name + ``` + 4. Bind the extracted value to a `Text` widget. + +**Option 2: Using the `geocoding` Dart Package** + + If you prefer to use Flutter's native functionality, you can achieve the same result using the geocoding Dart package in a custom action. + + 1. **Add the Package** + Add the dependency to your project’s pubspec.yaml file: + + ```js + dependencies: + geocoding: ^2.1.0 + ``` + + 2. **Create a Custom Action** + - Create a new custom action. + - Add a parameter: LatLng location. + 3. Use the geocoding package to convert the coordinates into a readable address. + + Sample code: + + ```js + import 'package:geocoding/geocoding.dart'; + + Future getAddressFromLocation(LatLng location) async { + final placemarks = await placemarkFromCoordinates(location.latitude, location.longitude); + final place = placemarks.first; + return '${place.locality}, ${place.country}'; + } + + ``` + 4. Return the result and bind it to a Text widget. \ No newline at end of file diff --git a/docs/troubleshooting/deployment/fix_apk_code_download_permissions.md b/docs/troubleshooting/deployment/fix_apk_code_download_permissions.md new file mode 100644 index 00000000..776952c5 --- /dev/null +++ b/docs/troubleshooting/deployment/fix_apk_code_download_permissions.md @@ -0,0 +1,49 @@ +--- +keywords: ['permissions', 'download', 'code'] +slug: troubleshooting/deployment/fix-apk-code-download-permissions +title: Fix Download Issues for APK or Code in FlutterFlow +--- + +# Fix Download Issues for APK or Code in FlutterFlow + +If you're unable to download the APK or source code from FlutterFlow, the issue is likely related to browser permissions or unresolved project errors. + +:::info[Prerequisites] +- You must be logged in to your FlutterFlow account. +- Your project must not contain critical build errors. +::: + +Follow the steps below to resolve this issue: + +1. **Enable Pop-Ups and Redirects** + + A common cause of failed downloads is blocked pop-ups in your browser. + + To enable them in **Google Chrome**: + + 1. Click the **lock icon** in the address bar while on the FlutterFlow site. + 2. In the dropdown: + - Set **Pop-ups and redirects** to **Allow**. + - Optionally, set **Clipboard** to **Allow** to enable copy-paste features. + 3. Attempt the download again. + + ![](../assets/20250430121527145863.png) + + :::tip + Downloaded files are saved to your browser’s default **Downloads** folder. + ::: + +2. **Check for Project Build Errors** + + FlutterFlow blocks downloads if there are unresolved project issues. + + To resolve them: + + 1. Look for a red dot on the **Project Issues** panel in the bottom toolbar. + 2. Open the panel and review the listed issues. + 3. Fix all errors before retrying the download. + + ![](../assets/20250430121527462964.png) + +If downloads still fail after fixing permissions and project errors, reach out to **[support@flutterflow.io](mailto:support@flutterflow.io)** with your project details. + diff --git a/docs/troubleshooting/deployment/fix_codemagic_build_error_end_of_central_directory.md b/docs/troubleshooting/deployment/fix_codemagic_build_error_end_of_central_directory.md new file mode 100644 index 00000000..06c01689 --- /dev/null +++ b/docs/troubleshooting/deployment/fix_codemagic_build_error_end_of_central_directory.md @@ -0,0 +1,35 @@ +--- +title: Fix Codemagic Build ErrorRecord +slug: troubleshooting/deployment/fix-codemagic-build-error-end-of-central-directory +keywords: ['error', 'build', 'format'] +--- + +# Fix Codemagic Build Error: Format Exception + +When triggering a build through Codemagic from a connected GitHub repository, you may encounter the following error: + + ```text + Codemagic build error: Format Exception: Could not find End of Central Directory Record + ``` + This issue typically occurs when the **branch name** is entered incorrectly—especially if you include the repository name in the input field. + +:::info[Prerequisites] +- You must have already connected your GitHub repository to your FlutterFlow project. +- You should be using Codemagic for automated deployment. +::: + +To fix this issue, ensure that you only enter the **branch name**, not the full path with the repository name. + +:::tip +Use only the branch name. Avoid formats like `repo-name/branch-name`. +::: + +Incorrect input: + + ![](../assets/20250430121235746050.png) + +Correct input: + + ![](../assets/20250430121235981602.png) + +If the issue persists after correcting the branch name, contact **[support@flutterflow.io](mailto:support@flutterflow.io)** for additional help. diff --git a/docs/troubleshooting/deployment/fix_firebase_server_directory_error.md b/docs/troubleshooting/deployment/fix_firebase_server_directory_error.md new file mode 100644 index 00000000..beac050b --- /dev/null +++ b/docs/troubleshooting/deployment/fix_firebase_server_directory_error.md @@ -0,0 +1,70 @@ +--- +keywords: ['error', 'directory', 'server'] +slug: troubleshooting/deployment/fix-firebase-server-directory-error +title: Fix Firebase Server Directory Error +--- + +# Fix Firebase Server Directory Error + +This error may occur when deploying Firebase Storage rules from FlutterFlow, even after enabling Firebase Storage. It is commonly caused by incorrect Cloud Firestore setup in the Firebase Console. + +Here is the error message: + + ```text + Error: Failed to create server directory. Please contact support@flutterflow.io + ``` + + + ![](../assets/20250430121206889627.png) + +:::info[Prerequisites] +- You must have already connected your Firebase project to FlutterFlow. +- Firebase Storage must be enabled in the Firebase Console. +::: + +Follow the steps below to resolve the Issue: + +1. **Set Default GCP Resource Location:** + + 1. Open your Firebase Project. + 2. Navigate to **Project Settings**. + 3. Set the **Default GCP Resource Location** to your preferred region. + + ![](../assets/20250430121207161508.png) + + +2. **Enable Firebase Storage:** + + 1. In the Firebase Console, go to the **Build > Storage** section. + 2. Click **Get Started**. + 3. Set the rules to **Testing Mode**. + 4. Choose the **same location** as set in your project settings. + + ![](../assets/20250430121207438234.png) + + ![](../assets/20250430121207744686.png) + +3. **Enable Cloud Firestore in Native Mode:** + + 1. Navigate to **Build > Firestore Database**. + 2. If it is in **Datastore Mode**, you must switch to **Native Mode**. + 3. Click **Go to Google Cloud Console**. + 4. Click **Switch to Native Mode**. + 5. Return to Firebase and reload Firestore. + + ![](../assets/20250430121208035279.png) + + ![](../assets/20250430121208288087.png) + + ![](../assets/20250430121208489158.png) + +4. **Re-deploy Firebase Storage Rules in FlutterFlow** + + 1. Return to your FlutterFlow project. + 2. Re-deploy the Firebase Storage Rules. + + ![](../assets/20250430121208698400.png) + + ![](../assets/20250430121208913054.png) + +If the issue persists after completing the steps above, please contact FlutterFlow Support via chat or email at **support@flutterflow.io**. diff --git a/docs/troubleshooting/deployment/fix_mobile_build_error_nodecoderforimageformat.md b/docs/troubleshooting/deployment/fix_mobile_build_error_nodecoderforimageformat.md new file mode 100644 index 00000000..d7be5b93 --- /dev/null +++ b/docs/troubleshooting/deployment/fix_mobile_build_error_nodecoderforimageformat.md @@ -0,0 +1,34 @@ +--- +keywords: ['error', 'deployment', 'build'] +slug: troubleshooting/deployment/fix-mobile-build-error-nodecoderforimageformat +title: Fix Mobile Build Error Nocodeerforimageformat +--- + +# Fix Mobile Deployment Error: NoDecoderForImageFormatException + +This error typically occurs when the mobile app build fails due to an unsupported icon file format. + +The build process cannot generate a launcher icon from the provided app icon asset. This often happens when the selected file is in an unsupported format such as SVG. + +![](../assets/20250430121258715184.png) + +Follow these steps to fix the error: + + 1. Go to **Settings > App Assets** in your FlutterFlow project. + 2. Replace the current app icon and splash image with supported formats. + 3. Ensure that: + - The asset file is **not too large** (recommended size is 1024×1024 pixels). + - The icon file is in **PNG or JPEG** format (SVG is not supported). + 4. Avoid PNG icons with transparency if building for iOS. + +:::info[Recommended Guidelines] +- Use **PNG or JPEG** formats only. +- Use an icon of at least **1024×1024 pixels**. +- Avoid transparent PNGs for iOS builds. +- Ensure the image adheres to platform-specific design standards. +::: + +:::info[Additional Resources] +- [Android Icon Design Guidelines](https://developer.android.com/distribute/google-play/resources/icon-design-specifications) +- [iOS App Icon Guidelines](https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons/) +::: diff --git a/docs/troubleshooting/deployment/fix_realtime_collaboration_error.md b/docs/troubleshooting/deployment/fix_realtime_collaboration_error.md new file mode 100644 index 00000000..6276a2dc --- /dev/null +++ b/docs/troubleshooting/deployment/fix_realtime_collaboration_error.md @@ -0,0 +1,39 @@ +--- +keywords: ['error', 'realtime', 'collaboration'] +slug: troubleshooting/deployment/fix-realtime-collaboration-error +title: Fix Realtime Collaboration Error in FlutterFlow +--- + +# Fix Realtime Collaboration Error in FlutterFlow + +When attempting to access a project within an organization, you may encounter an error preventing project collaboration. + +![](../assets/20250430121221837885.png) + +This message appears when the project has not been shared with the organization, making it inaccessible to other collaborators. + +:::info[Prerequisites] +You must have Admin or Owner access to the project in FlutterFlow to modify sharing and collaboration settings. +::: + +Follow the steps below to resolve the issue: + + 1. **Open the Project in FlutterFlow** + Navigate to the project where the error occurs. + + 2. **Go to Collaboration Settings** + Open the **Settings > Collaboration** tab from the left navigation panel. + + 3. **Enable Organization Sharing** + Toggle the **Share with my organization** option. + + ![](../assets/20250430121222180988.png) + + 4. **Enable Real-Time Collaboration (Optional)** + If you want team members to see and apply changes live, toggle the **Real-Time Collaboration** feature. + + ![](../assets/20250430121222507402.png) + + Once these steps are completed, all members of your organization will be able to access and collaborate on the project simultaneously in real-time. + +If the error persists after applying these steps, please contact **FlutterFlow Support** via the in-app chat or email: **support@flutterflow.io** diff --git a/docs/troubleshooting/deployment/fix_subdomain_limit_error.md b/docs/troubleshooting/deployment/fix_subdomain_limit_error.md new file mode 100644 index 00000000..b325a3a0 --- /dev/null +++ b/docs/troubleshooting/deployment/fix_subdomain_limit_error.md @@ -0,0 +1,48 @@ +--- +keywords: ['error', 'exceeded', 'subdomains'] +slug: troubleshooting/deployment/fix-subdomain-limit-error +title: Fix Subdomain Limit Error When Publishing to Flutterflow.app +--- + +# Fix Subdomain Limit Error When Publishing to Flutterflow.app + +This article explains how to resolve the following error when publishing a web app: + + ```text + Error reserving subdomain. You have exceeded the quota for subdomains. + ``` + + ![](../assets/20250430121255479960.png) + +This error occurs because FlutterFlow limits the number of custom subdomains a user can reserve under the `.flutterflow.app` domain. + + - **Free plans** can reserve up to **3** custom subdomains. + - **Paid plans** can reserve up to **10** custom subdomains. + +:::tip +Only **custom** subdomains count toward this limit. Subdomains using the default **project ID** do **not** count. +::: + +Follow the steps below to fix this error: + +1. **Use the Default Project ID as Subdomain** + + Using the project ID as the subdomain will not count toward your quota. + + - Go to the **Site URL** field in the **Web Publishing** page. + - Set the subdomain to match the project ID. + + ![](../assets/20250430121255810538.png) + +2. **Unpublish Unused Projects** + + You can free up space by unpublishing existing custom subdomains: + + 1. Go to the **Web Publishing** page of a previously published project. + 2. Click the **Unpublish** button. + + ![](../assets/20250430121256121119.png) + + Once space is freed, return to your current project and attempt to publish again. + +If the error persists after following the above steps, contact **[support@flutterflow.io](mailto:support@flutterflow.io)** for further assistance. diff --git a/docs/troubleshooting/deployment/fix_version_code_conflict_apk_upload.md b/docs/troubleshooting/deployment/fix_version_code_conflict_apk_upload.md new file mode 100644 index 00000000..7db7c5bd --- /dev/null +++ b/docs/troubleshooting/deployment/fix_version_code_conflict_apk_upload.md @@ -0,0 +1,53 @@ +--- +keywords: ['error', 'deployment', 'build'] +slug: /fix-version-code-conflict-apk-upload +title: Fix Version Code Conflict When Uploading APK to Google Play +--- + +# Fix Version Code Conflict When Uploading APK to Google Play + +When uploading a new APK to Google Play, you may encounter the following error: + +```text +Publishing failed: Google Play failed to upload artefacts. APK specifies a version code that has already been used. +{"error":{"code":403,"message":"APK specifies a version code that has already been used.","status":"PERMISSION_DENIED"}} +``` + +This occurs when the APK’s version code conflicts with a version that has already been uploaded. Each release on Google Play must have a **unique version code**. + +:::info[Prerequisites] +You must have access to your FlutterFlow project or GitHub repo where the app is built, and you must be using the Google Play Console for deployment. +::: + +## Updating Version Code in FlutterFlow + +To resolve the issue when deploying directly from FlutterFlow: + + 1. Navigate to **Settings and Integrations > Mobile Deployment**. + ![](../assets/20250430121158393454.png) + + 2. Under the **App Version** section: + - **App Version**: Optional, represents the app’s public version (e.g., 1.0.2). + - **Build Number**: Required for deployment. This must be incremented with every new build. + + 3. Increase the **Build Number**. If left empty, FlutterFlow will increment it automatically. + + 4. Save your changes and deploy again. + + +## Updating Version Code When Using GitHub + + If deploying through GitHub, follow these steps: + + 1. Open the `pubspec.yaml` file. + 2. Locate the `version` tag: + ```yaml + version: 1.0.2+2 + 3. Increment the number after the + symbol. For example, change +2 to +3 + + 4. Run the following command to clean the build: + ```js + flutter clean + ``` + + 5. Rebuild the app and upload the new APK. \ No newline at end of file diff --git a/docs/troubleshooting/deployment/flutterflow_editor_performance_impact.md b/docs/troubleshooting/deployment/flutterflow_editor_performance_impact.md new file mode 100644 index 00000000..ab45e2a3 --- /dev/null +++ b/docs/troubleshooting/deployment/flutterflow_editor_performance_impact.md @@ -0,0 +1,52 @@ +--- +keywords: ['editor', 'performance', 'app speed'] +slug: /flutterflow-editor-performance-impact +title: Understand the Impact of Editor Performance on App Builds +--- + +# Understand the Impact of Editor Performance on App Builds + +When developing applications using FlutterFlow, the editor may occasionally experience slow performance, especially when working with large projects. However, this does not affect the performance of the final app build. + +## Editor Performance vs. App Performance + + FlutterFlow uses a visual interface to generate clean and structured Dart code in the background. While some users may experience delays or UI lag in the FlutterFlow editor, especially when working on complex projects, these editor-side issues do not impact the compiled app’s runtime behavior or performance. + + A helpful analogy is graphic design software: if Adobe Photoshop runs slowly on your computer, it doesn’t make the images blurry. Similarly, FlutterFlow editor lag does not degrade the quality or speed of the app it produces. + +## Common Causes of Editor Slowness + + :::info[Editor Performance Factors] + The following conditions may lead to lag in the FlutterFlow editor: + ::: + + - Large projects with many pages, widgets, or custom functions. + - Excessive use of long text fields directly inside the editor. + - Browsers accumulating cache over long work sessions without restarts. + +:::tip[Tips to Improve Editor Responsiveness] +To ensure smoother performance while using the FlutterFlow editor: + +1. **Avoid Typing Long Text Blocks Directly** + Write and format long content in a separate text editor, then copy it into FlutterFlow. + +2. **Restart Your Browser Regularly** + Refresh or relaunch the browser periodically to clear memory and cache. + +3. **Use macOS App for UI Workflows** + The macOS version of FlutterFlow is optimized for better performance when building UI components. + +4. **Close Unused Pages and Widgets** + Reducing the number of open tabs and components can free up memory. +::: + +Any lag or slowness in the FlutterFlow editor is limited to the development environment. The compiled app’s performance depends on: + - The efficiency of the generated Flutter code. + - App logic, API usage, image sizes, and animation complexity. + - Device resources and internet connectivity. + + Apps built with FlutterFlow run on Flutter’s framework, which is known for its speed and reliability in production environments. + +:::info[Additional Resources] +- **Explore apps built with FlutterFlow**: [**FlutterFlow Experts Gallery**](https://experts.flutterflow.io/) +::: diff --git a/docs/troubleshooting/deployment/resolve_build_failed_error_run_test_mode.md b/docs/troubleshooting/deployment/resolve_build_failed_error_run_test_mode.md new file mode 100644 index 00000000..9fe27e99 --- /dev/null +++ b/docs/troubleshooting/deployment/resolve_build_failed_error_run_test_mode.md @@ -0,0 +1,54 @@ +--- +keywords: ['error', 'build', 'failed'] +slug: /resolve-build-failed-error-run-test-mode +title: Resolve Build Failed Error for Test or Run Mode +--- + +# Resolve Build Failed Error for Test or Run Mode + +This error occurs when attempting to create a build in **Run** or **Test** mode, even though no issues appear in the FlutterFlow debug panel. + +![](../assets/20250430121245553425.png) + +This error typically indicates a silent or uncaught issue in your FlutterFlow project that prevents the app from compiling. + +FlutterFlow generally surfaces project issues through the debug menu. However, some newer error types or configuration issues may not be flagged automatically. + +Some common project actions that may cause this build failure include: + + - Copying and pasting widgets with many actions or visibility rules + - Duplicating widgets that include animations or animation actions + - Duplicating entire pages or components + - Referencing a data source or action that does not exist at build time + (example, using a periodic action before it’s been defined) + - A bug in FlutterFlow (if suspected, report it via the **[FlutterFlow GitHub tracker](https://github.com/FlutterFlow/flutterflow/issues))** + +If you're experiencing this issue, try the following steps: + +1. **Download and Run Locally** + - If available, download your project code. + - Run the project in a local environment using Flutter to view the exact error in your terminal or IDE. + - Identify the error and return to FlutterFlow to make corrections. + +2. **Review Recent Project Changes** + - Use **Snapshots** to compare recent versions of your project. + - Identify what changed before the error began occurring. + +3. **Inspect Actions and Visibility Rules** + - Open the affected page or widget (e.g., one you recently copied or edited). + - Check all attached actions, visibility conditions, and variables. + - Open each action or condition fully, even if no error is visibly flagged. + + :::note[Example] + The visibility rule below does not appear to contain an error at first glance: + + ![](../assets/20250430121246143405.png) + + However, once the condition is expanded, you can see that one of the values is unset and displayed in red: + + ![](../assets/20250430121246510364.png) + + This type of hidden issue can prevent your project from building. + ::: + +If you’ve followed all troubleshooting steps and the issue persists, contact **[support@flutterflow.io](mailto:support@flutterflow.io)** for additional help. diff --git a/docs/troubleshooting/deployment/upload_keystore_existing_google_play_flutterflow.md b/docs/troubleshooting/deployment/upload_keystore_existing_google_play_flutterflow.md new file mode 100644 index 00000000..23738e1e --- /dev/null +++ b/docs/troubleshooting/deployment/upload_keystore_existing_google_play_flutterflow.md @@ -0,0 +1,130 @@ +--- +keywords: ['upload', 'existing', 'file'] +slug: troubleshooting/deployment/upload-keystore-existing-google-play-flutterflow +title: Upload an Existing Keystore File to FlutterFlow for a Google Play Project +--- + +# Upload an Existing Keystore File to FlutterFlow for a Google Play Project + +If your app was originally published on Google Play using another platform, this guide will help you retrieve or reset your keystore, upload it to FlutterFlow, and deploy the updated version of your app. + +- **Option 1: Generate a New Keystore and Upload It to Google Play** + + If you're starting fresh with a new keystore, follow the steps below. + + 1. **Create a New Keystore** + + Open your terminal and run the following command: + + ```text + keytool -genkeypair -alias allyou -keyalg RSA -keysize 2048 -validity 10000 -keystore allyou.keystore + ``` + + This generates a new keystore (`allyou.keystore`) with a validity of 10,000 days. + + ![](../assets/20250430121201175857.png) + + ![](../assets/20250430121201415199.png) + + ![](../assets/20250430121201673795.png) + + + 2. **Export the PEM Public Key** + + Next, export the public key from the keystore using: + + ```js + keytool -export -rfc -keystore allyou.keystore -alias allyou -file allyou.pem + ``` + + This creates a file called `allyou.pem`. + + 3. **Upload the PEM File to Google Play** + + 1. Open the **Google Play Console**. + 2. Submit the `allyou.pem` file during the app signing key setup process. + + 4. **Wait for Approval** + + Once submitted, wait for Google Play to approve the key. Monitor your console for updates. + + 5. **Upload Keystore to FlutterFlow** + + Once approved: + + 1. Open your project in **FlutterFlow**. + 2. Go to **Deploy > Android Settings**. + 3. Upload the `allyou.keystore` file. + 4. Enter the **keystore password**, **key alias**, and **key password**. + + You can now deploy your app using this key. + +- **Option 2: Request a New Upload Key from Google Play (If You Lost It)** + + If your upload key was lost or compromised, you can request a reset from Google Play. + + 1. **Request a New Key** + + 1. Sign in to the **Google Play Console**. + 2. Select your app. + 3. Go to **Setup > App Integrity**. + 4. Click **Request upload key reset**. + 5. Follow the on-screen instructions. + + :::note + If you can’t find "App Integrity", use the search bar in the Play Console. + ::: + + ![](../assets/20250430121201908772.png) + + ![](../assets/20250430121202201523.png) + + It may take up to **48 hours** for the new key to be issued. + + 2. **Verify and Convert the New Key** + + If your key is issued in `.jks` or `.p12` format: + + - To verify the key: + + ```js + keytool -list -v -keystore path/to/your_new_key.jks + ``` + + - To convert from `.p12` to `.jks` format: + + ```js + keytool -importkeystore -srckeystore your-key.p12 -srcstoretype pkcs12 -destkeystore your-key.jks -deststoretype JKS + ``` + + + 3. **Upload the New Keystore to FlutterFlow** + + 1. Log into FlutterFlow. + 2. Navigate to **Deploy > Android Settings**. + 3. Upload the `.jks` file. + 4. Provide the password, key alias, and key password. + + ![](../assets/20250430121202456192.png) + + ![](../assets/20250430121202663162.png) + + :::tip + Run a test build in FlutterFlow using the new keystore to confirm everything works before uploading to Google Play. + ::: + +:::note +Your existing keystore used to sign your app can be downloaded from the **Deploy** tab in FlutterFlow by clicking the **orange key icon**. + +![](../assets/20250430121202861692.png) +::: + +Managing your keystore correctly is critical for app updates on Google Play. Always: + + - Backup your keystore securely. + - Store passwords safely. + - Contact Google Play or FlutterFlow Support if you get stuck. + + Deploying with the right keystore ensures seamless updates and app continuity. + + diff --git a/docs/troubleshooting/firebase/fix_firebase_package_name_error.md b/docs/troubleshooting/firebase/fix_firebase_package_name_error.md new file mode 100644 index 00000000..914a5691 --- /dev/null +++ b/docs/troubleshooting/firebase/fix_firebase_package_name_error.md @@ -0,0 +1,47 @@ +--- +keywords: ['firebase', 'android', 'error'] +slug: troubleshooting/firebase/fix-firebase-package-name-error +title: Fix Firebase Android Package Name Mismatch +--- + +# Fix Firebase Android Package Name Mismatch + +This error occurs when the `package name` in your Firebase Android configuration file (`google-services.json`) does not match the package name defined in your FlutterFlow project settings. + +:::info[Prerequisites] +Ensure you have created your Firebase project and downloaded the `google-services.json` file for your Android app. +::: + +Follow the steps below to resolve the error: + +1. **Confirm Your FlutterFlow Package Name** + + - In FlutterFlow, open your project. + - Navigate to **Settings > General > App Details**. + - Note the Android **Package Name** listed here. + +2. **Regenerate Firebase Config File** + + - Go to the [Firebase Console](https://console.firebase.google.com/). + - Select your project. + - Navigate to **Project Settings > General**. + - In the **Your apps** section, click the Android app. + - Ensure the **package name** matches exactly with your FlutterFlow app. + - Download a new `google-services.json` file. + +3. **Upload Config File to FlutterFlow** + + - In FlutterFlow, go to **Settings > Integrations > Firebase**. + - Upload the new `google-services.json` file. + - Click **Save & Continue**. + + :::warning + If the package names do not match exactly — including case sensitivity and dots — Firebase services may not work correctly in your Android build. + ::: + +If reconfiguring the project does not solve the issue: + + - Remove the existing Android app entry from Firebase. + - Re-add it with the correct package name. + - Download and re-upload the configuration file to FlutterFlow. + diff --git a/docs/troubleshooting/firebase/fix_firebase_project_not_configured.md b/docs/troubleshooting/firebase/fix_firebase_project_not_configured.md new file mode 100644 index 00000000..5385ff10 --- /dev/null +++ b/docs/troubleshooting/firebase/fix_firebase_project_not_configured.md @@ -0,0 +1,31 @@ +--- +keywords: ['firebase', 'configuration', 'settings', 'cms', 'firestore'] +slug: troubleshooting/firebase/fix-firebase-project-not-configured +title: Fix Firebase Project Not Configured Error +--- + +# Fix Firebase Project Not Configured Error + +This guide explains how to resolve the **"Firebase project not configured"** error that may appear when using **Content Manager (CMS)** in FlutterFlow. + +![](../assets/20250430121204990541.png) + +This error typically occurs when the Firebase configuration is incomplete or the project has not been updated properly. As a result, FlutterFlow cannot access **Cloud Firestore**, and CMS features may stop working. + +:::info[Prerequisites] +Ensure that: +- Firebase is already connected under **Settings > Firebase**. +- Your Firebase project includes **Firestore** and has the correct project ID. +::: + +Follow these steps to refresh your Firebase connection and sync CMS: + + 1. Open your FlutterFlow project. + 2. Go to **Settings > Firebase**. + 3. Make a minor, non-breaking change (e.g., toggle a field off and back on). + 4. Click **Save**. + 5. Return to **CMS** and try reloading the content. + + This forces a refresh of the Firebase configuration without affecting your project design. + +If the issue persists after following the steps above, contact **[support@flutterflow.io](mailto:support@flutterflow.io)** for additional assistance. diff --git a/docs/troubleshooting/firebase/fix_firestore_index_deployment.md b/docs/troubleshooting/firebase/fix_firestore_index_deployment.md new file mode 100644 index 00000000..6eb1afbd --- /dev/null +++ b/docs/troubleshooting/firebase/fix_firestore_index_deployment.md @@ -0,0 +1,47 @@ +--- +keywords: ['database', 'firestore', 'deploy'] +slug: troubleshooting/firebase/fix-firestore-index-deployment +title: Fix Firestore Index Deployment Errors +--- + +# Fix Firestore Index Deployment Errors + +When adding or editing queries with filters in FlutterFlow, the platform prompts you to deploy Firestore indexes. These indexes are created in your connected Firebase project and are essential for query performance. + +![](../assets/20250430121307457486.png) + +:::info[Prerequisites] +Before deploying indexes, review the **[Firestore Indexing Documentation](https://firebase.google.com/docs/firestore/query-data/indexing)** to understand how they work. +::: + +If you're unable to deploy Firestore indexes, follow these steps: + +1. **Enable Email Sign-In** + Make sure **Email/Password** sign-in is enabled in your Firebase Authentication settings. + **[Enable email sign-in →](https://firebase.google.com/docs/auth/web/start)** + +2. **Assign Required Firebase Permissions** + Add the following roles to `firebase@flutterflow.io` in your Firebase project: + - `Editor` + - `Cloud Functions Admin` + - `Service Account User` + [How to assign permissions →](https://cloud.google.com/iam/docs/granting-roles) + +3. **Update Firebase Rules** + Confirm that your Firebase rules are correctly configured. + [Update Firebase rules →](https://firebase.google.com/docs/rules) + +4. **Refresh and Clear Cache** + - Press `Ctrl + R` (or `Cmd + R`) to reload FlutterFlow. + - Clear your browser cache. + - Log out and log back into FlutterFlow. + +5. **Check Index Limits** + If you've reached the maximum number of Firestore indexes (usually 200), you'll need to delete unused ones: + - Open your Firebase project. + - Navigate to **Firestore Database > Indexes**. + - Look for any error messages or limits and remove unnecessary indexes if needed. + + :::note + Whenever you modify, add, or remove queries in FlutterFlow, you may be prompted again to deploy updated indexes. Keeping your indexes up to date ensures efficient app performance. + ::: diff --git a/docs/troubleshooting/firebase/fix_firestore_rules_deployment.md b/docs/troubleshooting/firebase/fix_firestore_rules_deployment.md new file mode 100644 index 00000000..061bb7e7 --- /dev/null +++ b/docs/troubleshooting/firebase/fix_firestore_rules_deployment.md @@ -0,0 +1,74 @@ +--- +keywords: ['database', 'firebase', 'permissions'] +slug: troubleshooting/firebase/fix-firestore-rules-deployment +title: Fix Firestore Database Rules Deployment Errors +--- + +# Fix Firestore Database Rules Deployment Errors + +This guide outlines steps to resolve issues when deploying Firebase Firestore rules from FlutterFlow. These deployment errors are usually caused by missing configurations in your Firebase project. + +## :::info[Prerequisites] +Ensure you have connected your Firebase project to FlutterFlow and logged into the Firebase Console with the necessary permissions. +::: + +## Steps to Fix Deployment Errors + +### 1. Create a Firestore Database + +FlutterFlow cannot deploy rules unless a Firestore database has been created. + +- Open the [Firebase Console](https://console.firebase.google.com/). +- Select your project. +- Navigate to **Firestore Database** and click **Create Database**. + +![](../assets/20250430121312243075.png) + +> 📺 **Video Reference**: Watch from 1:50 to 2:05 to see how to create the database. + +--- + +### 2. Assign Required Firebase Permissions + +Ensure the following roles are granted to `firebase@flutterflow.io`: + +- `Editor` +- `Cloud Functions Admin` +- `Service Account User` + +To verify or update permissions: + +- In the Firebase Console, go to **Project Settings > Users and Permissions**. +- Confirm the required roles are assigned. + +![](../assets/20250430121312626400.png) +![](../assets/20250430121312919242.png) +![](../assets/20250430121313117339.png) + +--- + +### 3. Select a GCP Location + +Firestore requires a location to be set before rules can be deployed. + +- In Firebase Console, go to **Project Settings > General**. +- Look for **Default GCP Resource Location**. +- If it shows **Not yet selected**, click the pencil icon and select a location. + +![](../assets/20250430121313453827.png) + +:::tip +Once the GCP location is set, it cannot be changed. Refer to the [GCP location guide](https://firebase.google.com/docs/projects/locations) for more information. +::: + +--- + +## ✅ Final Check + +After completing these steps: + +- Return to FlutterFlow. +- Attempt to deploy your Firestore rules again. + +If the issue persists, ensure all roles were saved correctly and the database is active. + diff --git a/docs/troubleshooting/firebase/fix_google_services_config_error.md b/docs/troubleshooting/firebase/fix_google_services_config_error.md new file mode 100644 index 00000000..adde2296 --- /dev/null +++ b/docs/troubleshooting/firebase/fix_google_services_config_error.md @@ -0,0 +1,52 @@ + +--- +keywords: ['firebase', 'error', 'failed'] +slug: /fix-google-services-config-error +title: Fix Google Services Config Error in Android Build +--- + +# Fix Google Services Config Error in Android Build + +This article explains how to resolve the `processReleaseGoogleServices` error that can occur when deploying an Android app built with FlutterFlow. + +:::info[Prerequisites] +Ensure your Firebase project is set up and you have access to the **google-services.json** file for your Android app. +::: + +```bash +FAILURE: Build failed with an exception. + +* What went wrong: +Execution failed for task ':app:processReleaseGoogleServices'. +> No matching client found for package name 'app.app.app' + +``` + +This error typically occurs when the package name defined in your FlutterFlow project does not match the package name in your Firebase configuration file. + + +Follow the steps below to resolve this error: + +1. **Open Firebase Settings in FlutterFlow** + In FlutterFlow, go to **Settings > Firebase**. + +2. **Regenerate Config Files** + - Click the **Regenerate Config Files** button. + - Enter the correct package name used in your project. + - Click **Generate File**. + + ![](../assets/20250430121329008679.png) + +3. **Re-upload the Config File (If Needed)** + If not automatically updated, manually upload the new `google-services.json` file. + + ![](../assets/20250430121329460301.png) + +4. **Rebuild and Deploy** + Run the build again to confirm the issue is resolved. + +:::warning +Make sure the `package name` in Firebase matches **exactly** with the one in your FlutterFlow project — including case sensitivity and dot placement. Any mismatch will cause this build error. +::: + + diff --git a/docs/troubleshooting/firebase/missing_data_types_in_app_state_variable_list.md b/docs/troubleshooting/firebase/missing_data_types_in_app_state_variable_list.md new file mode 100644 index 00000000..efa9ba56 --- /dev/null +++ b/docs/troubleshooting/firebase/missing_data_types_in_app_state_variable_list.md @@ -0,0 +1,28 @@ +--- +keywords: ['list', 'missing', 'state'] +slug: troubleshooting/firebase/missing-data-types-in-app-state-variable-list +title: Missing Data Types in App State Variable List +--- + +# Missing Data Types in App State Variable List + +When creating an **App State Variable** in FlutterFlow, you should see a list of available data types. However, in some cases—especially in older projects—these data types may not appear. + +This issue is typically caused by the **Deep Linking** setting being turned off in your project. If Deep Linking is disabled, the data type selection list may not populate correctly. + +Follow the steps below to enable Deep Linking and restore the missing data types: + + 1. Open your FlutterFlow project. + 2. Go to **Settings > App Details**. + 3. Scroll to the **Deep Linking & Route** section. + 4. Enable the **Deep Linking** toggle. + + ![](../assets/20250430121217509964.png) + + After enabling Deep Linking, the list of data types should now be visible when adding or editing an App State Variable. + + :::note + This fix is particularly effective for older projects where the setting may be disabled by default. + ::: + +If the issue persists, please contact **FlutterFlow Support** for further assistance. diff --git a/docs/troubleshooting/firebase/stripe_payment_error_cors_region_mismatch.md b/docs/troubleshooting/firebase/stripe_payment_error_cors_region_mismatch.md new file mode 100644 index 00000000..c4c0c0c7 --- /dev/null +++ b/docs/troubleshooting/firebase/stripe_payment_error_cors_region_mismatch.md @@ -0,0 +1,49 @@ +--- +keywords: ['error', 'firebase', 'unknown'] +slug: troubleshooting/firebase/stripe-payment-error-cors-region-mismatch +title: Resolve Stripe Payment Error Caused by CORS Region Mismatch +--- + +# Resolve Stripe Payment Error Caused by CORS Region Mismatch + +This article explains how to resolve the **"Unknown Error Occurred"** issue during Stripe payment actions, caused by a mismatch between the Cloud Functions region and the Firebase project region. + +- **Snackbar**: `Unknown Error Occurred` +- **Console**: + + ```text + Access to fetch at 'https://us-central1-[project].cloudfunctions.net/initStripeTestPayment' + from origin 'https://ff-debug-service-frontend-*.a.run.app' has been blocked by CORS policy: + Response to preflight request doesn't pass access control check: + Redirect is not allowed for a preflight request. + ``` + +This error occurs when the Cloud Function is deployed in a region that does not match the region configured in your Firebase project. This region mismatch leads to a **CORS (Cross-Origin Resource Sharing)** error. + +Follow the steps below to resolve this error: + +1. **Open Firebase Settings** + In FlutterFlow, navigate to **Settings > Firebase**. + You can also open the command palette using `⌘+K` (macOS) or `Ctrl+K` (Windows) and search for "Firebase". + +2. **Set the Cloud Functions Region** + Click **Show Advanced Settings**. + In the **Cloud Functions Region** dropdown, select **[Default]** or match it with your Firebase region. + + ![](../assets/20250430121226481647.png) + +3. **Delete Deployed Functions from Firebase** + Go to the Firebase Console and manually delete any previously deployed Cloud Functions. + + ![](../assets/20250430121226777130.png) + +4. **Re-deploy Stripe Integration** + In FlutterFlow, re-deploy the Stripe integration after adjusting the region. + + ![](../assets/20250430121227109718.png) + +:::warning +Ensure that the Cloud Functions region set in FlutterFlow exactly matches the region configured in your Firebase project. Region mismatches will result in CORS errors during runtime. +::: + +If the issue persists after following these steps, contact support at **support@flutterflow.io**. diff --git a/docs/troubleshooting/firebase/switch_firestore_from_datastore_to_native_mode.md b/docs/troubleshooting/firebase/switch_firestore_from_datastore_to_native_mode.md new file mode 100644 index 00000000..a74ee129 --- /dev/null +++ b/docs/troubleshooting/firebase/switch_firestore_from_datastore_to_native_mode.md @@ -0,0 +1,35 @@ +--- +keywords: ['mode', 'firestore', 'datastore'] +slug: troubleshooting/firebase/switch-to-native-firestore +title: Switch Firestore to Native Mode +--- + +# Switch Firestore to Native Mode + +To use `Cloud Firestore` with FlutterFlow, your database must be in `Native Mode`. If your project is currently using `Datastore Mode`, you will need to switch it to `Native Mode` through the Google Cloud Console. + +:::info[Prerequisites] +- You must have a Firebase project already connected to your FlutterFlow app. +- Your Firestore database must currently be in `Datastore Mode`. +::: + +Follow the steps below to switch to Native Mode: + +1. **Open Google Cloud Console** + In the Firebase Console, under Firestore settings, click **Go to Google Cloud Console**. + + ![](../assets/20250430121205509269.png) + +2. **Switch to Native Mode** + In the Cloud Console, click the **Switch to Native Mode** button. + + ![](../assets/20250430121205798445.png) + +3. **Reload Firestore in Firebase** + Return to the Firebase Console and refresh the **Cloud Firestore** page to confirm the switch. + + ![](../assets/20250430121206162085.png) + +:::warning +This action cannot be undone. Switching to `Native Mode` is permanent. If the option to switch is not available or the error continues, contact **[support@flutterflow.io](mailto:support@flutterflow.io)** for assistance. +::: diff --git a/docs/troubleshooting/google-play-store-deployment/android_app_bundle_wrong_key_error.md b/docs/troubleshooting/google-play-store-deployment/android_app_bundle_wrong_key_error.md new file mode 100644 index 00000000..df21fb26 --- /dev/null +++ b/docs/troubleshooting/google-play-store-deployment/android_app_bundle_wrong_key_error.md @@ -0,0 +1,53 @@ +--- +keywords: ['android', 'release', 'build'] +slug: troubleshooting/google-play-store-deployment/android-app-bundle-wrong-key-error +title: App Bundle Signed with Wrong Key on Google Play +--- + +# App Bundle Signed with Wrong Key on Google Play + +If you're encountering this error when uploading your app to Google Play, it typically means the Android App Bundle was signed with a **different Keystore** than the one expected by Google Play. + +Here is the error message: + + ```text + Google Play failed to upload artefacts. The Android App Bundle was signed with the wrong key. + Found: SHA1: XX:XX:XX:XX. + Expected: YY:YY:YY:YY + ``` + +:::info[Prerequisites] +- You must be building your app in Release Mode. +- Ensure you have access to the correct keystore used when first publishing your app. +::: + +Follow the steps below to resolve this error + +1. **Verify That the Correct Keystore File Was Submitted for Signing** + + If you are **not using GitHub** integration, please [contact FlutterFlow Support](mailto:support@flutterflow.io). + + If needed, you can create a new keystore file using the following command in your terminal or IDE: + + ```bash + keytool -genkey -v -keystore ~/upload-keystore.jks -keyalg RSA -keysize 2048 -validity 10000 -alias upload + ``` + + :::warning + If the original keystore was used in a previous deployment and is now lost, you’ll need to contact Google Play Support for further assistance. + ::: + +2. **Verify That Your `build.gradle` File Was Correctly Configured** + + Check the `build.gradle` file and ensure it has been updated according to **[Google Play’s deployment documentation](https://developer.android.com/studio/publish/app-signing#sign-apk)**. +Pay special attention to the `signingConfigs` and `buildTypes` sections. + +3. **Make Sure the Application Was Submitted in Release Mode** + + You must build in **Release Mode** to ensure your app is correctly signed and optimized for production. + + To verify: + + - Check your **build settings** in FlutterFlow. + - Ensure the app is **not in Debug Mode**. + - If it is, rebuild the app using **Release Mode**. diff --git a/docs/troubleshooting/google-play-store-deployment/fix_app_store_bundle_version_error.md b/docs/troubleshooting/google-play-store-deployment/fix_app_store_bundle_version_error.md new file mode 100644 index 00000000..7065119e --- /dev/null +++ b/docs/troubleshooting/google-play-store-deployment/fix_app_store_bundle_version_error.md @@ -0,0 +1,45 @@ +--- +keywords: ['error', 'deployment', 'previously'] +slug: troubleshooting/google-play-store-deployment/fix-app-store-bundle-version-error +title: Fix App Bundle Version Error on App Store +--- + +# Fix App Bundle Version Error on App Store + +If you're seeing this error when deploying to the App Store, it's because the **version and build number** of your app match a previously uploaded version. Apple requires each build to have a **higher version or build number** than the last. + +The error message is found below: + + - `NSLocalizedFailureReason=The bundle version must be higher than the previously uploaded version.` + - `"NSLocalizedDescription": "The provided entity includes an attribute with a value that has already been used"` + +:::info[Prerequisites] +Make sure you have access to the previous version and build number submitted to the App Store. You can find this in App Store Connect under the build history for your app. +::: + +Follow the steps below to resolve this error: + +1. **Check your last uploaded version/build number** + For example: version `1.0.1` with build number `12`. + +2. **In FlutterFlow, navigate to:** + `Settings > Deployment` + +3. You have two options: + - **Option 1: Let FlutterFlow increment automatically** + - Keep the version the same. + - Leave the build number **empty**. + - **Option 2: Manually increment the build number** + - Increase the previous build number by 1 (e.g., from 12 to 13). + +4. If the issue persists: + - Try incrementing both the **version number** (e.g., `1.0.2`) and **build number**, or just leave build number empty to auto-increment. + + ![](../assets/20250430121110741307.png) + +Follow the steps below to prevent future errors: + + - If using **manual updates**, always increase the build number before each new deployment. + - For **automatic handling**, leave the build number field empty to let FlutterFlow manage it for you. + +If these steps don’t resolve the issue, please contact [FlutterFlow Support](mailto:support@flutterflow.io). diff --git a/docs/troubleshooting/google-play-store-deployment/fix_keystore_read_error.md b/docs/troubleshooting/google-play-store-deployment/fix_keystore_read_error.md new file mode 100644 index 00000000..7e0f5b03 --- /dev/null +++ b/docs/troubleshooting/google-play-store-deployment/fix_keystore_read_error.md @@ -0,0 +1,41 @@ +--- +keywords: ['deployment', 'error', 'store'] +slug: troubleshooting/google-play-store-deployment/fix-keystore-read-error +title: Fix Keystore Read Error on Google Play +--- + +# Fix Keystore Read Error on Google Play + +This error occurs when deploying an app to the Google Play Store and the system fails to access the keystore file required for signing. + +The error message is found below: + + ```text + Error: Failed to read key ******** from store "/tmp/keystore.keystore" + ``` + +:::info[Prerequisites] +- Ensure you have access to the original keystore file and its credentials. +- Confirm you are using a paid FlutterFlow plan to enable Android deployment. +::: + +Follow the steps below to resolve the issue: + +- **Verify Android Deployment Settings** + Go to `Settings > Android Deployment` and ensure a valid keystore file is uploaded. + +- **Check Keystore Credentials** + Make sure the following values are correctly entered: + - Keystore Password + - Key Alias + - Key Password + +- **Generate a New Keystore (If Needed)** + If the keystore is missing or corrupted, you can generate a new one using the following command: + + ```js + keytool -genkey -v -keystore ~/upload-keystore.jks -keyalg RSA -keysize 2048 -validity 10000 -alias upload + ``` + +4. **Upload the Correct Keystore File** + Confirm that the correct `.keystore` file is used during deployment. diff --git a/docs/troubleshooting/google-play-store-deployment/play_store_ad_id_permission_error.md b/docs/troubleshooting/google-play-store-deployment/play_store_ad_id_permission_error.md new file mode 100644 index 00000000..5686ea19 --- /dev/null +++ b/docs/troubleshooting/google-play-store-deployment/play_store_ad_id_permission_error.md @@ -0,0 +1,43 @@ +--- +keywords: ['android', 'release', 'error'] +slug: troubleshooting/google-play-store-deployment/play-store-ad-id-permission-error +title: Play Store AD_ID Permission Error +--- +# Play Store AD_ID Permission Error + +You may see this error when trying to deploy your app through the Google Play Store: + + ```text + This release includes the com.google.android.gms.permission.AD_ID permission but your declaration on Play Console says your app doesn't use advertising ID. You must update your advertising ID declaration. + ``` +:::info[Prerequisites] +- Ensure your app is connected to the Google Play Console. +- Make sure you have access to the App Content section in the Play Console. +::: + +Even if your app does not use ads, this error can occur if your project includes services like **Google Analytics**, which also uses the **AD_ID** permission. + +By default, **Google Analytics** and other libraries may include the `com.google.android.gms.permission.AD_ID`, triggering this Play Console warning. + +To resolve the issue: + +1. **Go to Google Play Console** + - Open your app project. + - In the left-side panel, scroll to **Policy & programs > App content**. + +2. **Update Advertising ID Declaration** + - In the **App content** section, find and click on **Advertising ID**. + - Click **Start** to begin the configuration. + + ![](../assets/20250430121225466053.png) + +3. **Select "Yes"** + - Even if you are not using ads, choose **Yes** for the AD_ID usage. + - Select **Analytics** as the reason for usage. + + ![](../assets/20250430121225764598.png) + +4. **Save the Changes** + - Scroll to the bottom and click **Save**. + + diff --git a/docs/troubleshooting/test-mode/clear_database_before_tests.md b/docs/troubleshooting/test-mode/clear_database_before_tests.md new file mode 100644 index 00000000..6935f1cc --- /dev/null +++ b/docs/troubleshooting/test-mode/clear_database_before_tests.md @@ -0,0 +1,46 @@ +--- +keywords: ['database', 'clear', 'testing'] +slug: troubleshooting/test-mode/prepare-database-for-testing +title: Prepare Database Before Running Tests +--- + +# Prepare Database Before Running Tests + +When preparing for major testing or app updates, it's important to ensure that all records in the Firestore database are aligned with the latest data model. Outdated entries may lack newly added fields, leading to potential runtime issues. + +## The Issue with Outdated Records + +As new fields are introduced to collections, existing records may become incomplete. This can cause: + + - Runtime errors + - Inconsistent or missing UI elements + - Unexpected test behavior or broken features + +:::info[Prerequisites] +Ensure that you have access to the Firestore database and understand the current schema changes made in the project. +::: + +The steps below are the recommended practices: +1. **Clear the Database Before Testing** + Remove old data to ensure that only current, schema-compliant records are present. + +2. **Migrate Old Records** + Use a script or manual update to add missing fields to existing documents. + +These steps help maintain consistency across your data and avoid unexpected failures during testing or deployment. + +Here is an example scenario: + + 1. A new field called `profilePicture` is added to the `Users` collection. + 2. Existing user records do not include the `profilePicture` field. + 3. The app assumes all users have a `profilePicture` value. + 4. Displaying or processing these records causes errors or incomplete rendering. + +Solution: + - Use a Cloud Function, script, or manual update to add default values to existing documents. + - Alternatively, delete non-compliant test data before starting major testing workflows. + +:::tip +Always validate the database structure after schema changes by running test queries to confirm that all expected fields exist across documents. +::: + diff --git a/docs/troubleshooting/test-mode/svg_color_issue_on_real_device.md b/docs/troubleshooting/test-mode/svg_color_issue_on_real_device.md new file mode 100644 index 00000000..d900fd16 --- /dev/null +++ b/docs/troubleshooting/test-mode/svg_color_issue_on_real_device.md @@ -0,0 +1,54 @@ +--- +keywords: ['device', 'svg', 'color'] +slug: troubleshooting/test-mode/fix-svg-color-on-device +title: Fix SVG Color Not Showing on Devices +--- + +# Fix SVG Color Not Showing on Devices + +SVG images may display properly on web preview but appear without color on physical mobile devices. This usually results from configuration or compatibility issues in the SVG file. + +![](../assets/20250430121251986970.png) + +**Common Causes:** + + 1. **Unsupported Color Mode** + Some mobile devices may not support CMYK color profiles. Ensure the SVG uses the `RGB` color mode. + + 2. **Missing `fill` or `stroke` Attributes** + Open the SVG file in a text/code editor and verify that the appropriate `fill` or `stroke` attributes are defined for all elements. + + 3. **Display Attribute Conflicts** + Elements in the SVG may be hidden using `display: none`. Remove or update this property if present. + + 4. **Incorrect File Embedding** + Ensure the SVG file is correctly added to your FlutterFlow project's asset folder and that the file path is valid. + + 5. **Device Accessibility Settings** + Some devices may have display filters or accessibility modes enabled that alter or suppress color rendering. + + +:::info[Prerequisites] +Ensure the SVG file is included in your **FlutterFlow project assets** and added via the **Image widget**. +::: + +Follow the steps below to resolve the issue: + + 1. **Test a Known Working SVG** + Use a sample SVG that has been tested to display correctly across devices. This can help isolate whether the issue is file-specific. + + 2. **Export SVG with Simplified Settings** + Re-export the image using design tools like Figma, Illustrator, or SVGOMG, ensuring the export uses the RGB profile. + + 3. **Open SVG in a Mobile Browser** + Upload the SVG to a hosting platform and open it directly in a mobile browser. This helps determine if the issue is related to rendering or Flutter integration. + + 4. **Inspect SVG Attributes** + Open the SVG in a text editor and verify that all graphical elements include `fill` or `stroke` properties. Remove any `display: none;` styling if not needed. + + 5. **Convert to PNG (if needed)** + If issues persist, consider converting the SVG to a PNG to ensure consistent cross-platform rendering. + +:::tip +SVGs with simplified paths and explicit color attributes (`fill`, `stroke`) are more likely to display correctly across devices. +::: diff --git a/docs/troubleshooting/test-mode/text_not_visible_on_mobile.md b/docs/troubleshooting/test-mode/text_not_visible_on_mobile.md new file mode 100644 index 00000000..76510f09 --- /dev/null +++ b/docs/troubleshooting/test-mode/text_not_visible_on_mobile.md @@ -0,0 +1,49 @@ +--- +keywords: ['mode', 'mobile', 'text'] +slug: troubleshooting/test-mode/fix-text-not-showing-on-mobile +title: Fix Text Not Showing on Mobile Devices +--- + +# Fix Text Not Showing on Mobile Devices + +Text may appear normally during **Run/Test Mode** in FlutterFlow but fail to display when the app runs on a real mobile device. This issue is often caused by color contrast in dark mode or missing translations. + +![](../assets/20250430121253789974.png) + +:::info[Prerequisites] +Make sure the **Text widget** is added to the correct screen and that it is not conditionally hidden using visibility settings. +::: + +Follow the steps below to resolve this issue: + + 1. **Check Dark Mode Contrast** + Text may be visible in light mode but blend into the background in dark mode due to incompatible colors. + + - Go to **Settings > Theme > Colors**. + - Review and update your dark mode text colors for visibility. + - Optionally, disable dark mode entirely for simpler behavior. + + ![](../assets/20250430121254079048.png) + + :::warning + Using black text (`#000000`) on dark mode backgrounds can render text invisible on devices. + ::: + + 2. **Check for Missing Translations** + If your app uses localization, untranslated fields may render as blank on devices with alternate system languages. + + - Go to **Settings > Localization**. + - Use the automatic translator or manually fill in missing entries for each language. + + ![](../assets/20250430121254348087.png) + + ![](../assets/20250430121254635672.png) + + 3. **Preview Using a Real Device** + Always test using the **FlutterFlow Preview App** or deployed builds to check how your design renders on physical devices. + +:::tip +- Avoid hardcoding text color to `white` or `black`. Use theme-based color variables when possible. +- Enable debug mode or use print statements to verify that the text content is being passed correctly. +- Review widget visibility rules and any dynamic conditions applied to the text. +::: diff --git a/sidebars.ts b/sidebars.ts index 2a0d47de..5842a29c 100644 --- a/sidebars.ts +++ b/sidebars.ts @@ -26,7 +26,7 @@ const sidebars: SidebarsConfig = { }, { type: 'category', - label: 'FlutterFlow Platform', + label: 'Basics', collapsed: true, items: [ {