From d48feb3cd45ba6a39ee6690cc759b67d4047d5bc Mon Sep 17 00:00:00 2001 From: Pinkesh Date: Thu, 3 Apr 2025 16:44:04 +0530 Subject: [PATCH 1/4] Access variables in config files --- .../configuration-files.md | 92 +++++++++++++++---- 1 file changed, 73 insertions(+), 19 deletions(-) diff --git a/docs/ff-concepts/adding-customization/configuration-files.md b/docs/ff-concepts/adding-customization/configuration-files.md index 2d6cc4dd..57b73f29 100644 --- a/docs/ff-concepts/adding-customization/configuration-files.md +++ b/docs/ff-concepts/adding-customization/configuration-files.md @@ -106,9 +106,7 @@ To add a snippet to native iOS files, navigate to **Custom Code** (from the left :::tip - Snippet insertion isn't available for `main.dart`. Instead, you can directly modify the file using [**Manual Edit Mode**](#option-2-manual-edit-mode). -- You will soon be able to use your Development [**Environment Values**](../../testing-deployment-publishing/development-environments/development-environments.md#environment-values) and [**Library Values**](../../resources/projects/libraries.md#library-values) inside snippets. - - +- You can also use your Development [**Environment Values**](../../testing-deployment-publishing/development-environments/development-environments.md#environment-values) and [**Library Values**](../../resources/projects/libraries.md#library-values) inside snippets. For more details, refer to the [**Include Variables in Native Code**](#include-variables-in-native-code) section. ::: ### Option 2: Manual Edit Mode @@ -151,20 +149,83 @@ Once unlocked, the file stays in manual editing mode until you lock it again. Re - Don’t remove FlutterFlow’s existing entries unless you are sure. It’s safer to only add or modify necessary lines and leave the rest as is. - Use Manual Edit Mode for bulk or complex edits that the snippet can’t easily do, like reordering tags, removing something, or pasting in a large chunk of config. Always verify that the app still builds and runs after such edits. - +- You can also use your Development [**Environment Values**](../../testing-deployment-publishing/development-environments/development-environments.md#environment-values) and [**Library Values**](../../resources/projects/libraries.md#library-values) inside snippets. For more details, refer to the [**Include Variables in Native Code**](#include-variables-in-native-code) section. ::: - +Here, `{{MAPBOX_ACCESS_TOKEN}}` is a file level variable that holds the Environment Value. - - - ## Editable Files FlutterFlow allows editing several key native files. Below, we cover each file’s role, why you might need to edit it, and examples of real-world use cases. @@ -669,7 +723,7 @@ This ensures reflection-based code continues working. - **Testing on Devices:** Especially for anything related to `Info.plist` or entitlements, always test on a real iOS device if possible. Some issues (like missing entitlements or background mode usage) won’t show up in the simulator. Similarly, test Android changes on a device or emulator with a release build – because ProGuard rules effects, for example, only show in release mode. - **Monitoring Logs and Errors:** After making changes, monitor the Xcode console or Android logcat when running the app. If there are misconfigurations, you often get warnings. - **Stay Updated:** FlutterFlow may improve native editing features over time. Keep an eye on FlutterFlow’s docs or community announcements. If they introduce a new easier way, prefer that to manual editing when possible, as it will be more foolproof. -- **Security Consideration:** Remember that anything in these files (especially `Info.plist`, `AndroidManifest.xml`) is essentially public in the distributed app. Don’t assume an API key in `Info.plist` is hidden – it’s not. For keys you must include (maps, etc.), you'll soon be able to securely manage them using [private environment values](../../testing-deployment-publishing/development-environments/development-environments.md#private-environment-values) and easily monitor their usage. +- **Security Consideration:** Remember that anything in these files (especially `Info.plist`, `AndroidManifest.xml`) is essentially public in the distributed app. Don’t assume an API key in `Info.plist` is hidden – it’s not. For keys you must include (maps, etc.), consider using [private environment values](../../testing-deployment-publishing/development-environments/development-environments.md#private-environment-values) and monitoring their usage. ## FAQs From 2f77ba73c74dfc0e06ab68189551cec54e08968b Mon Sep 17 00:00:00 2001 From: Pinkesh Date: Thu, 3 Apr 2025 16:53:55 +0530 Subject: [PATCH 2/4] minor fixes --- .../configuration-files.md | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/docs/ff-concepts/adding-customization/configuration-files.md b/docs/ff-concepts/adding-customization/configuration-files.md index 57b73f29..f431e6e4 100644 --- a/docs/ff-concepts/adding-customization/configuration-files.md +++ b/docs/ff-concepts/adding-customization/configuration-files.md @@ -17,13 +17,13 @@ Here are the key configuration files you can edit: - [**`AndroidManifest.xml`**](#androidmanifestxml-android) – Configures app permissions, metadata, and intent filters for Android. - [**`Info.plist`**](#infoplist-ios)– Manages iOS app settings, including permissions and configurations. -- [**`Entitlements.plist`**](#entitlementsplist-ios) – Defines iOS app privileges like push notifications and Apple Pay. +- [**`Entitlements.plist`**](#entitlementsplist-ios) – Defines iOS app privileges such as, push notifications and Apple Pay. - [**`main.dart`**](#maindart-flutter) – The entry point of your Flutter app, where you can modify app-level logic. - [**ProGuard files**](#proguard-file-android) – Used for code shrinking and obfuscation in Android builds. :::warning -While editing configuration files can unlock advanced functionality, it comes with risks. A small mistake (like a missing XML tag or a wrong key) can cause your app to fail compilation or crash at runtime. Incorrect changes might lead to App Store/Play Store rejections. So, it’s important to note your changes and thoroughly test your app after each edit. +While editing configuration files can unlock advanced functionality, it comes with risks. A small mistake (e.g., a missing XML tag or a wrong key) can cause your app to fail compilation or crash at runtime. Incorrect changes might lead to App Store/Play Store rejections. So, it’s important to note your changes and thoroughly test your app after each edit. In short, edit native code only when necessary, and do so carefully. @@ -35,7 +35,7 @@ FlutterFlow provides two main ways to modify native XML files: [**Add Individual ### Option 1: Add Individual Snippets -**Snippets** are small pieces of code that you can inject into the native files at predefined locations. Instead of opening the whole file to edit, you provide just the fragment you want to add, and FlutterFlow merges it into the file in the correct place. This is safer and easier for small additions like a permission line or a meta-data tag. +**Snippets** are small pieces of code that you can inject into the native files at predefined locations. Instead of opening the whole file to edit, you provide just the fragment you want to add, and FlutterFlow merges it into the file in the correct place. This is safer and easier for small additions such as, a permission line or a meta-data tag. #### Snippet Placement for Android @@ -148,13 +148,13 @@ Once unlocked, the file stays in manual editing mode until you lock it again. Re :::tip - Don’t remove FlutterFlow’s existing entries unless you are sure. It’s safer to only add or modify necessary lines and leave the rest as is. -- Use Manual Edit Mode for bulk or complex edits that the snippet can’t easily do, like reordering tags, removing something, or pasting in a large chunk of config. Always verify that the app still builds and runs after such edits. +- Use Manual Edit Mode for bulk or complex edits that the snippet can’t easily do, such as, reordering tags, removing something, or pasting in a large chunk of config. Always verify that the app still builds and runs after such edits. - You can also use your Development [**Environment Values**](../../testing-deployment-publishing/development-environments/development-environments.md#environment-values) and [**Library Values**](../../resources/projects/libraries.md#library-values) inside snippets. For more details, refer to the [**Include Variables in Native Code**](#include-variables-in-native-code) section. ::: ## Include Variables in Native Code -When editing native files in FlutterFlow, you may need to include dynamic values, such as API keys, app configurations, or environment-specific settings. Instead of hardcoding these values directly in **`AndroidManifest.xml`**, **`Info.plist`**, or other native files, you can use FlutterFlow [**Environment Values**](../../testing-deployment-publishing/development-environments/development-environments.md#environment-values) and [**Library Values**](../../resources/projects/libraries.md#library-values) to keep your app flexible and secure. +When editing native files in FlutterFlow, you may need to include dynamic values, such as, API keys, app configurations, or environment-specific settings. Instead of hardcoding these values directly in **`AndroidManifest.xml`**, **`Info.plist`**, or other native files, you can use FlutterFlow [**Environment Values**](../../testing-deployment-publishing/development-environments/development-environments.md#environment-values) and [**Library Values**](../../resources/projects/libraries.md#library-values) to keep your app flexible and secure. To include a variable in a configuration file, start by creating a **file-level variable** and assigning it a value from either your **environment values** or **library values**. Then, reference this variable using a placeholder format (e.g., `{{apiToken}}`) within the configuration file. These placeholders in native files are automatically replaced with their actual values during the app build process. @@ -252,7 +252,7 @@ If `ALLOW_HTTP_TRAFFIC` is set to `true` in FlutterFlow’s Environment Value, t If you are building a [FlutterFlow Library](../../resources/projects/libraries.md) and need to include API keys in native code without exposing them when users import the library, you can use [Library Values](../../resources/projects/libraries.md#library-values) as placeholders. This ensures that when someone installs your library, they can define their own values without seeing the actual key or credentials inside the native files. -For example, if your library requires an API key for a third-party service (like Google Maps or a payment provider), it’s best not to expose the key directly in the manifest file. Instead, create a file-level variable and assign it a Library Value. +For example, if your library requires an API key for a third-party service (e.g., Google Maps or a payment provider), it’s best not to expose the key directly in the manifest file. Instead, create a file-level variable and assign it a Library Value. ``` @@ -272,7 +272,7 @@ FlutterFlow allows editing several key native files. Below, we cover each file `AndroidManifest.xml` is the master configuration file for your Android app. It is located in the root directory of the app's `android/app/src/main` folder and declares essential app information to the Android OS and Google Play. This includes your app’s package name, components (activities, services, receivers), and the permissions it needs. -It defines hardware and software features the app depends on, like Bluetooth, GPS, or sensors. The manifest manages intents and filters, determining how the app responds to system events and deep linking. It also includes metadata and configuration for SDKs and libraries, such as API keys or feature flags. +It defines hardware and software features the app depends on, such as, Bluetooth, GPS, or sensors. The manifest manages intents and filters, determining how the app responds to system events and deep linking. It also includes metadata and configuration for SDKs and libraries, such as API keys or feature flags. In short, the manifest is like an app’s identity card and permission sheet for Android. @@ -302,7 +302,7 @@ This registers `NewScreenActivity` so the system knows it exists. **Example 2: Requesting Permissions** -If your app requires access to restricted resources like 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-custom-permission) in FlutterFlow. ```xml com.apple.developer.icloud-container-identifiers @@ -538,7 +538,7 @@ You can modify the `Entitlements.plist` file by either [**adding a snippet**](#s The `main.dart` file is the entry point of every FlutterFlow app. It is the first file that runs when the app starts and is responsible for initializing the application, configuring dependencies, and defining the root widget. Located in the **`lib/`** directory, `main.dart` contains the `main()` function, which is required for every FlutterFlow app. -If you need to execute any custom Dart code at startup — such as initializing third-party SDKs, setting global configurations, service locators, printing a debug log, or running certain functions once — `main.dart` is the place to do it. +If you need to execute any custom Dart code at startup — such as, initializing third-party SDKs, setting global configurations, service locators, printing a debug log, or running certain functions once — `main.dart` is the place to do it. :::info [**Adding Snippets**](#option-1-add-individual-snippets) isn't available for `main.dart`. Instead, you can directly modify the file using [**Manual Edit Mode**](#option-2-manual-edit-mode). From 9c8a79a90e8387f89cdc3e7e489d64f12df421c1 Mon Sep 17 00:00:00 2001 From: Pinkesh Date: Thu, 3 Apr 2025 16:58:30 +0530 Subject: [PATCH 3/4] minor fixes --- .../configuration-files.md | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/ff-concepts/adding-customization/configuration-files.md b/docs/ff-concepts/adding-customization/configuration-files.md index f431e6e4..3e06979f 100644 --- a/docs/ff-concepts/adding-customization/configuration-files.md +++ b/docs/ff-concepts/adding-customization/configuration-files.md @@ -17,7 +17,7 @@ Here are the key configuration files you can edit: - [**`AndroidManifest.xml`**](#androidmanifestxml-android) – Configures app permissions, metadata, and intent filters for Android. - [**`Info.plist`**](#infoplist-ios)– Manages iOS app settings, including permissions and configurations. -- [**`Entitlements.plist`**](#entitlementsplist-ios) – Defines iOS app privileges such as, push notifications and Apple Pay. +- [**`Entitlements.plist`**](#entitlementsplist-ios) – Defines iOS app privileges such as push notifications and Apple Pay. - [**`main.dart`**](#maindart-flutter) – The entry point of your Flutter app, where you can modify app-level logic. - [**ProGuard files**](#proguard-file-android) – Used for code shrinking and obfuscation in Android builds. @@ -35,7 +35,7 @@ FlutterFlow provides two main ways to modify native XML files: [**Add Individual ### Option 1: Add Individual Snippets -**Snippets** are small pieces of code that you can inject into the native files at predefined locations. Instead of opening the whole file to edit, you provide just the fragment you want to add, and FlutterFlow merges it into the file in the correct place. This is safer and easier for small additions such as, a permission line or a meta-data tag. +**Snippets** are small pieces of code that you can inject into the native files at predefined locations. Instead of opening the whole file to edit, you provide just the fragment you want to add, and FlutterFlow merges it into the file in the correct place. This is safer and easier for small additions such as a permission line or a meta-data tag. #### Snippet Placement for Android @@ -148,13 +148,13 @@ Once unlocked, the file stays in manual editing mode until you lock it again. Re :::tip - Don’t remove FlutterFlow’s existing entries unless you are sure. It’s safer to only add or modify necessary lines and leave the rest as is. -- Use Manual Edit Mode for bulk or complex edits that the snippet can’t easily do, such as, reordering tags, removing something, or pasting in a large chunk of config. Always verify that the app still builds and runs after such edits. +- Use Manual Edit Mode for bulk or complex edits that the snippet can’t easily do, such as reordering tags, removing something, or pasting in a large chunk of config. Always verify that the app still builds and runs after such edits. - You can also use your Development [**Environment Values**](../../testing-deployment-publishing/development-environments/development-environments.md#environment-values) and [**Library Values**](../../resources/projects/libraries.md#library-values) inside snippets. For more details, refer to the [**Include Variables in Native Code**](#include-variables-in-native-code) section. ::: ## Include Variables in Native Code -When editing native files in FlutterFlow, you may need to include dynamic values, such as, API keys, app configurations, or environment-specific settings. Instead of hardcoding these values directly in **`AndroidManifest.xml`**, **`Info.plist`**, or other native files, you can use FlutterFlow [**Environment Values**](../../testing-deployment-publishing/development-environments/development-environments.md#environment-values) and [**Library Values**](../../resources/projects/libraries.md#library-values) to keep your app flexible and secure. +When editing native files in FlutterFlow, you may need to include dynamic values, such as API keys, app configurations, or environment-specific settings. Instead of hardcoding these values directly in **`AndroidManifest.xml`**, **`Info.plist`**, or other native files, you can use FlutterFlow [**Environment Values**](../../testing-deployment-publishing/development-environments/development-environments.md#environment-values) and [**Library Values**](../../resources/projects/libraries.md#library-values) to keep your app flexible and secure. To include a variable in a configuration file, start by creating a **file-level variable** and assigning it a value from either your **environment values** or **library values**. Then, reference this variable using a placeholder format (e.g., `{{apiToken}}`) within the configuration file. These placeholders in native files are automatically replaced with their actual values during the app build process. @@ -272,7 +272,7 @@ FlutterFlow allows editing several key native files. Below, we cover each file `AndroidManifest.xml` is the master configuration file for your Android app. It is located in the root directory of the app's `android/app/src/main` folder and declares essential app information to the Android OS and Google Play. This includes your app’s package name, components (activities, services, receivers), and the permissions it needs. -It defines hardware and software features the app depends on, such as, Bluetooth, GPS, or sensors. The manifest manages intents and filters, determining how the app responds to system events and deep linking. It also includes metadata and configuration for SDKs and libraries, such as API keys or feature flags. +It defines hardware and software features the app depends on, such as Bluetooth, GPS, or sensors. The manifest manages intents and filters, determining how the app responds to system events and deep linking. It also includes metadata and configuration for SDKs and libraries, such as API keys or feature flags. In short, the manifest is like an app’s identity card and permission sheet for Android. @@ -302,7 +302,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-custom-permission) in FlutterFlow. ```xml com.apple.developer.icloud-container-identifiers @@ -538,7 +538,7 @@ You can modify the `Entitlements.plist` file by either [**adding a snippet**](#s The `main.dart` file is the entry point of every FlutterFlow app. It is the first file that runs when the app starts and is responsible for initializing the application, configuring dependencies, and defining the root widget. Located in the **`lib/`** directory, `main.dart` contains the `main()` function, which is required for every FlutterFlow app. -If you need to execute any custom Dart code at startup — such as, initializing third-party SDKs, setting global configurations, service locators, printing a debug log, or running certain functions once — `main.dart` is the place to do it. +If you need to execute any custom Dart code at startup — such as initializing third-party SDKs, setting global configurations, service locators, printing a debug log, or running certain functions once — `main.dart` is the place to do it. :::info [**Adding Snippets**](#option-1-add-individual-snippets) isn't available for `main.dart`. Instead, you can directly modify the file using [**Manual Edit Mode**](#option-2-manual-edit-mode). From 69109f16f8fe87cc25cb6dc682040580209fc28a Mon Sep 17 00:00:00 2001 From: Pinkesh Date: Mon, 7 Apr 2025 11:37:18 +0530 Subject: [PATCH 4/4] Address review comments --- docs/ff-concepts/adding-customization/configuration-files.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/ff-concepts/adding-customization/configuration-files.md b/docs/ff-concepts/adding-customization/configuration-files.md index 3e06979f..752234d6 100644 --- a/docs/ff-concepts/adding-customization/configuration-files.md +++ b/docs/ff-concepts/adding-customization/configuration-files.md @@ -156,7 +156,7 @@ Once unlocked, the file stays in manual editing mode until you lock it again. Re When editing native files in FlutterFlow, you may need to include dynamic values, such as API keys, app configurations, or environment-specific settings. Instead of hardcoding these values directly in **`AndroidManifest.xml`**, **`Info.plist`**, or other native files, you can use FlutterFlow [**Environment Values**](../../testing-deployment-publishing/development-environments/development-environments.md#environment-values) and [**Library Values**](../../resources/projects/libraries.md#library-values) to keep your app flexible and secure. -To include a variable in a configuration file, start by creating a **file-level variable** and assigning it a value from either your **environment values** or **library values**. Then, reference this variable using a placeholder format (e.g., `{{apiToken}}`) within the configuration file. These placeholders in native files are automatically replaced with their actual values during the app build process. +To include a variable in a configuration file, start by creating a **file-level variable** and assigning it a value from either your **Environment Values** or **Library Values**. Then, reference this variable using a placeholder format (e.g., `{{apiToken}}`) within the configuration file. These placeholders in native files are automatically replaced with their actual values during the code generation process. Here’s exactly how you do it: