diff --git a/docs/ff-concepts/adding-customization/configuration-files.md b/docs/ff-concepts/adding-customization/configuration-files.md index 0249d2cf..6c623eb5 100644 --- a/docs/ff-concepts/adding-customization/configuration-files.md +++ b/docs/ff-concepts/adding-customization/configuration-files.md @@ -278,7 +278,7 @@ This registers `NewScreenActivity` so the system knows it exists. **Example 2: Requesting Permissions** -If your app requires access to restricted resources such as wake locks (to keep the device awake) or audio recording, you must declare the necessary permissions in `AndroidManifest.xml` by [manually editing](#option-2-manual-edit-mode) the file. **Tip:** You can also add custom permissions directly through the [**Permission Settings**](../../resources/projects/settings/project-setup.md#adding-custom-permission) in FlutterFlow. +If your app requires access to restricted resources such as wake locks (to keep the device awake) or audio recording, you must declare the necessary permissions in `AndroidManifest.xml` by [manually editing](#option-2-manual-edit-mode) the file. **Tip:** You can also add custom permissions directly through the [**Permission Settings**](../../resources/projects/settings/project-setup.md#adding-a-custom-permission) in FlutterFlow. ```xml NSLocationWhenInUseUsageDescription @@ -855,4 +855,4 @@ Additionally, your Library Project can pass values (like API keys) into those sn This makes Libraries incredibly powerful and enables easy integration of tools like **PostHog** (analytics), **Sentry** (crash reporting), **CleverTap**, **flutter_local_notifications**, **flutter_nfc_kit**, and many more directly from the Marketplace.

- \ No newline at end of file + diff --git a/docs/resources/projects/settings/imgs/fix-align-issues.avif b/docs/resources/projects/settings/imgs/fix-align-issues.avif new file mode 100644 index 00000000..b01378b3 Binary files /dev/null and b/docs/resources/projects/settings/imgs/fix-align-issues.avif differ diff --git a/docs/resources/projects/settings/project-setup.md b/docs/resources/projects/settings/project-setup.md index aa762d49..a32bf63e 100644 --- a/docs/resources/projects/settings/project-setup.md +++ b/docs/resources/projects/settings/project-setup.md @@ -3,7 +3,7 @@ slug: project-setup title: Project Setup tags: [Setup, Permissions, Multiple Languages] keywords: [permission message, enabling platforms, support multiple languages, adding custom permissions, walkthrough, development environments] -description: Learn how to setup your project in FlutterFlow. +description: Learn how to set up your project in FlutterFlow. sidebar_position: 1 --- import Tabs from '@theme/Tabs'; @@ -11,17 +11,17 @@ import TabItem from '@theme/TabItem'; # Project Setup -Setting up project in FlutterFlow ensures that your app is prepared to provide a robust and user-friendly experience across different platforms and regions. By adding necessary permissions, enabling multiple platforms, and supporting multiple languages, you can expand your app's reach and functionality while maintaining high standards of performance and user satisfaction. +Setting up a project in FlutterFlow ensures that your app is prepared to provide a robust and user-friendly experience across different platforms and regions. By adding necessary permissions, enabling multiple platforms, and supporting multiple languages, you can expand your app's reach and functionality while maintaining high standards of performance and user satisfaction. ## Permissions -In your app, you must be open and get upfront consent before using the user's private information, such as location, health data, photos, or any information that reveals their identity via the camera and/or microphone. This is done by adding a permission flow just before accessing the data. +In your app, you must be transparent and get upfront consent before using the user's private information, such as location, health data, photos, or any information that reveals their identity via the camera and/or microphone. This is done by adding a permission flow just before accessing the data. -We automatically add permissions whenever you add features that access the user's private data. The only thing left for you is to add the permission messages. Adding permission messages helps users clearly understand how your app will use the data it is requesting for. +We automatically add permissions whenever you add features that access the user's private data. You still need to add permission messages. These messages help users clearly understand how your app will use the data it is requesting. :::info -- You can't show the custom permission message on Android, so the message(s) added here are displayed only on iOS devices. To write a clear permission message, please visit the help guide [**here**](https://developer.apple.com/design/human-interface-guidelines/patterns/accessing-private-data/#requesting-permission). -- You can't turn off the permission (with messages) added by us to prevent issues that might come after submitting your app for review. +- You cannot show custom permission messages on Android, so the messages added here are displayed only on iOS devices. To write a clear permission message, see [**Apple's Human Interface Guidelines**](https://developer.apple.com/design/human-interface-guidelines/patterns/accessing-private-data/#requesting-permission). +- You cannot turn off permissions (with messages) added by FlutterFlow. This helps prevent issues during app review. - See how to [**request permission**](#request-permission-action). ::: @@ -31,33 +31,33 @@ We automatically add permissions whenever you add features that access the user' -### Adding permission message +### Adding a permission message -Although we add some default permission messages, you must change them to clearly mention the reason for asking the permission(s). +Although we add some default permission messages, you must update them to clearly explain the reason for requesting each permission. -To add permission message: +To add a permission message: -1. Select **Settings & Integrations** from the left Navigation Menu. -2. Under the **Project Setup**, select **Permissions**. -3. Here you can customize the permission message for each permission. For the permissions that are not added/enabled yet, you can turn on the toggle and enter the message. On running the app, this message will be displayed inside the standard alert dialog (between your app name and action buttons). +1. Select **Settings & Integrations** from the left navigation menu. +2. Under **Project Setup**, select **Permissions**. +3. Customize the permission message for each permission. For permissions that are not yet added or enabled, turn on the toggle and enter the message. When the app runs, this message appears inside the standard alert dialog, between your app name and the action buttons. -For the already added permission (which you can't turn off), if you leave the message empty, the message displayed as a hint will be shown inside the permission dialog. +For permissions that are already added and cannot be turned off, leaving the message empty will use the hint text shown in the permission dialog. ![Adding permission message](../imgs/add-permission.png) -### Adding custom permission +### Adding a custom permission -Sometimes you might add a feature (probably using Custom Widget or Custom Action) that requires user permission and is not present in the list here—for example, adding a speech recognition feature to your project. In that case, you can add the required permission along with the message for the Android and/or iOS from here. +Sometimes you might add a feature, such as a custom widget or custom action, that requires a permission that is not listed here. For example, you may add a speech recognition feature to your project. In that case, you can add the required permission and message for Android and/or iOS from here. -To add custom permission: +To add a custom permission: -1. Select **Settings & Integrations** from the left Navigation Menu. -2. Under the **Project Setup**, select **Permissions**. -3. Click on the **+ Add Permission**. -4. Inside the **iOS Permission key** enter the value (e.g. *NSSpeechRecognitionUsageDescription*, *NSMicrophoneUsageDescription* etc.). -5. Inside the **Android Permission name** enter the value (e.g., *RECORD_AUDIO*, *CAMERA*, etc.). -6. Also, enter the **Permission Message** that describes the exact usage of data. -7. Click on the Done icon on the right. +1. Select **Settings & Integrations** from the left navigation menu. +2. Under **Project Setup**, select **Permissions**. +3. Click **+ Add Permission**. +4. Enter the **iOS Permission key** value, such as *NSSpeechRecognitionUsageDescription* or *NSMicrophoneUsageDescription*. +5. Enter the **Android Permission name** value, such as *RECORD_AUDIO* or *CAMERA*. +6. Enter the **Permission Message** that describes exactly how the data is used. +7. Click the Done icon on the right.

-:::info[Adding translation for messages] +:::info[Adding translations for permission messages] You can also add multilingual permission messages by following the instructions [**here**](../../../ff-concepts/localization-accessibility/localization.md). ::: @@ -94,11 +94,11 @@ You can also add multilingual permission messages by following the instructions Using this action, you can request permission before accessing the user's private information, such as location, voice, contacts, and photos. -This action is helpful when you add a custom widget or action that accesses the user's personal information and does not have an inbuilt permission mechanism. +This action is helpful when you add a custom widget or action that accesses the user's personal information and does not have a built-in permission mechanism. :::info -- Request permission only works on a mobile platform. -- There won't be any dialog shown for the *Bluetooth* permission. +- Request permission only works on mobile platforms. +- No dialog is shown for the *Bluetooth* permission. ::: @@ -160,28 +160,21 @@ This action is helpful when you add a custom widget or action that accesses the #### Adding Request Permission action -Follow the steps below to add this action to any widget. +To add this action: -1. Select the **Widget** (e.g., Button) on which you want to add this action. -2. Select **Actions** from the Properties panel (the right menu), and click **Open**. This will open an **Action flow Editor** in a new popup window. If it's the first action, click **+ Add Action** button. Otherwise, click the "**+**" button below the previous action tile and select **Add Action**. - 1. Search and select the **Request Permissions** (under *Alerts/Notifications*) action. - 2. Set the **Permission Type** to the one you need. Only the permissions for which the message is present are shown here. - 3. Now you must check if the permission was granted or rejected. You can do so by adding the conditional action. To do so, click the "**+**" button below the previous action tile and select **Add Conditional**. - 4. From the **Set Variable** menu, select **Permission > Permission name** (this should be the permission you requested for). - 1. The **TRUE** section represents success, meaning permission was granted. Here you can add any action that informs users or access their data. - 2. The **FALSE** section represents failure, meaning permission was denied. Here you can add any action that informs users about the permission they have denied. - 5. Click **Close**. +1. Add a new action and select **Request Permissions** under **Alerts/Notifications**. +2. Set the **Permission Type**. Only permissions with a configured permission message appear here. +3. Add a [conditional action](../../control-flow/functions/conditional-logic.md#conditional-actions) to check the result. Set the condition variable to **Permission > Permission name** for the permission you requested. +4. Add the next actions under **TRUE** if permission is granted, or under **FALSE** if permission is denied. Then click **Close**. - -
-

- - -![adding-request-permission-action-flow](../imgs/adding-request-permission-action-flow.avif) -

- - ---- + ## 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. +By default, the generated project can run on Android, iOS, and the Web without any additional effort. However, to run your app on desktop, you need to enable a platform (e.g., macOS, Windows, Linux) from this page. ### Advanced Android Settings @@ -220,7 +206,7 @@ By default, the generated project can run on Android, iOS, and the Web without a ### Advanced iOS Settings -- **Disable iPad Support:** If the app is specifically designed for an iPhone and doesn't provide a good user experience on an iPad, you might want to trun on this setting. +- **Disable iPad Support:** If the app is specifically designed for an iPhone and doesn't provide a good user experience on an iPad, you might want to turn on this setting. - **Minimum iOS Version**: This specifies the lowest version of iOS that your app can run on. ### Advanced Web Settings @@ -235,9 +221,8 @@ This applies only to the deployment platform options, not to the FlutterFlow Des ::: ## Multiple Languages -To support multiple languages in your app, refer [here](../../../ff-concepts/localization-accessibility/localization.md). +To support multiple languages in your app, refer to the [localization guide](../../../ff-concepts/localization-accessibility/localization.md). ---- ## Walkthroughs @@ -251,7 +236,7 @@ For example, consider a news article app. When a new user opens the app for the height: 0, width: '100%'}}> -
-

- - -
- -
-

- - - -Here's how you do it: +When a walkthrough is added on a page, you'll see the following types of actions, also called callbacks, and you can choose any of them to add actions under it. -1. Open the page, select **Actions** from the Properties panel (the right menu), and click **Open**. This will open an **Action Flow Editor** in a new popup window. -2. Select **On** **Walkthrough Complete** or **On Walkthrough Skip** and add actions under it. +- **On Walkthrough Complete**: Actions added here run when the user finishes all the steps of the walkthrough. +- **On Walkthrough Skip**: Actions added here run when the user chooses to skip the walkthrough. -
- -
-

### Video guide @@ -491,38 +387,15 @@ If you prefer watching a video tutorial, here's the one for you: ### FAQs
-How do I fix when walkthrough misaligns on a widget, not focusing on the component? +How do I fix a walkthrough that is misaligned or not focusing on the correct widget?

This issue typically arises when a widget's animation and the walkthrough start simultaneously. As the walkthrough initiates, it captures the widget's initial position before the animation completes. Consequently, after the animation concludes, the widget may have shifted to a different location, leading to misalignment. ![Misaligned focus example](../imgs/misaligned-focus-example.png) -To resolve this, simply add a delay ([Wait](../../../resources/control-flow/time-based-logic/wait-action.md) action) before initiating the walkthrough. **Remember,** the wait duration must be equal to or greater than the duration of the animation. +To resolve this, simply add a delay ([Wait](../../../resources/control-flow/time-based-logic/wait-action.md) action) before initiating the walkthrough. Make sure the wait duration is equal to or greater than the duration of the animation. -

- -
+![fix-align-issues](imgs/fix-align-issues.avif)

@@ -533,4 +406,3 @@ To resolve this, simply add a delay ([Wait](../../../resources/control-flow/time We are aware of a limitation where widgets that are not visible on a page (i.e., you need to scroll down to see them) may not be highlighted. We are actively working to resolve this issue. As a temporary workaround, you can try placing the widget in an area that is visible without scrolling. We appreciate your patience and hope to have a fix soon!

-