FlutterFlow · mrdavidorok · Jun 24, 2025 · Jul 1, 2025 · Jul 1, 2025 · Jul 1, 2025
diff --git a/...ncepts/adding-customization/add_dependencies_to_custom_widgets_or_actions_in.md b/...ncepts/adding-customization/add_dependencies_to_custom_widgets_or_actions_in.md
@@ -0,0 +1,39 @@
+---
+keywords: ['dependencies', 'pubspec.yaml', 'custom widgets', 'flutterflow']
+slug: /add-custom-dependencies
+title: Add Dependencies to Custom Widgets or Actions
+---
+
+# Add Dependencies to Custom Widgets or Actions
+
+FlutterFlow does not currently support adding dependencies to the entire project via the `pubspec.yaml` file. However, you can include dependencies by associating them with specific **Custom Widgets** or **Custom Actions**.
+
+This approach ensures that only the relevant code includes the necessary packages.
+
+:::info[Prerequisites]
+To use this method, you must have a custom widget or action already created within your FlutterFlow project.
+:::
+
+## Steps to Add a Dependency
+
+1. **Open the Custom Widget or Action**  
+   Navigate to your custom widget or action in FlutterFlow.
+
+2. **Add the Dependency**  
+   In the **Dependencies** tab, add the required package name and version.
+
+3. **Refresh the Dependencies**  
+   Click the **Refresh** icon to update the packages in your `pubspec.yaml` file.
+
+4. **Import the Package**  
+   Use an import statement in your Dart code, such as:  
+   ```dart
+   import 'package:your_package/your_package.dart';
+    ```
+
+    ![](../assets/20250430121235199536.png)
+
+:::note
+- Dependencies added this way are scoped to the custom code where they are declared.
+- You can repeat these steps for each custom widget or action requiring additional packages.
+:::
diff --git a/docs/ff-concepts/adding-customization/enable_image_upload_in_webview_on_device.md b/docs/ff-concepts/adding-customization/enable_image_upload_in_webview_on_device.md
@@ -0,0 +1,43 @@
+---
+keywords: ['permissions', 'upload', 'view']
+slug: enable-image-upload-in-webview-on-device
+title: Enable Image Upload in WebView on Real Devices
+---
+
+# Enable Image Upload in WebView on Real Devices
+
+Image uploads may work in Run/Test mode but fail on real devices due to missing runtime permissions related to accessing the photo library.
+
+## Problem
+
+In web preview mode, permissions are managed by the browser, and image upload typically works without issues. However, on physical devices, accessing the photo library requires explicit runtime permissions.
+
+If the image upload is implemented inside a WebView, FlutterFlow does not automatically detect it and therefore does not request the necessary permissions.
+
+## Solution
+
+To allow image uploads from a WebView on a physical device, follow these steps:
+
+1. **Enable the Required Permission**  
+   Navigate to **Settings → Permissions** in your FlutterFlow project and enable the **Photo Library** permission.
+
+   ![](../assets/20250430121337121891.png)
+
+2. **Request Permission at Runtime**  
+   Before initiating the upload action inside the WebView, use the **Get Permission** action to explicitly request access to the photo library.
+
+   ![](../assets/20250430121337385659.png)
+
+3. **Reinstall the App**  
+   After adding the permission:
+   - Uninstall the app from the device.
+   - Clear the app cache.
+   - Reinstall the app to ensure the permission prompt appears.
+
+## Notes
+
+:::warning
+If the permission dialog does not appear on first launch, the app will not have access to the photo library, and uploads inside the WebView will fail.
+:::
+
+Once permissions are correctly granted, image uploads inside the WebView will function as expected on physical devices.
diff --git a/...epts/alerts/Create an alert if a user's email address or password is invalid.md b/...epts/alerts/Create an alert if a user's email address or password is invalid.md
@@ -0,0 +1,17 @@
+---
+keywords: ['email', 'address', 'alert']
+author: Unknown
+created_at: '1650489334'
+slug: /create-an-alert-if-a-user-s-email-address-or-password-is-invalid
+title: Create an alert if a user's email address or password is invalid
+updated_at: '1721942919'
+url: https://intercom.help/flutterflow/en/articles/6156971-create-an-alert-if-a-user-s-email-address-or-password-is-invalid
+---
+
+# Create an Alert if a User's Email Address or Password is Invalid
+
+FlutterFlow automatically displays authentication error messages using a **SnackBar** widget. This means you **do not need to manually create alert dialogs** for common login issues such as an incorrect email or password.
+
+The error messages are shown automatically when a login attempt fails, providing a seamless experience for both the developer and end user.
+
+![Error Snackbar Demo](../assets/20250430121519975010.gif)
diff --git a/docs/ff-concepts/file-handling/Can't upload photo to Content Manager.md b/docs/ff-concepts/file-handling/Can't upload photo to Content Manager.md
@@ -0,0 +1,51 @@
+---
+keywords: ['content', 'upload', 'photo']
+author: Unknown
+created_at: '1657225806'
+slug: /can-t-upload-photo-to-content-manager
+title: Can't upload photo to Content Manager
+updated_at: '1659057829'
+url: https://intercom.help/flutterflow/en/articles/6369337-can-t-upload-photo-to-content-manager
+---
+
+# Can't Upload Photo to Content Manager
+
+By default, FlutterFlow's CMS does not support image uploads due to restrictive Firebase Storage rules. To enable photo uploads, you need to update your Firestore Security Rules.
+
+---
+
+## Steps to Enable Photo Uploads
+
+### 1. Open Firebase Console
+
+In your FlutterFlow project, go to:
+
+**Settings & Integrations → Firebase → Open Firebase Console**
+
+![Open Firebase Console](../assets/20250430121356207178.png)
+
+---
+
+### 2. Navigate to Storage Rules
+
+In the Firebase Console, click:
+
+**Storage → Rules**
+
+![Storage Rules](../assets/20250430121356535681.png)
+
+---
+
+### 3. Update and Publish New Rules
+
+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;
+    }
+  }
+}
diff --git a/...-routing/How can i access to Page link [ after activating the dynamic link ].md b/...-routing/How can i access to Page link [ after activating the dynamic link ].md
@@ -0,0 +1,40 @@
+---
+title: Access Page Links After Activating Dynamic Links
+slug: /access-page-link-after-activating-dynamic-link
+keywords: ['access', 'dynamic', 'activating']
+---
+
+# Access Page Links After Activating Dynamic Links
+
+Once you've enabled **Deep Linking & Routing** in FlutterFlow, you can also activate **Firebase Dynamic Links**.
+
+> Want to know more about Firebase Dynamic Links?  
+> Refer to the Firebase documentation for setup and integration details.
+
+![Dynamic Links Enabled](../assets/20250430121453205914.png)
+
+When you activate dynamic links, you gain access to **page-specific links**. This allows you to share or route users to exact screens within your app.
+
+---
+
+## Important Note
+
+If you enable dynamic links, you must use `"https"` for the URL scheme.
+
+---
+
+## How to Set Up Dynamic Links in FlutterFlow
+
+To share or use the current page URL, follow these steps:
+
+1. **Add an Action**: Use the `Generate Current Page Link` action to create a dynamic link for the active screen.
+
+2. **Access the Page URL**: Once generated, the page URL becomes accessible through the **Widget State → Current Page Link**.
+
+3. **Use It in Another Action**: For example, on your **Share** button, add:
+   - A `Generate Current Page Link` action first
+   - Then a `Share` action using `Current Page Link` as the source
+
+---
+
+![Share Button Example](../assets/20250430121453493755.png)
diff --git a/docs/ff-concepts/state-management/Missing Data Types in App State Variable List.md b/docs/ff-concepts/state-management/Missing Data Types in App State Variable List.md
@@ -0,0 +1,43 @@
+---
+keywords: ['list', 'missing', 'state']
+slug: /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 normally see a list of available data types. However, in some cases—especially in **older projects**—these options may not appear.
+
+---
+
+## Why This Happens
+
+This issue is often caused by **Deep Linking not being enabled** in the project settings. Without Deep Linking, the data types list may fail to load in the App State configuration.
+
+---
+
+## How to Fix It
+
+Follow these steps to enable Deep Linking:
+
+1. Open your project in **FlutterFlow**
+2. Go to **Project Settings**
+3. Scroll to the **App Details** section
+4. Open **Deep Linking & Route**
+5. **Turn on the Deep Linking** option
+
+---
+
+![Enable Deep Linking](../assets/20250430121217509964.png)
+
+Once Deep Linking is enabled, you should be able to see the full list of data types when creating or editing App State variables.
+
+---
+
+## Conclusion
+
+This quick fix resolves a frustrating bug and can save you significant time during development. If enabling Deep Linking doesn't resolve the issue, please contact [FlutterFlow Support](mailto:support@flutterflow.io) for further assistance.
+
+> ✅ Pro Tip: This issue most often affects **legacy or older projects**. For all new projects, Deep Linking is typically enabled by default.
+
+Stay patient, keep building, and happy coding!
diff --git a/docs/intro/before-you-begin/build_your_first_app.md b/docs/intro/before-you-begin/build_your_first_app.md
@@ -0,0 +1,69 @@
+---
+keywords: ['build', 'first']  
+slug: build-your-first-app  
+title: Build Your First App  
+---
+
+# Build Your First App
+
+Welcome to FlutterFlow — we're glad you're here!  
+In this tutorial, you'll build a simple app in **less than 10 minutes**.
+
+---
+
+## 1. Create a New Project
+
+- Select **Create New**.
+
+![](../assets/20250430121504394651.png)
+
+- A popup will appear.  
+  Enter a name for your project (e.g., `MyFirstProject`), then select **Create New** under **Blank App**.
+
+![](../assets/20250430121504664904.png)
+
+---
+
+## 2. Change the Page Title
+
+- Click where it says **Page Title**.
+- In the **Properties Panel** on the right, change the text to **Home**.
+
+![](../assets/20250430121505082721.png)
+
+---
+
+## 3. Style the Container
+
+- Drag a **Container** widget onto your app canvas.
+
+![](../assets/20250430121505335691.gif)
+
+- In the **Padding & Alignment** section of the right panel:
+  - Click the lock icon.
+  - Enter `16` in the **L** field (this applies 16px padding on all sides).
+
+- In the **Container Properties** section:
+  - Set the width to **∞** (original is 100).
+  - Click the **Fill Color** square.
+  - From the color selector popup, choose **Secondary BG** and click **Use Color**.
+
+- Under **Border Radius**:
+  - Click the lock icon.
+  - Enter `8` for the **TL** value.
+
+---
+
+## 4. Add Content to the Container
+
+- Drag a **Column** inside your container.
+- In the **Padding & Alignment** section, unlock and enter `12`.
+- Drag a **Row** inside the column.
+- Then, drag a **Text** widget inside the row.
+
+- In the **Properties Panel**:
+  - Change the text to **Active Projects**.
+  - Scroll to the **Text Properties** section.
+  - Under **Theme Text Style**, select **Body Text 2**.
+
+![](../assets/20250430121505662806.gif)
diff --git a/docs/intro/before-you-begin/onboarding.md b/docs/intro/before-you-begin/onboarding.md
@@ -0,0 +1,36 @@
+---
+keywords: ['onboarding']
+slug: onboarding
+title: Onboarding
+---
+
+# Onboarding
+
+To manage user onboarding effectively, combine **Local State**, **Persisted Value**, and **On PageLoad** actions.
+
+## Strategy
+
+Use conditional logic to verify whether the user has completed onboarding before allowing access to key parts of your app.
+
+## Implementation Steps
+
+1. **Track Onboarding Completion**
+   - Create a **Local State** or **Persisted Value** (e.g., `hasCompletedOnboarding`) to record the user's onboarding status.
+
+2. **Check Status on Page Load**
+   - Use an **On Page Load** action to check if the value indicates the user has completed onboarding.
+   - If not, navigate the user to the onboarding screen.
+
+3. **Enforce Onboarding Before Critical Actions**
+   - Before allowing actions like checkout, data submission, or profile updates:
+     - Check the onboarding completion value.
+     - If onboarding is incomplete, redirect the user accordingly.
+
+## Why It Matters
+
+This approach ensures users:
+- Do not skip essential setup steps.
+- Receive proper guidance through the app's initial flow.
+- Avoid errors or confusion during key interactions.
+
+> ✅ Use **Persisted Values** if onboarding should persist across app sessions. Use **Local State** if the status should reset after each session.
diff --git a/docs/intro/ff-ui/Could we embed a Flutterflow web app into iFrames.md b/docs/intro/ff-ui/Could we embed a Flutterflow web app into iFrames.md
@@ -0,0 +1,25 @@
+---
+keywords: ['could', 'embed', 'iframes']
+author: Unknown
+created_at: '1677842812'
+slug: /could-we-embed-a-flutterflow-web-app-into-iframes
+title: Could we embed a FlutterFlow web app into iFrames?
+updated_at: '1678244479'
+url: None
+---
+
+# Could We Embed a FlutterFlow Web App Into iFrames?
+
+FlutterFlow web applications may not load correctly within **iframes** due to their reliance on **local storage**. However, it is possible to embed these apps within iframes by **enabling third-party cookies** from the subdomain where your FlutterFlow app is hosted.
+
+![Iframe Behavior](../assets/20250430121251224097.png)
+
+> ⚠️ **Important Notes:**
+> 
+> - While enabling third-party cookies may allow the application to load inside an iframe, **some features may not function as expected**.
+> - Many modern browsers and reputable websites intentionally **block iframe embedding** for security reasons.
+
+## Recommendation
+
+If you decide to use this method, **test your embedded application thoroughly** to ensure that all necessary features work correctly.
+