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,122 @@
+---
+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)**
+
+  Example: Forward Geocoding API Call
+
+  **Endpoint:** 
+    ```js 
+    GET https://maps.googleapis.com/maps/api/geocode/json?address=Paris,France&key=YOUR_API_KEY
+    ```
+
+    **Sample Response**
+    ```json
+    {
+      "results": [
+        {
+          "formatted_address": "Paris, France",
+          "geometry": {
+            "location": {
+              "lat": 48.856614,
+              "lng": 2.3522219
+            }
+          }
+        }
+      ],
+      "status": "OK"
+    }
+
+  **FlutterFlow API Call Setup**
+
+    - Method: GET
+    - URL: `https://maps.googleapis.com/maps/api/geocode/json`
+    - Query Parameters:
+      - address → `Paris`,`France` (or variable)
+      - `key` → your Google Maps API key
+
+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.
+
+  **Example: Forward Geocoding with geocoding package**
+
+    ```dart
+      import 'package:geocoding/geocoding.dart';
+      Future<void> getCoordinatesFromAddress(String address) async {
+        try {
+          List<Location> locations = await locationFromAddress(address);
+          if (locations.isNotEmpty) {
+            print('Latitude: ${locations.first.latitude}');
+            print('Longitude: ${locations.first.longitude}');
+          }
+        } catch (e) {
+          print('Error: $e');
+        }
+      }
+    ```
+  **Example: Reverse Geocoding with geocoding package**
+
+    ```dart
+      import 'package:geocoding/geocoding.dart';
+      Future<void> getAddressFromCoordinates(double lat, double lng) async {
+        try {
+          List<Placemark> placemarks = await placemarkFromCoordinates(lat, lng);
+          if (placemarks.isNotEmpty) {
+            final place = placemarks.first;
+            print('${place.street}, ${place.locality}, ${place.country}');
+          }
+        } catch (e) {
+          print('Error: $e');
+        }
+      }
+    ```
+
+:::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/ff-app-state.md

@@ -155,3 +155,28 @@ These functions are automatically generated to provide a convenient and consiste
 :::info[How to create App State variables]
 To learn more about creating and using App State variables in FlutterFlow's UI, check out the[ **App State**](../resources/data-representation/app-state.md) guide.
 :::
+
+**Practical Example: Using Persisted App State for Onboarding**
+
+  You can use Persisted App State variables to control access to certain parts of your app until specific steps are completed.
+
+  For example, you might want to ensure users complete an onboarding flow before they can access the home screen or checkout page.
+
+  1. **Create a Boolean Variable**
+
+    - Go to App Settings > State Management > Persisted Values.
+    - Add a boolean variable, e.g., `hasCompletedOnboarding`, and set its default value to false.
+
+  2. **Update After Onboarding**
+
+    - On the final screen of the onboarding flow, add an Update Persisted Value action.
+    - Set `hasCompletedOnboarding` to `true` when the user finishes onboarding.
+
+  3. **Add Conditional Navigation**
+
+    - On the target page (e.g., Home), add a Page Load action.
+    - Create a Conditional Action:
+      - If `hasCompletedOnboarding == false` → Navigate to the onboarding page.
+
+    Use Local State for checks that only apply during the current session.
+    Use Persisted App State for checks that should work across multiple sessions.

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

@@ -73,7 +73,6 @@ 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.
 :::
 
-
 ## Global State
 
 Global state variables are pieces of information related to the device that are accessible throughout the FlutterFlow app.