Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
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
4 changes: 2 additions & 2 deletions docs/ff-concepts/file-handling/displaying-media.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,8 @@ 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**.

![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.

Expand All @@ -61,8 +63,6 @@ To fix this:
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

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.
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
keywords: ['menu', 'submenu', 'local state']
slug: /create-a-submenu-using-local-state
slug: /resources/create-a-submenu-using-local-state
title: Create a Submenu Using Local State
---

Expand Down Expand Up @@ -43,4 +43,4 @@ The `Stack` widget allows placing widgets on top of each other, which is essenti
- [Run Mode Preview](https://app.flutterflow.io/run/LfzBGTaef8WldndHa2x4)
:::

![](functions/img/20250430121319778896.gif)
![](imgs/20250430121319778896.gif)
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -22,6 +23,12 @@ 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
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

adding this after logout action doesnt make sense because this page doesnt have login action.
add a header for login action in the beginning, give a small descr to describe how login actions differ for different providers, and then add it as a subheader to that.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have done that

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

where?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image


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 All @@ -34,7 +41,7 @@ When the **Login Action** fails, a `SnackBar` is shown with the relevant error (
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)
**Customize the SnackBar (Optional)**

1. Select the **Login Action** from your button or trigger.
2. In the **Actions tab**, open the **Action Output** section.
Expand Down
10 changes: 8 additions & 2 deletions docs/ff-integrations/maps/convert-device-location-to-address.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,18 @@
---
keywords: ['device', 'address', 'current']
slug: /convert-device-location-to-address
slug: /integrations/maps/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.
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)**.

Expand Down
57 changes: 57 additions & 0 deletions docs/ff-integrations/maps/geocoding.md
Original file line number Diff line number Diff line change
@@ -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.
:::
2 changes: 1 addition & 1 deletion docs/intro/ff-ui/builder.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ On opening the project, you'll see the App Builder, which consists of four main

:::warning[Editor Performance Does Not Affect App Builds]
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why is it the first thing in the article?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't work on this article. It wasn't written by me
https://docs.flutterflow.io/flutterflow-ui/builder
It was written by Pinkesh

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

again what do you even mean? you're adding info to this file and I'm adding comments on your content addition, not on his content


Slow performance in the FlutterFlow editorsuch as UI lag or long loading timesmay occur in large projects or long sessions, but **this does not impact the performance of your final app build**.
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.
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
keywords: ['email', 'input', 'update']
slug: /update-user-record-from-email-input
slug: /resources/backend-query/update-user-record-from-email-input
title: Update a User Record Using Email Input
---

Expand Down
3 changes: 2 additions & 1 deletion docs/resources/ui/widgets/basic-widgets/text.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
---
tags: [Base Elements]
slug: /resources/ui/widgets/text
title: Text
---

# Text
Expand Down Expand Up @@ -153,7 +154,7 @@ When building responsive layouts, text may overflow its container if not properl
:::

:::info[Additional Resources]
- [Flutter TextOverflow Class](https://api.flutter.dev/flutter/widgets/TextOverflow-class.html)
- [Flutter Text Class](https://api.flutter.dev/flutter/widgets/Text-class.html)
:::


Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
slug: /deployment/apple-app-store-deployment
slug: /publishing/apple-app-store-deployment
title: Apple App Store Deployment
description: Learn how to seamlessly deploy your apps to the Apple App Store using FlutterFlow.
tags: [Apple App Store, Deployment, FlutterFlow, iOS]
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
slug: /deployment/deploy-for-environments
slug: /publishing/deploy-for-environments
title: Deploy for Development Environments
description: Learn how to deploy your apps for development environments.
tags: [Apple App Store, Google Play Store, Deployment, Dev Environments]
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
slug: /deployment/deploy-from-github
slug: /publishing/deploy-from-github
title: Deploy from GitHub
description: Learn how to deploy your apps directly from GitHub branch.
tags: [Apple App Store, Google Play Store, Deployment, GitHub]
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
slug: /deployment/google-playstore-deployment
slug: /publishing/google-playstore-deployment
title: Google Play Store Deployment
description: Learn how to seamlessly deploy your apps to the Google Play Store using FlutterFlow.
tags: [Google Play Store, Deployment, FlutterFlow, Android]
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
slug: /deployment/pre-checks-before-publishing
slug: /publishing/pre-checks-before-publishing
title: Pre-checks Before Publishing
description: Ensure your app is ready for launch with this detailed guide on essential pre-publishing checks.
tags: [Pre-checks, Publishing, Deployment]
Expand Down
66 changes: 28 additions & 38 deletions docs/testing-deployment-publishing/publishing/web-publishing.md
Original file line number Diff line number Diff line change
Expand Up @@ -165,35 +165,6 @@ To view the live version of your app, click the **eye icon** next to the 'Publis

![view-published-site.avif](../imgs/view-published-site.avif)

---

## Embedding a FlutterFlow App in an Iframe

You can embed a published FlutterFlow web app in an `iframe`, but this comes with limitations due to browser security policies and localStorage restrictions.

:::warning
Embedding may cause **limited functionality** if the browser blocks third-party cookies or `localStorage` access.
:::

Follow the steps below to embed:

1. **Enable Third-Party Cookies**
Ensure the browser allows third-party cookies for your app's domain.

2. **Use the Embed Code**
```html
<iframe
src="https://your-flutterflow-app.web.app"
width="100%"
height="1000px"
style="border: none;">
</iframe>
```
Replace your-flutterflow-app.web.app with your actual hosted app URL:
- Embedding may break features that rely on session/local storage.
- Server headers like X-Frame-Options or Content-Security-Policy can prevent iframe usage.
- Major platforms like Google and LinkedIn block iframe embedding for security reasons.

## Adding custom domain

Adding a custom domain to your web app can give it a more professional look and feel and make it easier for your users to remember and find. FlutterFlow allows you to connect your own domain name to your web app and have it up and running in no time. This feature is perfect for those wanting to establish a strong online presence and increase brand awareness.
Expand All @@ -218,8 +189,6 @@ To add a custom domain:
4. Once the domain is connected, hit the **Publish** button again.
![connect-custom-domain.avif](../imgs/connect-custom-domain.avif)

---

## Add custom headers

If you are familiar with HTML, you may set any additional headers (e.g., [style](https://www.w3schools.com/tags/tag_style.asp) and [script](https://www.w3schools.com/tags/tag_script.asp)) that you would like to be used in your published web app. For example, adding inline or external javascript. This will appear inside the head tag of your published app.
Expand All @@ -240,17 +209,12 @@ You can verify the added custom header by opening the inspect element window (**

![custom-header.avif](../imgs/custom-header.avif)

---


## Changing Firebase dynamic link

If you do web deployment and utilize Firebase dynamic links in your app, it's recommended that you update your Firebase Dynamic Links URL scheme. This adjustment is necessary to ensure shared links open correctly on the web. By doing so, your dynamic links will function properly for users across all platforms.

![update-firebase-dynamic-link.avif](../imgs/update-firebase-dynamic-link.avif)

---

## Adding subdomain as Authorized domain (Firebase)

If you are using *Firebase Authentication*, you must add your custom subdomain as an authorized domain in the [Firebase console](https://console.firebase.google.com/). Otherwise, social and phone sign-in will not work.
Expand Down Expand Up @@ -283,8 +247,6 @@ To enable your subdomain as an authorized domain:
</iframe>
</div>

---

## See deployment history

Deployment history is essential for maintaining transparency, accountability, and a clear understanding of how a web application has evolved over time. Each deployment entry in the history includes a timestamp indicating when the deployment occurred.
Expand All @@ -294,3 +256,31 @@ It also display the status of each deployment (e.g., successful, failed). This h
Click **View Full History** to review the previous successful version.

![view-deploy-history.avif](../imgs/view-deploy-history.avif)

## Embedding a FlutterFlow App in an Iframe

You can embed a published FlutterFlow web app in an `iframe`, but this comes with limitations due to browser security policies and localStorage restrictions.

:::warning
Embedding may cause **limited functionality** if the browser blocks third-party cookies or `localStorage` access.
:::

Follow the steps below to embed:

1. **Enable Third-Party Cookies**
Ensure the browser allows third-party cookies for your app's domain.

2. **Use the Embed Code**

```html
<iframe
src="https://your-flutterflow-app.web.app"
width="100%"
height="1000px"
style="border: none;">
</iframe>
```
Replace your-flutterflow-app.web.app with your actual hosted app URL:
- Embedding may break features that rely on session/local storage.
- Server headers like X-Frame-Options or Content-Security-Policy can prevent iframe usage.
- Major platforms like Google and LinkedIn block iframe embedding for security reasons.
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
keywords: ['database', 'clear', 'testing']
slug: troubleshooting/test-mode/prepare-database-before-tests
slug: /running-your-app/prepare-database-before-tests
title: Prepare Database Before Running Tests
---

Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
slug: /testing/local-run
slug: /running-your-app/local-run
title: Local Run
description: Local Run downloads the code locally and gives you the option to use Flutter's Hot Reload to see your changes instantly on a device.
tags: [Local Run, Testing, Hot Reload]
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
slug: /testing/run-your-app
slug: /running-your-app/run-your-app
title: Run your App
description: Discover the essentials of running and testing your FlutterFlow app with this comprehensive guide.
tags: [Run, Testing, FlutterFlow]
Expand Down
Loading