FlutterFlow · mrdavidorok · Jul 23, 2025
diff --git a/docs/ff-concepts/layout/fix_app_colors_on_device.md 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.
+:::
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
@@ -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
diff --git a/docs/ff-concepts/layout/imgs/20250430121247467739.png b/docs/ff-concepts/layout/imgs/20250430121247467739.png
diff --git a/docs/ff-concepts/layout/imgs/20250430121501151202.png b/docs/ff-concepts/layout/imgs/20250430121501151202.png
diff --git a/docs/ff-concepts/layout/imgs/20250430121511630414.png b/docs/ff-concepts/layout/imgs/20250430121511630414.png
diff --git a/docs/ff-concepts/layout/wrap_text_inside_containers.md 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)
+:::
diff --git a/docs/ff-concepts/navigation-routing/create_submenu.md 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)
diff --git a/docs/ff-concepts/navigation-routing/imgs/20250430121319778896.gif b/docs/ff-concepts/navigation-routing/imgs/20250430121319778896.gif
diff --git a/docs/ff-concepts/notifications/enable_ios_push_notifications.md 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
diff --git a/docs/ff-concepts/notifications/imgs/20250430121405587477.png b/docs/ff-concepts/notifications/imgs/20250430121405587477.png
diff --git a/docs/ff-concepts/notifications/imgs/20250430121405921022.png b/docs/ff-concepts/notifications/imgs/20250430121405921022.png
diff --git a/docs/ff-concepts/state-management/check_onboarding_status.md 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
@@ -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
diff --git a/docs/ff-integrations/authentication/imgs/20250430121453493755.png b/docs/ff-integrations/authentication/imgs/20250430121453493755.png
diff --git a/docs/ff-integrations/payments/imgs/20250430121151165998.png b/docs/ff-integrations/payments/imgs/20250430121151165998.png
diff --git a/docs/ff-integrations/payments/imgs/20250430121151456692.png b/docs/ff-integrations/payments/imgs/20250430121151456692.png
diff --git a/docs/ff-integrations/payments/imgs/20250430121151672498.png b/docs/ff-integrations/payments/imgs/20250430121151672498.png
diff --git a/docs/ff-integrations/payments/imgs/20250430121151950315.png b/docs/ff-integrations/payments/imgs/20250430121151950315.png
diff --git a/docs/ff-integrations/payments/imgs/20250430121152202829.png b/docs/ff-integrations/payments/imgs/20250430121152202829.png