Skip to content
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
updated content, merged articles, updated asset
  • Loading branch information
mrdavidorok committed Aug 19, 2025
commit 7bc0f7c47601c9706e5de96f02563cdd916b7fcd

This file was deleted.

18 changes: 18 additions & 0 deletions docs/ff-integrations/authentication/firebase-auth/auth-actions.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,24 @@ The Login action allows users to authenticate and gain access to your app. Login

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.

**Supported Providers**
The following authentication providers can be used with the **Login [Action]**. Each link will guide you to the setup and usage details:

- **[Email Login](/integrations/authentication/firebase/email-login)**
- **[Google OAuth Login](/integrations/authentication/firebase/google-oauth-login#enable-google-sign-in-provider-in-firebase)**
- **[Apple Login (Supabase)](/integrations/authentication/supabase/apple)**
- **[Phone Login](/integrations/authentication/firebase/phone)**
- **[Facebook Login](/integrations/authentication/firebase/facebook)**
- **[Anonymous Login](/integrations/authentication/firebase/anonymous-login)**
- **[GitHub Login](/integrations/authentication/firebase/github#2-adding-github-login-action)**
- **[JWT Token Login](/integrations/authentication/firebase/jwt-auth#1-add-login-api)**
- **[Custom Auth Login](/integrations/authentication/custom-authentication)**
- **[Supabase Auth Login](/integrations/authentication/supabase/initial-setup)**

:::note
Each provider requires its own initial setup (e.g., enabling in Firebase or Supabase, configuring OAuth keys). Once configured, all providers use the same **Login [Action]** to sign in the user.
:::

## 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.
Expand Down
106 changes: 0 additions & 106 deletions docs/ff-integrations/maps/convert-device-location-to-address.md

This file was deleted.

103 changes: 99 additions & 4 deletions docs/ff-integrations/maps/geocoding.md
Original file line number Diff line number Diff line change
Expand Up @@ -111,10 +111,105 @@ You can implement geocoding in FlutterFlow in two main ways:
}
```

:::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.
:::
## Step-by-step guide for reverse geocoding a device’s coordinates.

This guide 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.


:::tip
Expand Down
33 changes: 16 additions & 17 deletions docs/intro/ff-ui/builder.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,23 +15,6 @@ On opening the project, you'll see the App Builder, which consists of four main

![navigation-menu.avif](imgs/navigation-menu.avif)

:::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

The Navigation Menu, located on the left side of the builder, allows you to switch between various FlutterFlow features. These include designing the UI, managing databases, setting up API, adjusting app settings, adding integrations, and more.
Expand Down Expand Up @@ -73,3 +56,19 @@ The Properties Panel will vary slightly depending on the entity you have selecte
- **[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)

:::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.
:::
4 changes: 1 addition & 3 deletions docs/resources/ui/widgets/basic-widgets/text.md
Original file line number Diff line number Diff line change
Expand Up @@ -143,9 +143,7 @@ When building responsive layouts, text may overflow its container if not properl
6. **Optional: Handle Overflow Gracefully**
You can set the **Overflow** property to values like `ellipsis`, `clip`, or `fade` to determine how excess text is handled.

![wrap-text-inside-row](../built-in-widgets/imgs/20250430121501151202.png)

![wrap-text-inside-container](../built-in-widgets/imgs/20250430121501151203.png)
![wrap-text-inside-row and inside container](../built-in-widgets/imgs/20250430121501151202.png)

:::tip
Wrapping long text in a `Row` requires the Text widget to be inside an `Expanded` or `Flexible` widget.
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
43 changes: 42 additions & 1 deletion docs/resources/ui/widgets/composing-widgets/composing-widgets.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,4 +37,45 @@ Lazy loading means that the `ListView` only builds and renders the items that ar

:::info[List & Grids]
Learn about the advanced properties of **[Lists & Grids](list-grid.md)**.
:::
:::

**Example: Creating 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)
:::

![](../built-in-widgets/imgs/20250430121319778896.gif)