diff --git a/docs/accounts-billing/account-management.md b/docs/accounts-billing/account-management.md index c0884fbe..82001401 100644 --- a/docs/accounts-billing/account-management.md +++ b/docs/accounts-billing/account-management.md @@ -83,3 +83,25 @@ To create an API token tied to your account: 1. Navigate to your [account page in FlutterFlow](https://app.flutterflow.io/account). 2. Near the bottom of the page, click **Create Token** + +## FAQs + +
+Why can't I log in to the FlutterFlow community with my FlutterFlow account? + +The FlutterFlow community is hosted on a separate platform and requires its own login credentials. +Your FlutterFlow account does not automatically grant access to the community. + +
+ +
+How do I join the FlutterFlow community? + +1. On the **Dashboard** screen, click **Resources**. +2. Select **Join Community**. +3. Check your inbox for an invitation email from **no-reply@circle.so**. +4. Select **Accept the invitation** in the email and complete the account setup. + + ![Community Invitation Email](imgs/20250430121510782041.png) + +
\ No newline at end of file diff --git a/docs/accounts-billing/imgs/20250430121510782041.png b/docs/accounts-billing/imgs/20250430121510782041.png new file mode 100644 index 00000000..51fd23f9 Binary files /dev/null and b/docs/accounts-billing/imgs/20250430121510782041.png differ diff --git a/docs/ff-concepts/adding-customization/imgs/20250430121358899145.png b/docs/ff-concepts/adding-customization/imgs/20250430121358899145.png new file mode 100644 index 00000000..cc0a6fe2 Binary files /dev/null and b/docs/ff-concepts/adding-customization/imgs/20250430121358899145.png differ diff --git a/docs/ff-concepts/adding-customization/import-flutter-packages.md b/docs/ff-concepts/adding-customization/import-flutter-packages.md new file mode 100644 index 00000000..bffa6656 --- /dev/null +++ b/docs/ff-concepts/adding-customization/import-flutter-packages.md @@ -0,0 +1,43 @@ +--- +keywords: ['flutter', 'package', 'import', 'custom code', 'pub.dev'] +slug: /concepts/custom-code/import-flutter-packages +title: Import Flutter Packages +--- + +# Import Flutter Packages + +Flutter packages extend app functionality by adding dependencies hosted on **[pub.dev](https://pub.dev)**. These can be used in Custom Widgets and Custom Actions to introduce new features or libraries into a project. + +This guide explains how to add a package dependency and import it into your custom code. + +:::info[Prerequisites] +- Access to **[pub.dev](https://pub.dev)**. +- An existing **Custom Widget** or **Custom Action** in your project. +::: + +## Steps to Add a Package Dependency + +1. Open **[pub.dev](https://pub.dev)** and search for the desired package. +2. Copy the **package name and version** by selecting the **Copy** icon next to the dependency string. + + ![](imgs/20250430121358899145.png) + +3. In FlutterFlow, open the **Custom Widget** or **Custom Action** editor. +4. Paste the copied dependency into the **Required Pubspec Dependencies** field. + ```yaml + package_name: ^version +5. 5. If no version is specified, FlutterFlow uses the latest version available on pub.dev. + +Steps to Import the Package: + + 1. On the pub.dev package page, select the Installing tab. + + 2. Under the Import it section, copy the provided import statement. + + 3. Paste the import statement at the top of your Custom Widget or Custom Action code. + +:::note +- Ensure the package supports Flutter Web. Otherwise, it will not run in Run Mode or Test Mode. +- After adding new parameters in a Custom Widget, compile it before use. +- A Custom Widget or Action cannot be deleted if it is currently being used in the app. Remove all references before deleting. +::: \ No newline at end of file diff --git a/docs/ff-integrations/firebase/connect-to-firebase-setup.md b/docs/ff-integrations/firebase/connect-to-firebase-setup.md index 3004ed81..ff5944c0 100644 --- a/docs/ff-integrations/firebase/connect-to-firebase-setup.md +++ b/docs/ff-integrations/firebase/connect-to-firebase-setup.md @@ -177,3 +177,25 @@ If you want to deploy [Cloud Functions](https://firebase.google.com/products/fun 2. Select **Purchase**. If this is your first time enabling billing, you will be taken to a new page to provide your payment information. Otherwise, you can set a project budget. Please see [this link](https://firebase.google.com/pricing) for additional information on Firebase pricing. Alt text + + +## FAQs + +
+Does FlutterFlow generate SHA certificates automatically? + +Yes. When using the **Automatic Firebase Setup** feature, FlutterFlow automatically generates the required **SHA certificates** and stores them in your project's app settings within Firebase. + +
+ +
+Can I manually generate and replace SHA certificates? + +Yes. If you prefer to manage certificates manually, you can generate and replace SHA certificates by following Firebase's official instructions: + +1. Open your **Firebase Project Settings**. +2. Navigate to the **Your apps** section. +3. Add or replace the **SHA-1** and **SHA-256** keys. +4. Re-download the updated `google-services.json` or `GoogleService-Info.plist` and upload it to your FlutterFlow project. + +
diff --git a/docs/resources/projects/how-to-collaborate-on-projects.md b/docs/resources/projects/how-to-collaborate-on-projects.md index f7f49c21..001652b1 100644 --- a/docs/resources/projects/how-to-collaborate-on-projects.md +++ b/docs/resources/projects/how-to-collaborate-on-projects.md @@ -90,4 +90,27 @@ understand how the project is evolving and collaborate more efficiently. :::info Teams users can access the last 7 days of project edits, while FlutterFlow Enterprise users can access and download all previous project edits. -::: \ No newline at end of file +::: + +## FAQ + +
+How do I add collaborators or team members to my project? + +It is possible to invite collaborators and manage project team members directly within a project. + +:::warning +A user added to a project will only have access to the features available in their own account plan. +::: + +**Steps to add a team member:** + +1. Select **Settings & Integrations** from the left navigation menu. +2. Under **Project Setup**, select **Team**. +3. Click **Invite User**. A popup will appear to enter the teammate’s email. +4. Enter the **email address** and select **Invite**. +5. If the user is not a FlutterFlow user yet, an invite email will be sent. Their status will remain **Pending** until they create an account. + +![](imgs/20250430121506784010.gif) + +
diff --git a/docs/resources/projects/imgs/20250430121448708197.png b/docs/resources/projects/imgs/20250430121448708197.png new file mode 100644 index 00000000..4ebba77a Binary files /dev/null and b/docs/resources/projects/imgs/20250430121448708197.png differ diff --git a/docs/resources/projects/imgs/20250430121448932578.png b/docs/resources/projects/imgs/20250430121448932578.png new file mode 100644 index 00000000..f532dcc8 Binary files /dev/null and b/docs/resources/projects/imgs/20250430121448932578.png differ diff --git a/docs/resources/projects/imgs/20250430121449131367.png b/docs/resources/projects/imgs/20250430121449131367.png new file mode 100644 index 00000000..54646b93 Binary files /dev/null and b/docs/resources/projects/imgs/20250430121449131367.png differ diff --git a/docs/resources/projects/imgs/20250430121454192491.gif b/docs/resources/projects/imgs/20250430121454192491.gif new file mode 100644 index 00000000..a8d21912 Binary files /dev/null and b/docs/resources/projects/imgs/20250430121454192491.gif differ diff --git a/docs/resources/projects/imgs/20250430121506784010.gif b/docs/resources/projects/imgs/20250430121506784010.gif new file mode 100644 index 00000000..70770a09 Binary files /dev/null and b/docs/resources/projects/imgs/20250430121506784010.gif differ diff --git a/docs/resources/projects/settings/imgs/20250430121448708197.png b/docs/resources/projects/settings/imgs/20250430121448708197.png new file mode 100644 index 00000000..4ebba77a Binary files /dev/null and b/docs/resources/projects/settings/imgs/20250430121448708197.png differ diff --git a/docs/resources/projects/settings/imgs/20250430121448932578.png b/docs/resources/projects/settings/imgs/20250430121448932578.png new file mode 100644 index 00000000..f532dcc8 Binary files /dev/null and b/docs/resources/projects/settings/imgs/20250430121448932578.png differ diff --git a/docs/resources/projects/settings/imgs/20250430121449131367.png b/docs/resources/projects/settings/imgs/20250430121449131367.png new file mode 100644 index 00000000..54646b93 Binary files /dev/null and b/docs/resources/projects/settings/imgs/20250430121449131367.png differ diff --git a/docs/resources/projects/settings/imgs/20250430121454192491.gif b/docs/resources/projects/settings/imgs/20250430121454192491.gif new file mode 100644 index 00000000..a8d21912 Binary files /dev/null and b/docs/resources/projects/settings/imgs/20250430121454192491.gif differ diff --git a/docs/resources/projects/settings/imgs/20250430121506784010.gif b/docs/resources/projects/settings/imgs/20250430121506784010.gif new file mode 100644 index 00000000..70770a09 Binary files /dev/null and b/docs/resources/projects/settings/imgs/20250430121506784010.gif differ diff --git a/docs/resources/projects/settings/project-setup.md b/docs/resources/projects/settings/project-setup.md index 10357d00..6896b49e 100644 --- a/docs/resources/projects/settings/project-setup.md +++ b/docs/resources/projects/settings/project-setup.md @@ -211,6 +211,27 @@ Follow the steps below to add this action to any widget. ## Platforms By default, the generated project can run on Android, iOS, and the Web without any additional effort. However, to run your app on the desktop, you need to enable a platform (e.g., MacOS, Windows, Linux) from this page. +### FAQs + +
+How do I enable FlutterFlow support for Windows? +

+To run your FlutterFlow app on Windows, you must enable Windows platform support inside your project settings. + +**Steps:** +1. Navigate to **Settings & Integrations** from the left navigation menu. +2. Under **Project Setup**, go to **Platforms**. +3. Toggle **Windows** support to enable it. +4. Re-generate and download your FlutterFlow project. +5. Open the project in your local development environment and ensure the Windows target runs successfully. + +:::note +- Ensure you have the necessary Windows build tools installed (**[Flutter Windows setup guide](https://docs.flutter.dev/platform-integration/windows)**). +- Enabling Windows may slightly increase your project size due to additional desktop libraries. +::: +

+
+ ### Advanced Android Settings - **Kotlin Version**: There are various situations where you may need to modify or configure the Kotlin version in your Android project. This could include updating to the latest version, adapting the version to accommodate a specific library or tool, or other specific requirements. To change the default version, enter the value here. @@ -534,3 +555,52 @@ We are aware of a limitation where widgets that are not visible on a page (i.e.,

+
+How do I change the package name of an application in FlutterFlow? + +When you change the package name of your app in **Firebase**, you also need to update it in **FlutterFlow** to keep everything synchronized. + +Follow these steps: + +1. Go to the **Settings and Integrations** page in FlutterFlow. + + ![Settings and Integrations](imgs/20250430121448708197.png) + +2. Click the **edit icon** next to the app and package name field. + + ![Edit Package Name](imgs/20250430121448932578.png) + +3. Enter the new package name or app name, then click the **checkmark icon** to save your changes. + + ![Save Package Name](imgs/20250430121449131367.png) + + :::warning + Make sure the package name in FlutterFlow matches the one registered in Firebase. + If they don’t match, you may run into errors when connecting services. + ::: + +
+ +
+Can I transfer a FlutterFlow project to another user? + +Yes. You can transfer ownership of a project in FlutterFlow to another active user. + +**Important:** This action **cannot be undone**. If you want to regain ownership, the new project owner must transfer the project back to you. + +
+ +
+How do I transfer a project to another user? + +Follow these steps: + +1. Open your project and select **Settings & Integrations** from the left Navigation Menu. +2. Under **Project Setup**, select **Team**. +3. Find the teammate you want to transfer ownership to (they must have an **Active** status). +4. Click on their current role (e.g., **Editor**). +5. In the popup, confirm the transfer by selecting **Yes**. + +![](imgs/20250430121454192491.gif) + +
diff --git a/docs/testing-deployment-publishing/publishing/apple-appstore-deployment.md b/docs/testing-deployment-publishing/publishing/apple-appstore-deployment.md index 89a41f23..63c1fa1f 100644 --- a/docs/testing-deployment-publishing/publishing/apple-appstore-deployment.md +++ b/docs/testing-deployment-publishing/publishing/apple-appstore-deployment.md @@ -301,4 +301,27 @@ Here are the steps you can take to resolve this issue:

+
+Why am I seeing an error about watchOS when deploying to the App Store? + +This error occurs when the **watchOS build option** is enabled for your app’s App ID in the Apple Developer Console. By default, some App IDs may have the **WatchKit App** option checked, which causes deployment issues if your app doesn’t support watchOS. + +
+ +
+How do I turn off the watchOS option for my app? + +To disable the watchOS option for a specific app: + +1. Go to the **[Apple Developer website](https://developer.apple.com/)** and sign in to your account. +2. Click **Certificates, Identifiers & Profiles**. +3. In the left-hand menu, select **App IDs**. +4. Find your app’s **App ID** and click **Edit**. +5. Scroll down to the **WatchKit App** section. +6. Uncheck **Enable for this App ID**. +7. Click **Continue** to save your changes. + +
+ + diff --git a/docs/testing-deployment-publishing/publishing/web-publishing.md b/docs/testing-deployment-publishing/publishing/web-publishing.md index 4a0309c1..fd03f9ea 100644 --- a/docs/testing-deployment-publishing/publishing/web-publishing.md +++ b/docs/testing-deployment-publishing/publishing/web-publishing.md @@ -275,3 +275,66 @@ 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) + +## FAQs + +
+Can I build a web app with FlutterFlow? + +Yes. FlutterFlow generates code that can run as a **Flutter Web application**. + +However, web support in FlutterFlow is **not officially supported yet**, so you may encounter limitations. + +
+ +
+What are the known issues with Flutter Web? + +When running your FlutterFlow project as a web app, you may experience the following issues: + +- Scrolling issues on **iOS Web**. +- **iOS video player** and **YouTube player** may not work correctly. + +
+ +
+Can I deploy a web app directly from FlutterFlow? + +No. You **cannot deploy a web app directly within FlutterFlow**. + +To deploy your project, you’ll need to follow Flutter’s official documentation: +👉 [Deploying Flutter apps to the web](https://flutter.dev/docs/deployment/web#deploying-to-the-web) + +
+ +
+Can you build a PWA or scalable web application with FlutterFlow? + +FlutterFlow enables you to build client-side applications—including dashboards and PWAs—quickly and efficiently. Here’s what you need to know about scalability, reusability, and deployment. + +1. **What is Possible with FlutterFlow?** + + - **Build any client-side app:** Dashboards, internal/external apps, and more. + - **Cross-platform:** Target Android, iOS, Web, macOS, Windows, and Linux thanks to Flutter’s cross-platform capabilities. + - **No vendor lock-in:** Export your code and continue development outside FlutterFlow at any time. + +2. **Productivity & Reusability** + + - **Low-code builder:** Drag-and-drop interface lets you build apps up to 10x faster than traditional development. + - **Design System:** Build themes and reusable components once, then use them across multiple projects. + - **Shared libraries:** Reuse custom code and APIs across projects by adding them to your organization’s shared library. + +3. **Integration & Extensibility** + + - **Third-party integrations:** Use REST APIs or custom code to connect with any service. + - **Reusable components:** Create simple or complex components in the design system and drag them into any project. + +4. **Subscription & Pricing Model** + + - **Developer-based pricing:** Subscription is based on the number of developers, not end users. + - **No runtime charges:** You can have 10 or 10 million users—FlutterFlow does not charge for app usage. + - **Backend costs:** If you use services like Firebase or Supabase, those providers may charge for infrastructure and usage. + +
+ + diff --git a/docs/troubleshooting/assets/20250430121308006359.png b/docs/troubleshooting/assets/20250430121308006359.png new file mode 100644 index 00000000..7079efe8 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121308006359.png differ diff --git a/docs/troubleshooting/assets/20250430121308259919.png b/docs/troubleshooting/assets/20250430121308259919.png new file mode 100644 index 00000000..d2c37a83 Binary files /dev/null and b/docs/troubleshooting/assets/20250430121308259919.png differ diff --git a/docs/troubleshooting/authentication/fix_google_sign-in_issues.md b/docs/troubleshooting/authentication/fix_google_sign-in_issues.md index dad812aa..94f489a8 100644 --- a/docs/troubleshooting/authentication/fix_google_sign-in_issues.md +++ b/docs/troubleshooting/authentication/fix_google_sign-in_issues.md @@ -57,3 +57,24 @@ If Google Sign-In isn’t working after exporting your FlutterFlow app, follow t - When testing Google Sign-In in FlutterFlow before publishing, add your **debug SHA-1** in Firebase. - Then go to `Settings → Firebase` in FlutterFlow and regenerate your config files. ::: + + +## FAQs + +
+Why do I get the error "Cross-Origin-Opener-Policy policy would block the window.closed call." when signing up with Google in FlutterFlow? + +This error usually occurs because your browser is blocking pop-ups. It is common in newly created Chrome profiles or freshly installed Chrome browsers. +
+ +
+How can I fix the error "Cross-Origin-Opener-Policy policy would block the window.closed call." when signing up with Google in FlutterFlow? + +You need to allow pop-ups and redirects for your domain in the browser settings. + +Steps in Chrome: +1. Click the **lock icon** next to the project URL in the address bar. +2. Select **Site settings**. +3. Scroll to **Pop-ups and redirects**. +4. Change the setting to **Allow**. +
\ No newline at end of file diff --git a/docs/troubleshooting/projects/_category_.json b/docs/troubleshooting/projects/_category_.json new file mode 100644 index 00000000..590a2e2a --- /dev/null +++ b/docs/troubleshooting/projects/_category_.json @@ -0,0 +1,3 @@ +{ + "label": "Projects" +} \ No newline at end of file diff --git a/docs/troubleshooting/projects/fix-unsaved-changes-due-to-project-size-limit.md b/docs/troubleshooting/projects/fix-unsaved-changes-due-to-project-size-limit.md new file mode 100644 index 00000000..67b3b6ab --- /dev/null +++ b/docs/troubleshooting/projects/fix-unsaved-changes-due-to-project-size-limit.md @@ -0,0 +1,48 @@ +--- +keywords: ['project size', 'unsaved changes', 'optimize project'] +slug: /troubleshooting/projects/fix-unsaved-changes-due-to-project-size-limit +title: Fix Unsaved Changes Due to Project Size Limit +--- + +# Fix Unsaved Changes Due to Project Size Limit + +When a project exceeds the allowed size limit, changes may fail to save properly. This often appears in the browser console as an error while editing. The project must be optimized to reduce its size before saving can continue. + +:::info[Prerequisites] +- Access to the **browser developer console** (e.g., Chrome DevTools). +- Basic familiarity with project assets, pages, and components. +::: + +## Steps to Check for Project Size Limit + + 1. Press **F12** to open the browser developer console. + + ![Open Developer Console](../assets/20250430121308006359.png) + + 2. Select the **Console** tab. + 3. Perform edits in the project while monitoring for errors. + + ![Console Showing Error](../assets/20250430121308259919.png) + + 4. If an error indicates the project has reached the size limit, optimization is required. + +Follow the steps below to optimize the project: + + 1. Remove unused assets from the **assets folder**. + - Consider uploading large assets to **Firebase Storage** and using their URLs instead. + - Only keep assets offline if absolutely necessary. + + 2. Delete temporary or unused **pages** and **components**. + + 3. Clone the project to store UI elements kept “just in case,” instead of leaving them in the main project. + + 4. Save a new version of the project and remove unnecessary UI elements. + - Needed elements can be retrieved later from older versions or snapshots. + + 5. Convert UI elements reused across the project into **components** to reduce duplication. + + 6. Replace repeated pages with **dynamic layouts** or **modals** that can be reused. + + :::warning + There is no way to increase the maximum project size limit. Projects must be reduced and optimized to save changes successfully. + :::