Uncategorized: moved articles from the uncategorized folder to various aspect of the document tree.

docs/ff-concepts/file-handling/displaying-media.md

@@ -50,6 +50,17 @@ For more details on how assets are stored in your project, see the directory [**
 
 You can also access media files within your app that are stored temporarily in your application. For example, if you'd like to preview an image before sending it to cloud storage, you can do so by setting the source to **Widget State -> Uploaded Local File**.
 
+:::info[Image Uploads via WebView May Fail on Real Devices]
+Image uploads inside a WebView may fail on physical devices even if they work in Run/Test mode. This happens because FlutterFlow doesn't auto-request Photo Library permissions at runtime.
+
+To fix this:
+    - Enable Photo Library in Settings > Permissions.
+    - Add a Get Permission action to request access before uploading.
+    - Reinstall the app on the device after adding the permission.
+
+If permissions aren’t granted, the upload will silently fail. Users may have to manually allow access via their device’s app settings.
+:::
+
 ![dm-local-upload.avif](imgs/dm-local-upload.avif)
 
 ## AudioPlayer

docs/ff-integrations/authentication/firebase-auth/auth-actions.md

@@ -22,6 +22,29 @@ Follow the steps below to add this action:
 
 ![logout](../imgs/logout-action.png)
 
+## Handling 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)
+
+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.
+
+:::tip
+There is no need to manually add alert dialogs for failed login attempts. FlutterFlow handles `SnackBar` display automatically when authentication fails.
+:::
+
+### Customize the SnackBar (Optional)
+
+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.
+
+:::note
+To customize the `SnackBar` further, use the **Action Output** and attach additional logic based on the error string.
+:::
+
 ## Reset Password 
 
 With Firebase Authentication, there are two ways you can allow users to reset their password in your FlutterFlow app:

docs/ff-integrations/maps/convert-device-location-to-address.md

@@ -0,0 +1,100 @@
+---
+keywords: ['device', 'address', 'current']
+slug: /convert-device-location-to-address
+title: Convert Device Location to Address
+---
+
+# 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)**.
+
+**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**.
+
+         ![](imgs/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.
+
+         ![](imgs/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`
+
+         ![](imgs/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.
+
+         ![](imgs/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<String> 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.

docs/generated-code/state-mgmt-gen-code.md

@@ -73,6 +73,26 @@ For the **iOS** platform, it uses the [**KeyChain**](https://developer.apple.com
 In the case of the **Web**, it uses the [**Web Cryptography**](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API) (Web Crypto) API.
 :::
 
+## Example: Check Onboarding Completion Using App State
+
+Use a persisted app state variable to ensure users complete onboarding before accessing certain parts of your app (e.g., home screen, checkout).
+
+Follow the steps below:
+
+    1. **Create a Boolean Variable**
+    - Go to **App Settings > State Management > Persisted Values**.
+    - Create a boolean variable like `hasCompletedOnboarding`, default: `false`.
+
+    2. **Update After Onboarding**
+    - On the final onboarding screen, add an **Update Persisted Value** action to set `hasCompletedOnboarding = true`.
+
+    3. **Add Conditional Navigation**
+    - On the target page’s **Page Load**, add a **Conditional Action**:
+        - If `hasCompletedOnboarding == false` → Navigate to the onboarding page.
+
+    :::tip
+    Use `Local State` for session-only checks; use `Persisted` for cross-session logic.
+    :::
 
 ## Global State
 

docs/intro/ff-ui/builder.md

@@ -13,6 +13,26 @@ keywords: [App Builder, FlutterFlow, UI, Design]
 On opening the project, you'll see the App Builder, which consists of four main sections: 
 [Navigation Menu](#navigation-menu), [Toolbar](#toolbar), [Canvas](#canvas-area), and [Properties Panel](#properties-panel).
 
+:::warning[Editor Performance Does Not Affect App Builds]
+
+Slow performance in the FlutterFlow editor—such as UI lag or long loading times—may occur in large projects or long sessions, but **this does not impact the performance of your final app build**.
+
+Editor slowness is typically caused by:
+- Large projects with many pages or custom functions.
+- Long text blocks typed directly into the editor.
+- Accumulated browser cache from extended sessions.
+
+To improve responsiveness:
+- Draft long content externally before pasting into the editor.
+- Restart your browser regularly.
+- Use the macOS app version for better UI performance.
+- Close unused pages or widgets to free up memory.
+
+The compiled app’s performance depends on your app logic, code efficiency, and device resources—not the speed of the editor environment.
+
+:::
+
+
 ![navigation-menu.avif](imgs/navigation-menu.avif)
 
 ## Navigation Menu
@@ -54,4 +74,5 @@ elements on the canvas. It allows you to add [Actions](../../resources/control-f
 The Properties Panel will vary slightly depending on the entity you have selected. To explore the details of each Properties Panel, click on the following:
 
 - **[Page Properties](../../resources/ui/pages/pages-properties.md)** (when you have selected a Page)
-- **[Widget Properties](../../resources/ui/widgets/widget-properties.md)** (when you have selected any widget, including built-in components)
+- **[Widget Properties](../../resources/ui/widgets/widget-properties.md)** (when you have selected any widget, including built-in components)
+

docs/intro/ff-ui/canvas.md

@@ -18,6 +18,24 @@ It allows zoom level adjustments and previews in light or dark mode. It also inc
 
 This is the canvas of the device screen where you can build the user interface. You can customize the screen by adding widgets using drag and drop from the [Widget Palette](../../intro/ff-ui/widget-palette.md) and by applying properties present in the [Properties Panel](../../intro/ff-ui/builder.md#properties-panel).
 
+### Troubleshooting Copy-Paste Issues
+
+If you're unable to copy and paste widgets on the Canvas, the issue may be due to clipboard permissions in your browser.
+
+Follow these steps 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 again.
+
+    ![](imgs/20250430121511630414.png)
+
+    :::tip
+    If you're using Firefox, Safari, or Edge, check that browser’s permission settings to enable clipboard access.
+    :::
+
+
 ## Show or hide Navigation Menu
 
 From here, you can open or close the 

docs/resources/control-flow/backend-logic/backend-query/update-user-record-from-email-input.md

@@ -0,0 +1,50 @@
+---
+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.
+
+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)**
+:::

docs/resources/control-flow/create-a-submenu-using-local-state.md

@@ -0,0 +1,46 @@
+---
+keywords: ['menu', 'submenu', 'local state']
+slug: /create-a-submenu-using-local-state
+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.
+
+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)
+:::
+
+![](functions/img/20250430121319778896.gif)

docs/resources/data-representation/app-state.md

@@ -127,4 +127,23 @@ Storing large or complex data types like documents in App State could lead to **
 
 If you need to work with such data types, it's recommended to store them in Page or Component state instead.
 </p>
+
+<summary>
+Why is the data type list empty when creating an App State variable?
+</summary>
+<p>
+If you don’t see any data types when trying to create an App State variable, it's likely because <strong>Deep Linking is disabled</strong> in your project settings.
+
+To fix this:
+
+1. Open your FlutterFlow project.
+2. Go to <strong>Settings > App Details</strong>.
+3. Scroll to the <strong>Deep Linking & Route</strong> section.
+4. Enable the <strong>Deep Linking</strong> toggle.
+
+<img src="../assets/20250430121217509964.png" alt="Enable Deep Linking" />
+
+Once Deep Linking is enabled, the list of available data types should appear when creating or editing an App State variable.
+</p>
+
 </details>