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

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

@@ -52,6 +52,17 @@ You can also access media files within your app that are stored temporarily in y
 
 ![dm-local-upload.avif](imgs/dm-local-upload.avif)
 
+:::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.
+:::
+
 ## AudioPlayer
 
 The **AudioPlayer** widget allows you to integrate audio playback into your apps. You can play audio from both uploaded assets and external URLs. Refer to the [**Displaying Media**](#media-types) section for more details on accessing media.

docs/ff-concepts/navigation-routing/create-a-submenu-using-local-state.md

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

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

@@ -6,6 +6,7 @@ tags: [Auth Actions, Authentication, Firebase]
 sidebar_position: 1
 keywords: [FlutterFlow, Auth Actions, Authentication, Firebase]
 ---
+
 # Common Auth Actions
 
 Here's a list of common authentication actions:
@@ -22,6 +23,35 @@ Follow the steps below to add this action:
 
 ![logout](../imgs/logout-action.png)
 
+## Login [Action]
+
+The Login action allows users to authenticate and gain access to your app. Login behavior can differ based on the provider you configure (e.g., email/password, Google, Apple, phone number). Each provider has its own setup, but they all share the same underlying action to sign in users.
+
+You typically add the login action to a button (e.g., "Login" or "Sign In") that collects user credentials via TextFields or third-party authentication triggers.
+
+## 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,106 @@
+---
+keywords: ['device', 'address', 'current']
+slug: /integrations/maps/convert-device-location-to-address
+title: Convert Device Location to Address
+---
+
+# Convert Device Location to Address in FlutterFlow
+
+This guide is part of the **[Geocoding in FlutterFlow](/geocoding)** series.  
+It focuses on **reverse geocoding**—turning a device’s latitude and longitude into a readable address (such as city or street name).
+
+You can achieve this in FlutterFlow using either:
+
+- **The Google Maps Geocoding API** (via API Calls)
+- **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/ff-integrations/maps/geocoding.md

@@ -0,0 +1,57 @@
+---
+slug: /integrations/maps/geocoding
+title: Geocoding in FlutterFlow
+keywords: ['geocoding', 'reverse geocoding', 'maps', 'location', 'address']
+---
+
+# Geocoding in FlutterFlow
+
+**Geocoding** is the process of converting between human-readable addresses (like “1600 Amphitheatre Parkway, Mountain View, CA”) and geographic coordinates (latitude and longitude).
+
+FlutterFlow supports geocoding through **custom API calls** and **custom code actions**, giving you flexibility to choose the approach that works best for your app.
+
+**Types of Geocoding**
+
+There are two common types of geocoding:
+
+1. **Forward Geocoding**  
+   Converting an address into geographic coordinates.  
+   *Example:* `"Paris, France"` → `(48.8566, 2.3522)`
+
+2. **Reverse Geocoding**  
+   Converting geographic coordinates into an address.  
+   *Example:* `(37.4221, -122.0841)` → `"1600 Amphitheatre Parkway, Mountain View, CA"`
+
+**Approaches in FlutterFlow**
+
+You can implement geocoding in FlutterFlow in two main ways:
+
+1. **Google Maps Geocoding API**
+
+  - Uses the official Google Maps API for reliable, global geocoding.
+  - Requires a Google Cloud project and API key.
+  - Works via a standard API Call in FlutterFlow.
+  - Best for:
+    - Apps with existing Google Maps integrations.
+    - Large-scale or high-accuracy location services.
+
+  See: **[Google Maps Geocoding API Documentation](https://developers.google.com/maps/documentation/geocoding)**
+
+2. **`geocoding` Dart Package (Custom Code)**
+
+  - Uses Flutter’s [`geocoding`](https://pub.dev/packages/geocoding) package for native geocoding.
+  - Works entirely offline for some lookups (depending on platform and data availability).
+  - Implemented via a custom action in FlutterFlow.
+  - Best for:
+    - Apps that don’t want to rely on external APIs.
+    - Simpler geocoding needs.
+
+:::tip[Related Guides]
+- [Convert Device Location to Address](/convert-device-location-to-address) — Step-by-step guide for reverse geocoding a device’s coordinates.
+- (Coming soon) Forward Geocoding with FlutterFlow — Learn how to convert an address into coordinates.
+:::
+
+
+:::tip
+If your app already uses Google Maps for displaying locations, the Google API method will be the most seamless. If you want a code-based approach that avoids API calls, the `geocoding` package is a good alternative.
+:::

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