Comment on page

Basic Troubleshooting Guide

This is a general troubleshooting or debugging guide for any issues that occur with FlutterFlow projects.

Detecting issue

If your project fails to run in Run/Test Mode, download APK/Code, or Github push, it may be due to some issue with any widget or configuration in your project. We have enhanced our issue detection so that you know what is causing the problem.
When we identify the issue, we log it in a browser's debug console or display it in a popup. If you don't see any popups and want to figure out what's wrong, you can open the logs.
To open the debug logs, run your app in Run/Test mode and select:
For Google Chrome
  • Windows: F12 or Ctrl+Shift+J
  • Mac: F12 or ⌘+Option+J
For Safari
Go to Preferences/Settings > Advanced and enable the "Show Develop menu". Then, use ⌘+Option+C to open the console.
This will open the console log, and any errors will be highlighted in red color.
Error in the browser's console log
If you see a popup, open the red-colored section (click Read More), and at the bottom, you will see the exact widget or error causing the build or download failure.
Let's see a couple of examples of what you might encounter while building your app:

Example 1

Suppose you have a Text widget and added an action that is incomplete. When you try to download the project in such a situation, you might see the following:
Detecting issue -1
To track down the error-causing widget in the widget tree, start reading the widget list (from top to bottom in a popup) and locate the widget using its child number. For example, when a widget is displayed as Child 1, it will be the first child of its previous widget (see the widget in a popup). And when it is shown as Child 2,3, and so on, it will be the sibling widget of Child 1.
If you have a practice of naming the widget, it will be straightforward to track it down (as we'll display the exact widget name). Here is how it looks:
Detecting issue -2
To find out what caused the widget to fail, you can check errors in the project issues.

Example 2

Let's say you have added a custom widget that works fine. But while modifying it, you made some typo in the code, and now it shows this:
Error while building the app
The second Error: line clearly mentions that there is some issue with a method name in a custom code.

Frontend (UI builder) issues

The following steps will help you fix the issues with the UI builder inside FlutterFlow.
  • In case of overflowing text, it's recommended that you wrap the Text Widget inside an Expanded widget. To do this, click on the Expand option in the alignment properties of the Text Widget.
  • If you notice scaling issues with widgets, please ensure that you set percentage values for the dimensions of the widgets.
  • When renaming a custom widget or custom action, please make sure that you rename the widget from the code as well.
  • Please ensure not to upload duplicate media assets in the Project Media Assets.
  • Make sure you've entered the correct API keys when using third-party integrations.
  • Clear your browser cache and history if FlutterFlow seems to be laggy.
  • Change the browser or use incognito/private browsing mode if you cannot start from the login screen when using the Test/Run mode.

Backend issues

The following steps will help you fix the issues like Grey Screen error, Infinite Loading screen, Firestore record creating error, etc. These common steps are recommended to perform for any issue faced with the backend.
  • Ensure you have added the following cloud permissions for [email protected]: Editor, Cloud Functions Admin, and Service Account User. Here are instructions on how to do this.
  • Update your Firebase rules. Here are instructions on how to do this.
  • Ensure all the data field types and names match in Firestore and FlutterFlow. Here are instructions on how to do this.
  • If you have already completed the Firebase setup, remove the existing permissions and complete a new setup from scratch. Here are instructions on how to do this.
  • Make sure you've added to Authorized Domains under the authentication tab in Firebase.
  • Ensure you are on the latest version of FlutterFlow by selecting (ctrl/cmd + R). After you have done this, clear your browser cache and log out/into FlutterFlow.
  • To use Cloud Functions like Push Notifications, Payments, etc. Please make sure your Firebase project is on a Blaze Plan.