diff --git a/docs/ff-concepts/localization-accessibility/_category_.json b/docs/ff-concepts/localization-accessibility/_category_.json
new file mode 100644
index 00000000..743ef7c3
--- /dev/null
+++ b/docs/ff-concepts/localization-accessibility/_category_.json
@@ -0,0 +1,4 @@
+{
+ "label": "Localization & Accessibility",
+ "position": 6
+}
\ No newline at end of file
diff --git a/docs/ff-concepts/localization-accessibility/add-multiple-languages.md b/docs/ff-concepts/localization-accessibility/add-multiple-languages.md
new file mode 100644
index 00000000..30eb21bf
--- /dev/null
+++ b/docs/ff-concepts/localization-accessibility/add-multiple-languages.md
@@ -0,0 +1,530 @@
+---
+slug: multiple-languages
+title: Languages
+tags: [Multilingual, Localization, Internationalization]
+keywords: [FlutterFlow, multiple languages, app localization, internationalization, multilingual support]
+description: Learn how to support multiple languages in your FlutterFlow app.
+sidebar_position: 1
+---
+
+# Languages
+
+A multi-language feature allows you to show all your app's text in different languages.
+
+FlutterFlow allows you to translate all your app's text in one go using Google Translate or manually change the text if you’d prefer. You can also translate predefined messages such as permission messages, authentication snackbar messages, etc.
+
+Adding multi-language support can be crucial to your app. For example, if you have an app that tells non-English users to perform the exercise steps in English, they won't understand and prefer to use another app (which might be mediocre but available in the user’s language). Adding a Multi-Language feature to your app helps you succeed globally.
+
+
+
+## Add multi-language support
+
+To add multi-language support to your project:
+
+1. Click on the **Setting and Integrations** from the Navigation Menu (left side of your screen).
+2. Under the **Project Setup** section, select **Languages**.
+3. Click on the **+ Add Language** button. This will open the **Select Language** popup.
+4. Search for the language that you want to support and click on it. Similarly, add other languages.
+5. Now, inside the **Primary Language** dropdown, click on the **Unset**. This will open a popup, click **continue** and choose your base language. (A language that is shown when the current device language is not supported by your app.)
+6. (Optional) Inside the **Display Language** dropdown, select the language that you want to display while building your app in App Builder.
+7. Find the **Translation** section below and click on the **Translate All** button. This will open a new popup, click on **Translate**. This will translate all your app's text into supported languages using Google Translate.
+8. Go through all of your app's text (non-translated/translated) that are grouped by page name.
+9. Now, click on the **Select Page or Component** from the Navigation Menu (left side of your screen).
+10. Select any page, find the language dropdown above the canvas, try changing it to other languages, and see the translated text appear on the canvas.
+
+:::warning
+Changing the primary language after translating all of your text will clear the existing translations for other languages.
+:::
+
+
+
+
+
+
+
+Here's how it looks when you run your app on a real device/emulator and try changing the device language:
+
+
+
+
+
+
+
+## Changing app language manually
+
+Instead of showing your app's text based on the user's device language, you can let users choose the language of the app.
+
+For example, when the app starts, you may present a language selection screen or start the app with any default language, such as English and then allow users to later change the language from the settings menu.
+
+Let's build a simple example of changing the app language on a button click which looks like the following visual:
+
+
+
+
+
+
+Changing the app language manually includes the following steps:
+
+1. [Building a page](#1-building-a-page)
+2. [Translating app content](#2-translating-app-content)
+3. [Adding action to change the language](#3-adding-action-to-change-the-language)
+
+### 1. Building a page
+
+You can skip this step if you have already built your page.
+
+To build a page:
+
+1. Create a page and add the Column widget.
+3. Add a [**Text**](../../resources/ui/widgets/built-in-widgets/text.md) Widget that shows some texts.
+4. Add a [**Button**](../../resources/ui/widgets/built-in-widgets/button.md) to change the language and add some padding around it.
+
+
+
+
+
+
+### 2. Translating app content
+
+Translate your app content as per the instructions [here](#add-multi-language-support).
+
+### 3. Add Set App Language [Action]
+
+Using this Action, you can change the language of your app.
+
+:::info
+- This action is only visible when you added a multi-language feature to your app.
+- This action is limited to only your app and does not change your device language.
+:::
+
+Follow the steps below to define Set App Language Action to any widget.
+
+1. Select widget from the widget tree or from the canvas area.
+2. Select **Actions** from the Properties panel (the right menu)
+3. Click **+ Add Action** button
+4. Choose a gesture from the dropdown among ***On Tap**, **On Double Tap**, or* **On Long Press**
+5. Select the **Action Type** as **Set App Language***.*
+6. Set **Language Source** to **Select Language**.
+7. From the **Language** dropdown, select the language that you want to set.
+
+
+
+
+
+
+## Managing app text translation
+
+Managing your app's text translation includes updating the translated text (produced by Google Translate) or running a Google Translate on the new or existing text (with slight modification) on a specific page.
+
+There are two ways you can manage the app text translation:
+
+- [Inside Language Settings](#1-inside-language-settings)
+- [Inside App Builder](#2-inside-app-builder)
+
+### Inside Language Settings
+
+The Language Settings page lists all your app's text grouped by page name. You can use the Language Settings page when you want to manage the text in bulk.
+
+To manage the app text translation inside the language settings page:
+
+1. Click on the **Setting and Integrations** from the Navigation Menu (left side of your screen).
+2. Under the **Project Setup** section, select **Languages**.
+3. Scroll down to the **Translation** section, find and click on the **page name** that contains the text you want to manage. This will show a list of texts on a page.
+4. Find your text:
+ - To manually add/update translation, directly make changes inside the box under the language column and mark the text as **Fixed**.
+ - To Google Translate a new or existing text (with slight modification), click on the **Translate Page** and then click **Translate**.
+
+:::info
+The Translate Page button will create a translation for all the texts on a page. If you don't want any text (with your own translation) to be overridden by Google Translate results, make sure you mark them as **Fixed**.
+:::
+
+ 
+ Manage text translation inside language settings page
+
+
+### Inside App Builder
+
+While building your app, you can translate or update the translation for the individual text right inside the app builder.
+
+To manage the app text translation inside the App Builder:
+
+1. Click on the **Select Page or Component** from the Navigation Menu (left side of your screen).
+2. Select your **Page** and then select the widget (e.g., Text, TextField, etc.)
+3. Move to Property Editor and click on the Globe icon () for the property you would like to add a translation. This will open a new panel.
+ - To manually add/update translation, directly make changes inside the box under the language name.
+ - To Google Translate a new or existing text (with slight modification), click on the **Google** **Translate** button and then click **Translate**.
+
+
+ 
+ Manage text translation inside App Builder
+
+
+## Translating predefined messages
+
+FlutterFlow allows you to manage the translation for predefined messages, such as permission messages and snackbar messages.
+
+There are two types of messages you can translate:
+
+- [iOS Permission Messages](#1-ios-permission-messages)
+- [Preset Snackbar Messages](#2-preset-snackbar-messages)
+
+### iOS Permission Messages
+
+iOS permission messages are the messages that iOS users will see when prompted to grant permissions to your app (such as a camera or photo library access).
+
+To add translations for the iOS permission messages:
+
+1. Click on the **Setting and Integrations** from the Navigation Menu (left side of your screen).
+2. Under the **Project Setup** section, select **Languages**.
+3. Scroll down to the **Translation** section and click on the **iOS Permissions Messages** to open the section.
+4. Inside the Permission Message section (e.g., **Camera Permission Message**, **Photo Library Permission Message**, etc.), enter your message for the base language. You can get an idea of what to write using the hint available inside the box.
+5. Now, there are two ways you can add translation:
+ - To Google Translate your message, click on the **Translate Message** button (top right side of the current section) and then click **Translate**.
+ - To manually add translations, directly add your translated messages under the language name and mark the permission message as **Fixed**.
+
+:::info
+- The permission messages are displayed based on the feature you have added to your app. For example, the Camera and Photo Library Permission messages are shown when you have a page with a Button that has Upload Photo/Video action added to it.
+- If you don't want any messages (with your own translation) to be overridden by Google Translate results, make sure you mark them as **Fixed**.
+:::
+
+
+
+
+
+
+### Preset Snackbar Messages
+
+Preset Snackbar Messages are ones we show for a certain action inside the Snackbar.
+
+
+
+
+
+
+To add translations for the preset snackbar messages:
+
+1. Click on the **Setting and Integrations** from the Navigation Menu (left side of your screen).
+2. Under the **Project Setup** section, select **Languages**.
+3. Scroll down to the **Translation** section and click on the **Preset Snackbar Messages** to open the section.
+4. Inside the Message section (e.g., **Authentication Message**, **Upload Media Message**, etc.), enter your message for the base language. You can get an idea of what to write using the hint available inside the box.
+5. Now, there are two ways you can add translation:
+ - To Google Translate your message, click on the **Translate Message** button (top right side of the current section) and then click **Translate**.
+ - To manually add translations, directly add your translated messages under the language name and mark the permission message as **Fixed**.
+
+
+
+
+
+
+## Retrieving language related data
+
+While building a multi-language app, sometimes you may need language-related data such as current language code or a specific language-related text.
+
+In FlutterFlow, you can get the following two types of language-related data:
+
+- [Current language code](#1-current-language-code)
+- [Language dependent text](#2-language-dependent-text)
+
+### Current language code
+
+The Current language code gives you the ISO language code for the current app language, such as *en*, *de*, *fr*, etc.
+
+Let's build an example of showing the current language code in a Text widget.
+
+
+
+
+
+
+To retrieve the current language code:
+
+1. Add the **Column > [Text](../../resources/ui/widgets/built-in-widgets/text.md)** widget to your app.
+2. Move to the property panel and click on the **Set from Variable** text.
+3. Select **Source** as **Internationalization** and **Available Options** as the **Current Language Code**.
+4. (Optional) Set the *Default Variable Value* if you wish to.
+5. Click **Confirm**.
+6. Add [**Button**](../../resources/ui/widgets/built-in-widgets/button.md) widgets with an action to change the language. To change the language manually, find the instructions [here](#changing-app-language-manually).
+
+
+
+
+
+
+### Language dependent text
+
+Sometimes you might want to store/process a text that is dependent on the current app language—for example, showing/storing the nation/country flag or name based on the current app language.
+
+Let's build an example of showing the nation/country flag in a Text widget.
+
+
+
+
+
+
+To show the language-dependent text:
+
+1. Add the **Column > [Text](../../resources/ui/widgets/built-in-widgets/text.md)** widget to your app.
+2. Move to the property panel and click on the **Set from Variable** text.
+3. Select **Source** as **Internationalization** and **Available Options** as the **Language Dependent Text**.
+4. Click on the language name to open the section and enter your text inside the **Value** input box.
+5. Similarly, enter a value for other languages as well.
+6. (Optional) Set the default value if you wish to.
+7. Click **Confirm**.
+8. Add [**Button**](../../resources/ui/widgets/built-in-widgets/button.md) widgets with an action to change the language. To change the language manually, find the instructions [here](#changing-app-language-manually).
+
+
+
+
+
diff --git a/docs/ff-concepts/localization-accessibility/imgs/manage-app-translation-inside-builder.png b/docs/ff-concepts/localization-accessibility/imgs/manage-app-translation-inside-builder.png
new file mode 100644
index 00000000..0f3ff85f
Binary files /dev/null and b/docs/ff-concepts/localization-accessibility/imgs/manage-app-translation-inside-builder.png differ
diff --git a/docs/ff-concepts/localization-accessibility/imgs/manage-text-translation.webp b/docs/ff-concepts/localization-accessibility/imgs/manage-text-translation.webp
new file mode 100644
index 00000000..482a524c
Binary files /dev/null and b/docs/ff-concepts/localization-accessibility/imgs/manage-text-translation.webp differ
diff --git a/docs/ff-concepts/localization-accessibility/imgs/multi-language-demo.webp b/docs/ff-concepts/localization-accessibility/imgs/multi-language-demo.webp
new file mode 100644
index 00000000..d614a16c
Binary files /dev/null and b/docs/ff-concepts/localization-accessibility/imgs/multi-language-demo.webp differ
diff --git a/docs/ff-integrations/ads/_category_.json b/docs/ff-integrations/ads/_category_.json
new file mode 100644
index 00000000..21a1a0eb
--- /dev/null
+++ b/docs/ff-integrations/ads/_category_.json
@@ -0,0 +1,3 @@
+{
+ "label": "Ads"
+}
\ No newline at end of file
diff --git a/docs/ff-integrations/ads/admob.md b/docs/ff-integrations/ads/admob.md
new file mode 100644
index 00000000..3660473d
--- /dev/null
+++ b/docs/ff-integrations/ads/admob.md
@@ -0,0 +1,479 @@
+---
+slug: /integrations/ads/admob
+title: AdMob
+description: Learn how to add AdMob in your FlutterFlow app.
+tags: [FlutterFlow, AdMob, AdBanner, Interstitial Ad]
+sidebar_position: 1
+keywords: [FlutterFlow, AdMob, AdBanner, Interstitial Ad]
+---
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# AdMob
+Integrating AdMob in your FlutterFlow app allows you to effortlessly include various types of advertisements, such as banner ads and interstitial ads. Here's a quick guide on how to add an AdMob banner widget and display interstitial ads in your app.
+
+## Getting API Keys
+
+Acquiring the API keys comprises the following steps:
+
+1. [Creating AdMob app](#1-creating-admob-app)
+2. [Adding keys to FlutterFlow](#2-adding-keys-to-flutterflow)
+
+### 1. Creating AdMob app
+
+To create an AdMob app:
+
+1. Visit the AdMob homepage and [signup using your Google account](https://admob.google.com/home/).
+2. Go to the Dashboard, and click **Apps** on the left side menu.
+3. Now, click **Add App**.
+4. Select the Platform as **Android**.
+5. For the **Is the app listed on a supported app store?,** select **Yes** if your app is published on Playstore or Appstore. Select **No** if your app is still under development.
+6. Click on **Continue**.
+7. Enter the **App Name** and click **ADD APP**.
+8. Click **Done**.
+9. Similarly, create another AdMob App for iOS app.
+
+:::info
+You should be creating two AdMob Apps to display advertisements in both Android and iOS apps.
+:::
+
+
+
+
+
+
+### 2. Adding keys to FlutterFlow
+
+You must add the App keys to your FlutterFlow project that will allow your app to communicate with the AdMob server.
+
+To add the APP keys:
+
+1. First, get the APP key by visiting the **AdMob dashboard > Select the App > App Settings (left side menu) > Copy the App ID**.
+2. Now, return to the FlutterFlow project and navigate to **Settings and Integrations** > **Integrations** > **AdMob**.
+3. To display the GDPR consent dialog for users in the European Union (EU), enable the **Show GDPR Consent Dialog at App Launch** toggle.
+4. Find the **AdMob** **Android App Key** input box and enter the key.
+5. Similarly, add the **AdMob** **iOS App Key** from the iOS AdMob app.
+
+
+
+
+
+
+## Showing ads
+
+After adding the keys, you can find the instructions to display the ad on below pages:
+
+# **AdBanner**
+
+The AdBanner widget is used to show an advertisement banner inside your app. The AdBanner widget may display texts, images, and other rich media such as video ads.
+
+:::info
+Our AdBanner widget uses Admob which is an Ad network from Google.
+:::
+
+Showing AdBanner From AdMob comprises of following steps:
+
+1. [Adding AdBanner widget](#1-adding-adbanner-widget)
+2. [Assigning Ad Unit ID](#2-assigning-ad-unit-id)
+3. [Enabling test ads](#3-enabling-test-ads)
+4. [Testing ads](#4-testing-ads)
+
+### 1. Adding AdBanner widget
+
+To add the AdBanner widget to your project:
+
+1. Add the Column widget from the widget tree or from the canvas area.
+2. Drag the **AdBanner** widget from the **Base Elements** tab (in the Widget Panel) or add it directly from the widget tree.
+3. Move to the property editor and scroll down to the **Ad Banner Dimensions** section and adjust the **Width** and **Height** property.
+
+:::info
+If you leave the Width property empty, AdBanner will take the full width of the screen.
+:::
+
+
+
+
+
+### 2. Assigning Ad Unit ID
+
+The Ad Unit ID is the unique identifier given to every ad on Admob. You can get this by creating a new ad unit from your Admob account.
+
+To assign the ad unit Id:
+
+1. Go to the Admob account dashboard, click **Apps** on the left side menu and select your app.
+2. Select **Ad units** and then click on the **Add add unit**.
+3. Select the **Banner** Ad.
+4. Enter the **Ad unit name**.
+5. Click **Create ad unit**.
+6. Copy the ad unit ID (the second one) and then click **Done**.
+7. Paste it into the **Android Ad Unit ID** input box.
+8. Similarly, create, copy and paste Ad unit for the iOS app as well.
+
+
+
+
+
+
+### 3. Enabling test ads
+
+To prevent the risk of your AdMob account ban, it is best to enable the test ads while you are still developing the app.
+
+To enable the test ads:
+
+1. Select the **AdBanner** Widget from the widget tree or from the canvas area.
+2. Move to property editor and scroll down to the **Ad properties** section.
+3. Checkmark the **Show Test Ads**. Uncheck it only when you are about to publish the app.
+
+
+
+
+
+
+### 4. Testing ads
+
+You can't test Ads in Run Mode, It can be only tested on a real device or emulator. For that, you will need to [download](../../testing-deployment-publishing/exporting-code/ff-cli.md) the code and run it in your IDE.
+
+To test Ads:
+
+1. Open and Run the app from your preferred IDE.
+2. See the Banner ads appearing on the screen.
+
+
+
+
+
+
+# **Load/Show Interstitial Ad**
+
+Using this action, you can display the [interstitial ad](https://developers.google.com/admob/android/interstitial#:~:text=Interstitial%20ads%20are%20full%2Dscreen,between%20levels%20in%20a%20game.). This type of ad is a full-screen ad (shows an image or video inside) and is typically displayed during natural pauses in your app/game, such as moving to the next page/level.
+
+
+
+
+
+
+## Displaying Interstitial Ad
+
+To display an interstitial ad, you need to use both **Load Interstitial Ad** and **Show Interstitial Ad** actions. Here is how it works:
+
+
+
+First, you must load the ad using the **Load Interstitial Ad** action and display it using the **Show Interstitial Ad** action. When the ad is visible, users can choose to either open or dismiss it. When the ad is dismissed, you can't show the same ad again. Hence, it would be best if you loaded the ad again. The newly loaded ad will be displayed next time you trigger the **Show Interstitial Ad** action.
+
+:::warning
+**Allow sufficient time after calling *Load Interstitial Ad* before you call *Show Interstitial Ad.*** It might take some time to load the ad. Hence, it's advisable to load the ad well in advance before showing it. Otherwise, the ad won't display. For example, if you want to display an ad with the tap of a widget, you must load the ad as soon as the page is loaded.
+:::
+
+:::info
+Learn the best practices to add the interstitial ad [**here**](https://support.google.com/admob/answer/6066980?hl=en&ref_topic=2936214).
+:::
+
+Let's apply this basic fundamental and build an example that shows the interstitial ad when you navigate to the next page. Here's how it looks:
+
+
+
+On the first page, trigger the **Load Interstitial Ad** action when the page is loaded. On tap of a widget, add the **Show Interstitial Ad** action. This action gives the result of whether the ad is dismissed or not inside the `interstitialAdSuccess` variable. If this is true, you can load the ad again and then navigate to the next page.
+
+Here are the step-by-step instructions:
+
+1. [Getting Ad Unit ID](#1-getting-ad-unit-id)
+2. [Adding pages](#2-adding-pages)
+3. [Loading ad on page load](#3-loading-ad-on-page-load)
+4. [Display ad](#4-display-ad)
+
+### 1. Getting Ad Unit ID
+
+The Ad Unit ID is the unique identifier given to every ad on Admob. You can get this by creating a new Interstitial ad unit from your Admob account.
+
+:::info
+This will be needed when you load the ad.
+:::
+
+To get the ad unit Id:
+
+1. Go to the Admob account dashboard, click **Apps** on the left side menu and select your app.
+2. Select **Ad units** and then click on the **Add add unit**.
+3. Select the **Interstitial** Ad.
+4. Enter the **Ad unit name**.
+5. Click **Create ad unit**.
+6. Copy the ad unit ID (the second one) and then click **Done**.
+7. Similarly, create and copy Ad unit for the iOS app as well.
+
+
+
+
+
+
+### 2. Adding pages
+
+:::info
+You can skip this step if you already have a few pages with proper navigation.
+:::
+
+Let's add two sample pages from the templates as shown below:
+
+
+
+
+
+
+
+
+
+
+### 3. Loading ad on page load
+
+You should always load the ad ahead of time before you intend to show it. This allows an ad to fully load its content (image or video) before you show it. The best place to do it is the On Page Load.
+
+To load the ad on page load:
+
+1. Select the **Page**.
+2. Select **Actions** from the Properties panel (the right menu), and click **+ Add Action**.
+ 1. Search and select **Load Interstitial Ad** (under *Integrations > Admob*) action.
+ 2. If you click too many live ads, your AdMob account may get flagged for invalid activity. Hence, the **Show Test Ads** option is enabled by default. You should keep it enabled as long as you are building the app. Only disable it when you are about to publish your app.
+ 3. Enter the iOS and Android Ad Unit ID obtained in [step 1](#1-getting-ad-unit-id).
+
+
+
+
+
+
+### 4. Display Ad
+
+In this step, you will show the ad plus check if a user has dismissed the ad. If so, you will load the new ad and then move to the next page.
+
+The steps to display an interstitial ad are as follows:
+
+1. Select the **Widget** (e.g., ListTile) on which you want to define the 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.
+3. Click on the **+ Add Action**.
+4. On the right side, search and select the **Show Interstitial Ad** (under *Integrations > Admob*) action.
+5. By default, the action output variable name is set to **interstitialAdSuccess**. This will be used to check if a user has dismissed the ad.
+6. Click on the plus button and select the **Add Conditional**.
+7. On the right side (**Set Condition for Action**), select the **Action Output > interstitialAdSuccess** (action output variable name).
+ 1. Under the **TRUE** section, add **Load Interstitial Ad** and provide the Ad Unit IDs. This means a user has dismissed the ad, and it will load a new ad.
+ 2. Under the **False** section, you can add an action to show the snackbar with a failure message.
+8. In the end, add an action to [navigate](../../ff-concepts/navigation-routing/page-navigation.md#navigate-to-action) to the next page.
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/ff-integrations/ads/imgs/final-action-flow-displaying-interstitial-ad.png b/docs/ff-integrations/ads/imgs/final-action-flow-displaying-interstitial-ad.png
new file mode 100644
index 00000000..dac23c8d
Binary files /dev/null and b/docs/ff-integrations/ads/imgs/final-action-flow-displaying-interstitial-ad.png differ
diff --git a/docs/ff-integrations/ads/imgs/first-page.avif b/docs/ff-integrations/ads/imgs/first-page.avif
new file mode 100644
index 00000000..5c43a94d
Binary files /dev/null and b/docs/ff-integrations/ads/imgs/first-page.avif differ
diff --git a/docs/ff-integrations/ads/imgs/load-show-inerstatial.avif b/docs/ff-integrations/ads/imgs/load-show-inerstatial.avif
new file mode 100644
index 00000000..cbb086dd
Binary files /dev/null and b/docs/ff-integrations/ads/imgs/load-show-inerstatial.avif differ
diff --git a/docs/ff-integrations/ads/imgs/second-page.avif b/docs/ff-integrations/ads/imgs/second-page.avif
new file mode 100644
index 00000000..aaa5ca10
Binary files /dev/null and b/docs/ff-integrations/ads/imgs/second-page.avif differ
diff --git a/docs/ff-integrations/ads/imgs/showing-intersitial-when-navigating.avif b/docs/ff-integrations/ads/imgs/showing-intersitial-when-navigating.avif
new file mode 100644
index 00000000..b5531ef2
Binary files /dev/null and b/docs/ff-integrations/ads/imgs/showing-intersitial-when-navigating.avif differ
diff --git a/docs/ff-integrations/firebase/app-check.md b/docs/ff-integrations/firebase/app-check.md
new file mode 100644
index 00000000..02c90bd2
--- /dev/null
+++ b/docs/ff-integrations/firebase/app-check.md
@@ -0,0 +1,187 @@
+---
+slug: /integrations/firebase/app-check
+title: App Check
+description: Learn how to integrate Firebase App Check in your FlutterFlow app.
+tags: [Firebase, App Check]
+sidebar_position: 3
+keywords: [FlutterFlow, Firebase, App Check]
+---
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# App Check
+[Firebase App Check](https://firebase.google.com/docs/app-check) is a new security feature for protecting the backend services of apps. It blocks traffic that comes from sources other than the registered app, ensuring that usage costs are not incurred for illegitimate usage.
+
+App Check works by using attestation services, which already exist for iOS, Android, and the web. The feature can protect three different types of backends, including Firebase backends like Cloud Firestore, Google API services like Cloud Run, and API endpoints of your own server.
+
+## **Adding Firebase App Check**
+
+To add *Firebase App Check* to your app:
+
+1. Navigate to the [Firebase Console](https://console.firebase.google.com/u/0/) > Build > App Check page.
+2. If this is the first time, click the **Get started** button.
+
+ 
+
+3. Now, you'll see the list of apps you have added to this Firebase project. To register attestation service(s), select the project, click **Register,** and then select attestation service.
+ 1. For Android, you can select [Play Integrity](https://developer.android.com/google/play/integrity?authuser=1) and then follow step number 2 and 3 from [here](https://firebase.google.com/docs/app-check/android/play-integrity-provider?authuser=2#project-setup).
+ 2. For iOS, you can choose from [Device Check](https://developer.apple.com/documentation/devicecheck) or [App Attest](https://developer.apple.com/documentation/devicecheck/establishing_your_app_s_integrity) and then follow step number 2 and 3 from [here](https://firebase.google.com/docs/app-check/ios/devicecheck-provider?authuser=2).
+ 3. For the Web, select [reCAPTCHA v3](https://developers.google.com/recaptcha) or [reCAPTCHA Enterprise](https://cloud.google.com/recaptcha-enterprise) and then follow steps 2 and 3 from [here](https://firebase.google.com/docs/app-check/web/recaptcha-enterprise-provider?authuser=2#project-setup). **Note**: To run the app in Run/Test mode, you must register the **Web** version of the app as well.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+4. Ensure that enabling Firebase App Check [won't disrupt your existing legitimate users](https://firebase.google.com/docs/app-check/monitor-metrics?authuser=2).
+5. Now, you can select the service you want to secure. Switch to the **APIs** tab, select the service, and click **Enforce** button. A popup may open, telling you that once enabled, it will deny all requests that do not have *App Check* token. Click **Enforce** again if you are ok. **Note** that it might take up to 15 minutes to start the enforcement.
+
+
+
+
+
+
+6. Navigate back to FlutterFlow and open **Settings and Integrations > Project Setup > Firebase >** scroll down and expand **App Check** section **>** switch on **Enable App Check** toggle.
+7. You can fill out the optional details such as **reCAPTCHA Site Key** (you should have it while performing step 3.3) and [**Run/Test Mode Debug Token**](https://firebase.google.com/docs/app-check/flutter/debug-provider). To get the debug token, follow the steps below:
+ 1. Navigate to the [Firebase Console](https://console.firebase.google.com/u/0/) > Build > App Check > Apps.
+ 2. Open the app for which you want to generate the debug token.
+ 3. Click three dots icon (i.e., overflow menu icon) and select **Manage debug token**.
+ 4. Click **Add debug token**.
+ 5. Give it a **Name** and click **Generate token**.
+ 6. Copy the generated token and paste it in FlutterFlow's designated field.
+ 7. Click **Save**.
+
+
+
+
+
+
+5. You might want to see if it works on a real device or an emulator. To run on a real device, you can set the **Android Provider** to **Play Integrity** and to run on an emulator, set it to **Debug,** and then try checking it by downloading the APK.
+ 1. If it doesn't work for *Play Integrity*, ensure you have enabled the Play Integrity API. See how to do it in step 2 [here](https://firebase.google.com/docs/app-check/android/play-integrity-provider?authuser=1&hl=en#project-setup).
+ 2. If it doesn't work for *Debug*, you can try [downloading the code](../../testing-deployment-publishing/exporting-code/ff-cli.md), following the instructions [here](https://firebase.google.com/docs/app-check/flutter/debug-provider#android), and running it locally.
+
+:::tip
+To add the App Check on the app with the non-Firebase (i.e., your self-hosted) backend, follow the instructions [**here**](https://firebase.google.com/docs/app-check/flutter/custom-resource).
+:::
\ 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 9b804634..2999e61c 100644
--- a/docs/ff-integrations/firebase/connect-to-firebase-setup.md
+++ b/docs/ff-integrations/firebase/connect-to-firebase-setup.md
@@ -3,7 +3,7 @@ slug: /integrations/firebase/connect-to-firebase
title: Connect to Firebase
description: Learn how to integrate Firebase with your FlutterFlow app to add user authentication, cloud storage, real-time databases, and more.
tags: [FlutterFlow, Firebase, Integration, User Authentication, Cloud Storage, Real-Time Database]
-sidebar_position: 1
+sidebar_position: 0
keywords: [FlutterFlow, Firebase, Integration, User Authentication, Cloud Storage, Real-Time Database]
---
diff --git a/docs/ff-integrations/firebase/crashlytics.md b/docs/ff-integrations/firebase/crashlytics.md
new file mode 100644
index 00000000..0a923880
--- /dev/null
+++ b/docs/ff-integrations/firebase/crashlytics.md
@@ -0,0 +1,24 @@
+---
+slug: /integrations/firebase/crashlytics
+title: Crashlytics
+description: Learn how to integrate Firebase Crashlytics in your FlutterFlow app.
+tags: [Firebase, Crashlytics]
+sidebar_position: 2
+keywords: [FlutterFlow, Firebase, Crashlytics]
+---
+
+# Firebase Crashlytics
+[Firebase Crashlytics](https://firebase.google.com/products/crashlytics) is a crash-reporting tool that helps you catch errors. It enables you to troubleshoot the issue by logging the details, such as the exact line number that caused the error, device name, OS version, and time when the crash happened.
+
+To enable Firebase Crashlytics, navigate to **Settings and Integrations** > **Integrations** > **Firebase Crashlytics** and **Enable Firebase Crashlytics**.
+
+Firebase Crashlytics only supports catching errors on mobile platforms (Android and iOS).
+
+You can see all the logged errors/crashes inside the Crashlytics dashboard of your [Firebase console](https://console.firebase.google.com/). There, you'll see the list of crashes (with the page name and line number that caused the issue), and you can filter it by their state, signal, device type, and OS.
+
+
+
+1. Click on the issue name to see its details.
+2. To test the crash on your app, [download the app](../../testing-deployment-publishing/exporting-code/ff-cli.md), add a code that throws an error, and run it on a mobile device or emulator with an active internet connection.
+
+
\ No newline at end of file
diff --git a/docs/ff-integrations/firebase/imgs/crashlytics-dashboard.avif b/docs/ff-integrations/firebase/imgs/crashlytics-dashboard.avif
new file mode 100644
index 00000000..a9dcd60d
Binary files /dev/null and b/docs/ff-integrations/firebase/imgs/crashlytics-dashboard.avif differ
diff --git a/docs/ff-integrations/firebase/imgs/enable-remote-config.avif b/docs/ff-integrations/firebase/imgs/enable-remote-config.avif
new file mode 100644
index 00000000..14c15207
Binary files /dev/null and b/docs/ff-integrations/firebase/imgs/enable-remote-config.avif differ
diff --git a/docs/ff-integrations/firebase/imgs/get-started.avif b/docs/ff-integrations/firebase/imgs/get-started.avif
new file mode 100644
index 00000000..7c2a3a7b
Binary files /dev/null and b/docs/ff-integrations/firebase/imgs/get-started.avif differ
diff --git a/docs/ff-integrations/firebase/imgs/show-hide-fi.avif b/docs/ff-integrations/firebase/imgs/show-hide-fi.avif
new file mode 100644
index 00000000..f579e90e
Binary files /dev/null and b/docs/ff-integrations/firebase/imgs/show-hide-fi.avif differ
diff --git a/docs/ff-integrations/firebase/imgs/test-crash.avif b/docs/ff-integrations/firebase/imgs/test-crash.avif
new file mode 100644
index 00000000..b19ff469
Binary files /dev/null and b/docs/ff-integrations/firebase/imgs/test-crash.avif differ
diff --git a/docs/ff-integrations/firebase/performance-monitoring.md b/docs/ff-integrations/firebase/performance-monitoring.md
new file mode 100644
index 00000000..1116928f
--- /dev/null
+++ b/docs/ff-integrations/firebase/performance-monitoring.md
@@ -0,0 +1,21 @@
+---
+slug: /integrations/firebase/performance-monitoring
+title: Performance Monitoring
+description: Learn how to integrate Firebase Performance Monitoring in your FlutterFlow app.
+tags: [Firebase, Performance Monitoring]
+sidebar_position: 4
+keywords: [FlutterFlow, Firebase, Performance Monitoring]
+---
+
+# Performance Monitoring
+
+[Firebase Performance Monitoring](https://firebase.google.com/docs/perf-mon) is a tool that *automatically* collects performance data from your app and provides insights through the Firebase console. It can monitor both network requests and specific parts of your code.
+
+Enabling performance monitoring is beneficial for:
+
+- **Identify Bottlenecks**: Discover where your app's performance is lagging.
+- **Improve User Experience**: Slow or unresponsive apps lead to a poor user experience.
+- **Data-Driven Decisions**: Make optimization decisions based on real performance data.
+- **Monitor Network Calls**: See how long network requests take, helping identify slow APIs or network issues.
+
+To enable performance monitoring, navigate to Settings and Integrations > Project Setup > Firebase > Open the Performance Monitoring section and Enable Performance Monitoring toggle.
\ No newline at end of file
diff --git a/docs/ff-integrations/firebase/remote-config.md b/docs/ff-integrations/firebase/remote-config.md
new file mode 100644
index 00000000..777ac279
--- /dev/null
+++ b/docs/ff-integrations/firebase/remote-config.md
@@ -0,0 +1,168 @@
+---
+slug: /integrations/firebase/remote-config
+title: Remote Config
+description: Learn how to integrate Firebase Remote Config in your FlutterFlow app.
+tags: [Firebase, Remote Config]
+sidebar_position: 1
+keywords: [FlutterFlow, Firebase, Remote Config]
+---
+
+# Remote Config
+
+[Firebase remote config](https://firebase.google.com/docs/remote-config) allows you to control your app's behavior and appearance without pushing an app update. For example, you could use it to change or show/hide certain elements of your app, such as a promo banner and Santa hat, or use it as a feature flag (payments, food delivery) with no need to publish an app update.
+
+
+
+When you enable the Remote Config, you must specify the parameter in our builder (called 'in-app defaults') and inside the Remote Config dashboard of your [Firebase console](https://console.firebase.google.com/). When the app starts, it fetches config values from the Firebase console, and for any reason, if it fails, your app will use the in-app defaults.
+
+:::warning
+The app will try to fetch values every time it starts. However, due to the minimum fetch interval of 1 hour (set by default), the values won't be fetched more than once in 1 hour.
+:::
+
+## Using Firebase Remote Config
+
+Follow the steps below to use the Remote Config:
+
+### 1. Enable Remote Config
+
+To enable it, navigate to **Settings and Integrations** > **Integrations** > **Firebase Remote Config** and **Enable Remote Config**.
+
+
+
+### 2. Add parameter in Firebase Console
+
+You will be able to dynamically control your app using the parameters created in the Firebase Console of your project.
+
+To create the parameter:
+
+1. Navigate to the [Firebase Console](https://console.firebase.google.com/u/0/) > Enagage > Remote Config** page.
+2. If this is the first time, click **Create configuration** button.
+3. Click **Add parameter**. This will open the **Create parameter** section on the right side.
+4. Enter the **Parameter name** (e.g., *show_promo_banner*, *primary_color*, etc.).
+5. Set the **Data type** among the *String*, *Number*, *Boolean*, and *JSON*.
+6. Set the **Default value**.
+7. If you enable the **Use in-app default** toggle, any change made to this parameter from here won't be reflected in your app. Instead, your app will use values from the parameters defined in our builder (see how to create it in the [next step](#3-add-parameter-in-flutterflow)).
+8. Click **Save**.
+9. Click **Publish Changes** to make this parameter immediately available to your app.
+
+
+
+
+
+
+
+### 3. Add parameter in FlutterFlow
+
+Parameters added to your FlutterFlow project are called in-app defaults. To add them:
+
+1. Navigate to **Settings and Integrations** > **Integrations** > **Firebase Remote Config**.
+2. Click **+ Add Parameter**. A pop will open.
+3. Enter the parameter **name**, select the **Data Type**, set its **Default Value**, and click **Create Parameter**. **Note**: The parameter name must match the name given in the [previous step](#2-add-parameter-in-firebase-console).
+
+
+
+
+
+
+### 4. Use parameter
+
+Now you can access the newly created parameter from the **Set from Variable > Firebase Remote Config**.
+
+Here's an example of using the remote config parameter to set the [conditional visibility](../../resources/ui/widgets/widget-commonalities.md#conditional) for the social login feature.
+
+
+
+
+
+
+Here's another example that changes the app's background using the color value from the Remote Config parameter.
+
+
+
+
+
+
diff --git a/docs/ff-integrations/payments/imgs/add-website-link-2.avif b/docs/ff-integrations/payments/imgs/add-website-link-2.avif
new file mode 100644
index 00000000..04e09175
Binary files /dev/null and b/docs/ff-integrations/payments/imgs/add-website-link-2.avif differ
diff --git a/docs/ff-integrations/payments/imgs/add-website-link.avif b/docs/ff-integrations/payments/imgs/add-website-link.avif
new file mode 100644
index 00000000..d551d1a1
Binary files /dev/null and b/docs/ff-integrations/payments/imgs/add-website-link.avif differ
diff --git a/docs/ff-integrations/payments/imgs/adding-apple-merchant-id.png b/docs/ff-integrations/payments/imgs/adding-apple-merchant-id.png
new file mode 100644
index 00000000..cbd48cf0
Binary files /dev/null and b/docs/ff-integrations/payments/imgs/adding-apple-merchant-id.png differ
diff --git a/docs/ff-integrations/payments/adding-restore-purchase-action.avif b/docs/ff-integrations/payments/imgs/adding-restore-purchase-action.avif
similarity index 100%
rename from docs/ff-integrations/payments/adding-restore-purchase-action.avif
rename to docs/ff-integrations/payments/imgs/adding-restore-purchase-action.avif
diff --git a/docs/ff-integrations/payments/imgs/customize-payment-sheet.avif b/docs/ff-integrations/payments/imgs/customize-payment-sheet.avif
new file mode 100644
index 00000000..16ec6fe2
Binary files /dev/null and b/docs/ff-integrations/payments/imgs/customize-payment-sheet.avif differ
diff --git a/docs/ff-integrations/payments/imgs/deploy.png b/docs/ff-integrations/payments/imgs/deploy.png
new file mode 100644
index 00000000..48b5fa40
Binary files /dev/null and b/docs/ff-integrations/payments/imgs/deploy.png differ
diff --git a/docs/ff-integrations/payments/imgs/enable-test-mode.avif b/docs/ff-integrations/payments/imgs/enable-test-mode.avif
new file mode 100644
index 00000000..93fa4d70
Binary files /dev/null and b/docs/ff-integrations/payments/imgs/enable-test-mode.avif differ
diff --git a/docs/ff-integrations/payments/error-while-creating-sub-in-play-console.avif b/docs/ff-integrations/payments/imgs/error-while-creating-sub-in-play-console.avif
similarity index 100%
rename from docs/ff-integrations/payments/error-while-creating-sub-in-play-console.avif
rename to docs/ff-integrations/payments/imgs/error-while-creating-sub-in-play-console.avif
diff --git a/docs/ff-integrations/payments/imgs/generate-test-key.webp b/docs/ff-integrations/payments/imgs/generate-test-key.webp
new file mode 100644
index 00000000..e7e30589
Binary files /dev/null and b/docs/ff-integrations/payments/imgs/generate-test-key.webp differ
diff --git a/docs/ff-integrations/payments/imgs/specify-amount-and-code-manually.avif b/docs/ff-integrations/payments/imgs/specify-amount-and-code-manually.avif
new file mode 100644
index 00000000..6a8839a9
Binary files /dev/null and b/docs/ff-integrations/payments/imgs/specify-amount-and-code-manually.avif differ
diff --git a/docs/ff-integrations/payments/imgs/unknown-error-occured.avif b/docs/ff-integrations/payments/imgs/unknown-error-occured.avif
new file mode 100644
index 00000000..ce89e6a3
Binary files /dev/null and b/docs/ff-integrations/payments/imgs/unknown-error-occured.avif differ
diff --git a/docs/ff-integrations/payments/razorpay.md b/docs/ff-integrations/payments/razorpay.md
new file mode 100644
index 00000000..2f3ab8a5
--- /dev/null
+++ b/docs/ff-integrations/payments/razorpay.md
@@ -0,0 +1,269 @@
+---
+slug: /integrations/payments/razorpay
+title: Razorpay
+description: Learn how to integrate Razorpay in your FlutterFlow app.
+tags: [FlutterFlow, Razorpay, Payments, Integration]
+sidebar_position: 1
+keywords: [FlutterFlow, Razorpay, Payments, Integration]
+---
+# RazorPay
+
+[Razorpay](https://razorpay.com/) is a leading online payment gateway widely used by businesses in India to accept and process digital payments securely.
+
+It provides a platform for merchants and businesses to integrate payment solutions into their websites and mobile apps. It allows customers to make online payments using various payment methods such as credit cards, debit cards, net banking, UPI (Unified Payments Interface), and digital wallets.
+
+:::warning
+Currently, publishing to the web with Razorpay enabled is restricted due to some regulations.
+:::
+
+
+
+
+
+
+:::info[Prerequisites]
+
+Before starting to set up payments, make sure you have,
+
+1. Complete [**Firebase Setup**](../../ff-integrations/firebase/connect-to-firebase-setup.md) for your project.
+2. Enabled [**Firebase Authentication**](../authentication/firebase-auth/auth-initial-setup.md) for your project.
+3. Upgraded your Firebase project to [**Blaze Plan**](https://firebase.google.com/pricing). We use [**Firebase Cloud Functions**](https://firebase.google.com/docs/functions) to process a transaction.
+:::
+
+## Razorpay Integration
+
+Integrating Razorpay in your app comprises the following steps:
+
+1. [Setup Razorpay](#1-setup-razorpay)
+2. [Trigger Razorpay payment](#2-trigger-razorpay-payment-action)
+3. [Testing](#3-testing)
+4. [Releasing to production](#4-releasing-to-production)
+
+### 1. Setup Razorpay
+
+Setting up the Razorpay payments includes creating an account, enabling test mode, acquiring the keys from your Razorpay account, and adding them to your project.
+
+:::warning
+You should always try out payments in a test mode before releasing them to your production application. Hence, the instructions below will guide you on how to get the test keys.
+:::
+
+Here are the steps:
+
+1. Create a new Razorpay account from [here](https://dashboard.razorpay.com/signup). If you already have an account, [log in](https://dashboard.razorpay.com/signin).
+2. Once you are logged in, turn on the **Test Mode**. Test mode helps you simulate the payments without involving real money transactions.
+
+
+
+
+
+
+3. From the left side menu, select **Account & Settings** > Under **Website and app settings** section, select **API keys**.
+4. If you're asked to add a website link but your app isn't published yet, you can temporarily publish it to a subdomain using our [web publishing](../../testing-deployment-publishing/publishing/web-publishing.md) feature. Later, you can update this to your actual domain in both FlutterFlow and Razorpay.
+
+
+
+
+
+5. Click **Generate Test Key** and copy the **Key Id** and **Key Secret**. To regenerate, click on **Regenerate Test Key** and choose how you want to deactivate the old key.
+
+
+
+
+
+
+
+
+
+
+
+6. Return to the FlutterFlow project, navigate to **Settings and Integrations** > **In App Purchases & Subscriptions** > **Razorpay**. Use the toggle to **Enable Razorpay Payments**.
+7. Under **Test Credentials**, paste the **Key ID** and **Key Secret** obtained in the previous step.
+8. Set your **Business Name**.
+9. Click the **Deploy** button.
+
+
+
+
+
+### 2. Trigger Razorpay payment [Action]
+
+To initiate a payment using Razorpay, you must use the **Razorpay Payment** action. This action lets users process a payment inside your app using credit cards, debit cards, net banking, UPI (Unified Payments Interface), and digital wallets via Razorpay.
+
+Follow the steps below to add this action:
+
+1. Select the widget (e.g., checkout button) on which you want to add the 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. Click on the **+ Add Action**.
+3. Search and select the **Razorpay Payment** (under *Integrations*) action.
+4. Enter or use a variable for specifying the total amount under the **Amount** section. **Note** that the value should be specified in the currency's smallest unit.
+ - For example, *$24.99* should be passed as *2499* (as a round-off integer; otherwise, it would be automatically rounded); similarly, for an amount of ₹120.00, 12000 should be passed.
+ - Most probably, you'll specify this value from a variable. If you do so, you might need this [code expression](../../resources/control-flow/functions/utility-functions.md#code-expressions) to convert the total amount in the required format: `amount.toStringAsFixed(2).replaceAll(".", "");`
+5. Enter the **Currency Code** to be used for the amount, for example, *INR*, *USD*, *EUR*, or *BRL*. Make sure you enter a valid currency code; otherwise, the transaction won't go through. Download the complete [list of supported currencies](https://razorpay.com/docs/build/browser/assets/images/international-currency-list.xlsx).
+
+
+
+
+
+
+
+
+
+6. With this action, you can also add some optional fields, such as **Receipt Number**, **Description**, **User Name**, **User Email**, **User Contact**, and **Timeout** (time for which the checkout dialog should remain active. By default, it is 180 seconds).
+
+
+
+
+
+
+7. You can also customize the color scheme for the payment sheet using properties such as **Dialog Color, Barrier Color,** **Text Color**, **Processing Color**, **Success Color**, **Error Color,** and more.
+
+
+
+
+
+8. Enter an **Action** **Output Variable Name** where the payment ID would be stored on a successful transaction.
+9. Now you must check if the payment was successful. You can do so by adding the [conditional action](../../resources/control-flow/functions/conditional-logic.md#conditional-actions). To do so, click the "**+**" button below the previous action tile and select **Add Conditional**.
+10. On the right side (**Set Condition for Action**),
+ 1. Select **UNSET** > **Condition** > **Single Condition**.
+ 2. **First Value** > **Action** **Output Variable Name**.
+ 3. Set the operator to **Is Set and Not Empty**.
+11. Under the **TRUE** section, add an action that will be triggered if the payment is successful.
+12. Under the **FALSE** section, add an action that will be triggered if payment is failed.
+
+
+
+
+
+
+:::warning
+Ensure the user is authenticated before triggering this action; otherwise, it will result in an error. You can follow the steps on [**this page**](../authentication/firebase-auth/auth-initial-setup.md) to set up Firebase Authentication.
+:::
+
+### 3. Testing
+
+You can test Razorpay payments on Run mode, Test mode, an emulator/Simulator, or a physical device.
+
+To test payments in Test or Run mode:
+
+1. In your FlutterFlow project, navigate to **Settings and Integrations** > **In App Purchases & Subscriptions** > **Razorpay**.
+2. Make sure the **Is Production** is disabled.
+3. Make sure you have entered the correct **Test Credentials**.
+4. Run your app in [Test mode](../../testing-deployment-publishing/running-your-app/run-your-app.md#test-mode).
+5. To test the purchase, you can try any method from [here](https://razorpay.com/docs/payments/payments/test-card-upi-details/#test-card-for-international-payments).
+
+### 4. Releasing to production
+
+Once you are done testing your Razorpay integration and you are ready to go **live**, follow the steps below:
+
+1. Complete **KYC** (or the [Activation Form](https://dashboard.razorpay.com/app/activation?ref=blog.flutterflow.io)) to access the Razorpay Live API.
+2. Log into the [Razorpay Dashboard](https://dashboard.razorpay.com/?ref=blog.flutterflow.io#/access/signin) and switch to **Live Mode** on the menu.
+3. From the left side menu, select **Account & Settings** > Under **Website and app settings** section, select **API keys**.
+4. Click **Generate Live Key** and copy the **Key Id** and **Key Secret**. To regenerate, click on **Regenerate Live Key** and choose how you want to deactivate the old key.
+5. Return to the FlutterFlow project, navigate to **Settings and Integrations** > **In App Purchases & Subscriptions** > **Razorpay**. Turn on the **Is Production**.
+6. Under **Production Credentials**, paste the **Key ID** and **Key Secret** obtained in the previous step.
+7. Click the **Deploy** button.
+8. [Test](../../testing-deployment-publishing/running-your-app/run-your-app.md#test-mode) your app.
\ No newline at end of file
diff --git a/docs/ff-integrations/payments/revenuecat.md b/docs/ff-integrations/payments/revenuecat.md
index f152d3a0..09f0d3c0 100644
--- a/docs/ff-integrations/payments/revenuecat.md
+++ b/docs/ff-integrations/payments/revenuecat.md
@@ -59,7 +59,7 @@ To set up the RevenueCat, follow these steps carefully:
3. [Create subscriptions](https://www.revenuecat.com/docs/getting-started/quickstart#%EF%B8%8F-store-setup) in the respective stores.
1. While creating subscriptions in Google Play Console, if you see a message saying '***Your app doesn't have any in-app products yet**'* like in this picture, follow the steps below:
- 
+ 
1. Return to FlutterFlow and navigate to **Settings & Integrations >** **In App Purchases & Subscriptions >** **RevenueCat**.
@@ -218,7 +218,7 @@ Using this action, you can allow users to re-activate the subscription they have
:::
- 
+ 
Adding action to restore purchase
diff --git a/docs/ff-integrations/payments/stripe.md b/docs/ff-integrations/payments/stripe.md
new file mode 100644
index 00000000..09feda37
--- /dev/null
+++ b/docs/ff-integrations/payments/stripe.md
@@ -0,0 +1,274 @@
+---
+slug: /integrations/payments/stripe
+title: Stripe
+description: Learn how to integrate Stripe in your FlutterFlow app.
+tags: [FlutterFlow, Stripe, Payments, Integration]
+sidebar_position: 1
+keywords: [FlutterFlow, Stripe, Payments, Integration]
+---
+
+# Stripe
+
+Stripe helps integrate payment processing into your FlutterFlow app. Using this payment service, you can easily sell products directly inside your application and manage transactions easily.
+
+While using Stripe as the payment provider, users can buy products using credit cards, Apple Pay, or Google Pay.
+
+
+
+
+
+
+:::info[Prerequisites]
+
+Before starting to set up payments, make sure you have,
+
+1. Complete [**Firebase Setup**](../../ff-integrations/firebase/connect-to-firebase-setup.md) for your project.
+2. Enabled [**Firebase Authentication**](../authentication/firebase-auth/auth-initial-setup.md) for your project.
+3. Upgraded your Firebase project to [**Blaze Plan**](https://firebase.google.com/pricing). We use [**Firebase Cloud Functions**](https://firebase.google.com/docs/functions) to process a transaction.
+:::
+
+
+## Stripe Integration
+
+Integrating the Stripe Payments in your app comprises the following steps:
+
+1. [Setup Stripe payment](#1-setup-stripe-payment)
+2. [Apple Pay setup (optional)](#2-apple-pay-setup-optional)
+3. [Trigger Stripe payment](#3-trigger-stripe-payment-action)
+4. [Testing](#4-testing)
+5. [Releasing to production](#5-releasing-to-production)
+
+### 1. Setup Stripe payment
+
+Setting up the Stripe payment includes acquiring the keys from your Stripe account and adding them to FlutterFlow.
+
+:::warning
+You should always try out payments in test mode before releasing them to your production app. Hence, the instructions below will guide you on how to get the test keys.
+:::
+
+Follow the steps below to set up payment using Stripe:
+
+1. Create a new **Stripe account** from [here](https://dashboard.stripe.com/register). If you already have an account, [login](https://dashboard.stripe.com/login).
+2. From the dashboard page, click **Developers**.
+3. Enable **Test Mode** (top right side of your screen).
+4. Switch to the **API keys** tab.
+5. Return to the FlutterFlow project and navigate to **Settings and Integrations** > **In App Purchases & Subscriptions** > **Stripe**. Use the toggle to **Enable Stripe Payments**.
+6. Copy the **Publishable Key** and **Secret Key** from the Stripe API keys page and paste them into the respective fields inside FlutterFlow. If you are using Stripe in test mode, make sure you paste them inside the **Test Credentials** section.
+7. Under the **Additional Settings**, you need to specify the following:
+ 1. **Merchant Display Name** (*Required*): Enter a name for the merchant (you) that the user will see while performing the payment.
+ 2. **Merchant Country Code** (*Required*): Enter your country code. This must be the 3-digit ISO country code, such as USA, IND, and NGA.
+ 3. **Apple Merchant ID** (*Optional*): You need to enter this if you want to accept payments through Apple Pay as well. The instructions for using Apple Pay are in [this section](#2-apple-pay-setup-optional).
+8. Click **Deploy**.
+
+
+
+
+
+
+This would deploy the Stripe payment service as a Firebase Cloud Function. Now, you are ready to trigger payments inside your app.
+
+### 2. Apple Pay setup (optional)
+
+Setting up Apple Pay comprises the following steps:
+
+1. [Creating Apple Merchant ID](#21-creating-apple-merchant-id)
+2. [Uploading Payment Certificate in Stripe](#22-uploading-payment-certificate-in-stripe)
+3. [Adding Apple Merchant ID in FlutterFlow](#23-adding-apple-merchant-id-in-flutterflow)
+
+#### 2.1 Creating Apple Merchant ID
+
+To create Apple Merchant ID:
+
+1. Go to Apple's Developer Center and select [**Certificates, Identifiers & Profiles**](http://developer.apple.com/account).
+2. Under **Identifiers**, select ***Merchant IDs***.
+3. Click the **Add button** (+) in the upper-right corner.
+4. Enter a **Description** and specify an **Identifier**. The identifier is usually defined in the format `merchant` followed by the *Package Name* of your app (you'll find it inside the ***Settings and Integrations*** page of FlutterFlow), for example, `merchant.com.domainname.appname`.
+5. Click **Continue**.
+6. Review the settings, and click **Register**.
+7. Click **Done**.
+8. Now, again under **Identifiers**, select ***Apps IDs***.
+9. Select your app's identifier from the list.
+10. Under **Capabilities**, check the ***Apple Pay Payment Processing*** option.
+11. Click **Configure**.
+12. Select the merchant account that you just created, and click **Continue**.
+13. Click **Save** and then **Confirm** in the dialog.
+
+
+
+
+
+
+#### 2.2 Uploading Payment Certificate in Stripe
+
+To upload a payment certificate in Stripe:
+
+1. First, go to the [**Settings**](https://dashboard.stripe.com/settings) page from your Stripe dashboard and select the **Payment methods** option.
+2. Expand the **Apple Pay** tab under the **Wallets** section.
+3. Click **Configure** to navigate to the [**Apple Pay settings**](https://dashboard.stripe.com/settings/payments/apple_pay) page.
+4. Under **iOS certificates**, click **+ Add new application**.
+5. This will download the **Certificate Signing Request (CSR)** file on your system and click **Continue**.
+6. Select the **Merchant ID** with which you want to associate this certificate, and click **Create Certificate**.
+7. Follow the instructions to **upload the CSR file** that you downloaded from Stripe.
+8. To enable the certificate, click **Activate**. Then click **Download** to save it locally.
+9. Go back to the Stripe page where the dialog box is displayed, and click **Continue**.
+10. Upload the new certificate file.
+11. Once uploaded, you should see the certificate listed under **iOS certificates**.
+
+#### 2.3 Adding Apple Merchant ID in FlutterFlow
+
+To add Apple Merchant ID in FlutterFlow:
+
+1. Navigate to **Settings and Integrations** > **In App Purchases & Subscriptions** > **Stripe**.
+2. Under the **Additional Settings**, enter your **Apple Merchant ID**.
+
+
+
+### 3. Trigger Stripe payment [Action]
+
+In order to initiate a payment using Stripe, you have to use the **Stripe Payment** action.
+
+Follow the steps below to add this action to any widget.
+
+1. Select the **Widget** (e.g., Container, Button, etc.) on which you want to add the 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.
+3. Click on the **+ Add Action**.
+4. On the right side, search and select the **Stripe Payment** (under *Integrations*) action.
+5. Enter or use a variable for specifying the total payment amount under the **Amount** section. The value should be specified in the currency's smallest unit. For example, *$24.99* should be passed as *2499* (as a round-off integer, otherwise it would be automatically rounded), whereas *¥1925* can be simply passed as *1925*. For more information check out [this page](https://stripe.com/docs/currencies#zero-decimal).
+6. Enter the **Currency Code** to be used for the amount, for example, *USD*, *EUR*, *BRL*. Make sure you enter a valid currency code otherwise, the transaction won't go through.
+7. Next, you need to specify the **Customer Email** (required) and **Customer Name** (optional) to be used for the transaction. You can either use a variable or enter the value for them. If you are using authentication, these two values can be retrieved from the ***Authenticated User**.*
+8. Specify a **Description** of the purchase for both your and the user's record.
+9. To enable **Google Pay** or **Apple Pay** as the payment method, turn on the respective toggle. To use Apple Pay, you have to set up a *Merchant ID* by following the steps [here](#2-apple-pay-setup-optional).
+10. Select the **Payment Sheet Theme** among ***System Default***, ***Light Theme***, or ***Dark Theme**.*
+11. Specify the **Primary Button Color** and **Button Text Color** to be used on the payment dialog.
+12. Enter an **Output Variable Name** where the payment ID would be stored on a successful transaction. Later, you can use this variable elsewhere inside the page or pass it to a different page of the app.
+
+:::warning
+Make sure the user is authenticated before triggering the Stripe Payment Action. Otherwise, it will result in an error.
+:::
+
+
+
+
+
+
+### 4. Testing
+
+You can test Stripe payments on mobile and the Web before deployment. To do that:
+
+1. Go to the FlutterFlow project and navigate to **Settings and Integrations** > **In App Purchases & Subscriptions** > **Stripe**.
+2. Make sure the **Is Production** is disabled.
+3. Make sure you have entered the correct **Test Credentials,** such as **Publishable Key** and **Secret Key**.
+4. [Download](../../testing-deployment-publishing/exporting-code/ff-cli.md) and [run](../../testing-deployment-publishing/running-your-app/run-your-app.md) your project..
+5. To test the purchase, you can use any of these [basic test card numbers](https://stripe.com/docs/testing#cards).
+
+### 5. Releasing to production
+
+Before you release the app to production, complete the following steps:
+
+1. [Login](https://dashboard.stripe.com/login) to your Stripe account and navigate to the **Developers** page.
+2. Disable the **Test Mode** (top right side of your screen).
+3. Select **API keys** from the left menu and copy the **Publishable Key** and **Secret Key**.
+4. Return to FlutterFlow; under the **Production Credentials** section, paste the **Publishable Key** and **Secret Key**.
+5. To deploy the Android app, follow the [Google Play Store Deployment](../../testing-deployment-publishing/publishing/google-playstore-deployment.md) guide.
+6. To deploy the iOS app, follow the [App Store Deployment](../../testing-deployment-publishing/publishing/apple-appstore-deployment.md) guide.
+
+---
+
+## FAQs
+
+
+I am getting "Error: Unknown error occurred"
+
+ When encountering the "Error: Unknown error occurred" message, consider these troubleshooting steps:
+
+ 1. **Stripe Settings Adjustment**: In FlutterFlow's Stripe settings, verify the Merchant country code is a 3-digit code, like "USA" instead of "US". If needed, remove previously deployed functions in the Firebase console and redeploy them after updating the country code.
+ 2. **User Authentication Requirement**: Stripe payments require an authenticated user session. Ensure you're attempting the Stripe action after a user has successfully logged in to the app.
+ 3. **Cloud Functions Permissions**: Check that your cloud functions have the 'Cloud Functions Invoker' permission set for allUsers in the Google Cloud console. This permission is typically assigned by default, but it's good practice to double-check.
+
+ 
+
+
\ No newline at end of file
diff --git a/docs/ff-integrations/search/algolia-search.md b/docs/ff-integrations/search/algolia-search.md
new file mode 100644
index 00000000..c133899e
--- /dev/null
+++ b/docs/ff-integrations/search/algolia-search.md
@@ -0,0 +1,508 @@
+---
+slug: /integrations/search/algolia-search
+title: Algolia Search
+description: Learn how to implement algolia search functionality in your FlutterFlow app.
+tags: [FlutterFlow, Algolia Search, Firestore Search]
+sidebar_position: 1
+keywords: [FlutterFlow, Algolia Search, Firestore Search]
+---
+
+# Algolia
+
+Using Algolia you can add search functionality to your FlutterFlow app. It allows you to search for documents present inside a Firestore Collection. Learn how to integrate Algolia Search with your app by following this tutorial.
+
+:::info[Prerequisites]
+Make sure you:
+- Complete [**Firebase Setup**](../../ff-integrations/firebase/connect-to-firebase-setup.md) for your project.
+- Upgraded your Firebase project to [**Blaze Plan**](https://firebase.google.com/pricing).
+- Have at least one **Firestore Collection** on which you want to perform the search queries.
+:::
+
+## Algolia integration
+
+Alogolia integration comprises the following steps:
+
+1. [Setup Algolia](#1-setup-algolia)
+2. [Integrate with Firebase](#2-integrate-with-firebase)
+3. [Import existing documents](#3-import-existing-documents)
+4. [Algolia configuration on FlutterFlow](#4-algolia-configuration-on-flutterflow)
+5. [Choose searchable fields](#5-choose-searchable-fields)
+6. [Using Algolia Search](#6-using-algolia-search)
+
+### 1. Setup Algolia
+
+You need to create an Algolia account for using their search service. Follow the steps below to setup Algolia:
+
+1. Login to [Algolia](https://www.algolia.com/). If you don't have an account, create your free Algolia account by going [here](https://www.algolia.com/users/sign_up).
+2. For a new account, fill up the required details and select a region of the data center.
+3. Once you reach the dashboard of Algolia, go to **Settings**.
+4. Select **Applications**. By default, you should already have an application called "(unnamed application)".
+5. Click on the button with three dots present beside it, and select **Rename**.
+6. Enter a name for the Application and click **Save**.
+
+
+
+
+
+
+### 2. Integrate with Firebase
+
+You have to configure Firebase for integrating the Algolia search, follow the steps below:
+
+1. Go to your **Firebase project dashboard**.
+2. Click on **Extensions**.
+3. Click **Install** under ***Search with Algolia***.
+4. In ***Step 1*** (Review billing and usage), it will show some information related to billing, click **Next**.
+5. In ***Step 2*** (Review APIs enabled and resources created), this extension automatically creates a Cloud Function to interact with Algolia, click **Next**.
+6. In ***Step 3*** (Configure extension), you have to fill in some information related to Algolia:
+ 1. Enter the **Collection Path** which is actually the name of the Collection that you want to make searchable using Algolia.
+ 2. You can skip the **Indexable Fields**.
+ 3. For **Algolia Index Name**, go to the Algolia dashboard and create a new index. Enter the same name in this field.
+ 4. For **Algolia Application Id**, you can go to the Algolia dashboard page, and check its URL, `https://www.algolia.com/apps/`. Copy the `application_id` and enter in the field.
+ 5. For **Algolia API Key**, from the Algolia dashboard go to `Settings > API Keys > All API Keys` and click **New API Key**. Under **Indices**, select the Index that you created earlier. In the **ACL** field, include these options: `addObject`, `deleteObject`, `listIndexes`, `deleteIndex`, `editSettings` & `settings`. Click **Create**. Copy the generated API Key and enter it in the respective field.
+ 6. Select a **Cloud Functions location**.
+ 7. Click **Install Extension**.
+
+Wait for the extension to get installed before proceeding to the next phase.
+
+
+
+
+
+
+### 3. Import existing documents
+
+Once you have the Algolia extension installed on Firebase, it starts monitoring the Collection and automatically adds the documents that are created or updated in the Firestore Collection to Algolia Index.
+
+But for the documents that were present in the Firestore Collection before the extension was installed, won't get added to Algolia Index automatically.
+
+:::info
+You will find the specific instructions for importing your documents to Algolia by going to **Extensions > Manage (under Search with Algolia) > How this extension works** page. To keep it simple, the steps are listed below.
+:::
+
+To use the import script you'll need a **Firebase service account**, follow the steps below:
+
+1. Go to your Firebase project dashboard.
+2. Click **Settings** (the gear icon on the left menu), and select **Project settings**.
+3. Go to the **Service accounts** tab.
+4. Under ***Firebase Admin SDK***, click **Generate new private key**.
+5. In the dialog that opens up, click **Generate key**.
+
+This will download the service account private key to your system, store it in a secure location, and don't share this key anywhere.
+
+
+
+
+
+
+
+Follow the steps below to import your existing documents to Algolia:
+
+1. To run the script, you need to have `npx` installed on your system. If you don't have it installed, install [Node.js](https://www.nodejs.org/) (`npx` comes along with it).
+2. From the Firebase dashboard, go to **Extensions > Manage (under Search with Algolia) > How this extension works** page. Copy the import script and run it on your system, the command will look like this:
+
+```
+ LOCATION=us-central1\
+ PROJECT_ID=\
+ ALGOLIA_APP_ID=\
+ ALGOLIA_API_KEY=\
+ ALGOLIA_INDEX_NAME=\
+ COLLECTION_PATH=\
+ GOOGLE_APPLICATION_CREDENTIALS=\
+ npx firestore-algolia-search
+```
+
+:::warning
+Don't use the above script directly, you need to replace all the angle brackets with the appropriate values of those fields.
+
+It's **recommended** to just copy the script from the page specified above (it will contain all the values specific to your Collection), remove the `FIELDS` and `TRANSFORM_FUNCTION` params if it contains `{ unspecified parameter }`, enter the correct credentials path, and run it.
+:::
+
+After running this command if you navigate to the Algolia Search Index page, you will find all your existing Firebase documents imported there.
+
+
+
+
+
+
+
+### 4. Algolia configuration on FlutterFlow
+
+In order to use Algolia Search in your apps, you have to configure Algolia on FlutterFlow. Follow the steps below:
+
+1. Go to the [FlutterFlow dashboard](https://app.flutterflow.io/).
+2. Click **Settings and Integrations** (the gear icon) from the Navigation Menu (left side menu).
+3. Select **Integrations > Algolia**.
+4. On the **Algolia Configuration** page, first, you have to enter the **Application ID**. You will find it on the Algolia dashboard page, copy the application ID from the URL: `https://www.algolia.com/apps/`.
+5. You will get the **Search API Key** by going to `Algolia Settings > API Keys`. Copy the **Search-Only API Key** and paste it into the respective field of FlutterFlow.
+6. Under **Indexed Collections**, select the Collections to be indexed by Algolia Search.
+
+
+
+
+
+
+
+### 5. Choose searchable fields
+
+If you don't want all the fields of any Collection to be used for searching a document, you can choose the fields that you want to be indexable by Algolia.
+
+Follow the steps below:
+
+1. From the Algolia dashboard, select **Search** (present on the left menu).
+2. Select **Index** under **Configure**, and go to the **Configuration** tab.
+3. Click **+ Add a Searchable Attribute** button.
+4. Enter the **name** of the field that you want Algolia to use while searching.
+5. Repeat **Steps 3 & 4** if you want to add more fields.
+6. Click **Review and Save Settings**, and then **Save Settings** inside the dialog that opens up.
+
+Now, Algolia will only use the fields that you specified here while searching for any term in your app.
+
+
+
+
+
+
+
+### 6. Using Algolia search
+
+There are two methods of using Algolia Search in your app:
+
+- Add an **Action** to trigger the [Algolia Search](#algolia-search) by passing the search term, based upon a user gesture.
+- Add the API Call as a [Backend Query](../../resources/control-flow/backend-logic/backend-query/algolia-search-query.md) that gets triggered automatically as the user navigates to the page.
+
+## Algolia Search
+
+You can trigger an Algolia Search using this Action. This will help users to search for documents present inside a Firestore Collection by providing a search term.
+
+From this page, you will learn to define an Algolia Search Action on FlutterFlow.
+
+### Building Search UI
+
+You need a text that would be provided as the search term while triggering the search query. Usually, you should take the term as user input. A basic search UI contains a TextField and a search IconButton widget.
+
+Follow the steps below to define a search user interface:
+
+1. Drag a TextField widget from the [Widget Panel](../../intro/ff-ui/widget-palette.md) and drop it onto the canvas.
+2. You can customize the TextField properties to match your app's design style.
+3. Now, drag a IconButton widget and drop it onto the canvas. You can use a Row widget to keep both the TextField and the IconButton in the same row. In some cases, it's possible to add them inside the AppBar as well (watch the demo below).
+4. Change the icon of the IconButton widget to a search icon, and customize it if required.
+
+
+
+
+
+
+
+This completes the building of a simple search user interface. Move on to the next step to define the Search Action.
+
+### Define Algolia Search Action
+
+Follow the steps below to define an Algolia Search Action:
+
+1. Select the **widget** (eg., IconButton) on which you want to define the action.
+2. Select **Actions** from the Properties panel (the right menu).
+3. Click **+ Add Action** button.
+4. Choose a gesture from the dropdown among **On Tap, On Double Tap, or On Long Press**.
+5. Select the **Action Type** as ***Algolia Search**.*
+6. Choose the **Firebase Collection** on which to perform the search.
+7. Now, you have to define from where to get the **Search Term**. You can either choose ***Specific Value*** or ***From Variable***. If you want to use a TextField value as the search term, you should choose *From Variable*.
+8. If you have chosen **Specific Value**, define the term inside the field present.
+9. If you have chosen ***From Variable***, select a **Source** from the dropdown menu and then select an option from the **Available Options**. For example, if you want to use the value of a TextField, select the Source as ***Widget State*** and choose the field name under Available Options.
+10. Finally, you can set the number of maximum search results to fetch under **Max Results**.
+
+
+
+
+
+
+
+### Display Search Results
+
+Once you have the Search Action defined, you need to show the results on the UI.
+
+Follow the step below to display the search results in your app:
+
+1. Drag and drop a ListView widget onto the canvas. Create a widget inside the ListView for displaying each of the search results.
+2. Select the ListView widget, click on **Generate Dynamic Children** from the Properties Panel.
+3. Enter a **Variable Name** so that the Algolia search results can be referenced while displaying them inside widgets or while passing it to a different page of the app.
+4. Select the **Source** as the name of the results variable where Algolia search data is stored.
+5. Click **Save**. Then, click **Ok** in the dialog box that pops up.
+6. **Set** the Algolia Search data correctly to each of the widgets where want to display the data.
+For example, if you want to show data inside a Text widget, select the widget, click **Set from Variable**, choose **Source** as the variable name where you stored each of the Algolia search data (in step 3), choose the field name from the **Available Options** dropdown whose data who want to display, click **Save**.
+
+
+
+
+
+
+
+### Passing Search Result to another page
+
+You can use the Algolia search result data from any of the widgets present inside the ListView. To pass this data to a different page of the app, that page should have a **Parameter** defined having the same data type.
+
+Follow the steps below to define a parameter:
+
+1. Go to the page where you want to pass the data.
+2. Click **Define parameters** button present on top of the Properties Panel.
+3. Click **+ Add Parameter**.
+4. Enter a **Parameter Name**.
+5. Select the **Type** as ***Record Reference***.
+6. Choose the **Record Type** from the dropdown menu.
+7. Click **Save**.
+
+
+
+
+
+
+
+Follow the steps below to pass each to the search result to a different page:
+
+1. Select the widget present inside the ListView on which you want to apply the [Navigate](../../ff-concepts/navigation-routing/page-navigation.md#navigate-to-action) Action.
+2. Select **Actions** from the Properties panel (the right menu).
+3. Click **+ Add Action** button.
+4. Choose a gesture from the dropdown among **On Tap, On Double Tap, or On Long Press**.
+5. Select the **Action Type as Navigate**.
+6. Choose Navigation Type as Navigate to Page, select the page under **Navigate To**.
+7. Click **+ Pass in Parameter**.
+8. Select the **Parameter** name from the dropdown.
+9. Choose the **Source** as the Algolia search result variable and select **reference** under **Available Options**.
+
+
+
+
+
+
+
diff --git a/docs/ff-integrations/search/simple-search.md b/docs/ff-integrations/search/simple-search.md
index 2442cbb1..c89fe1bc 100644
--- a/docs/ff-integrations/search/simple-search.md
+++ b/docs/ff-integrations/search/simple-search.md
@@ -3,7 +3,7 @@ slug: /integrations/search/simple-search
title: Simple Search
description: Learn how to implement simple search functionality in your FlutterFlow app to search local data on a device.
tags: [FlutterFlow, Simple Search, Local Search, Firestore]
-sidebar_position: 1
+sidebar_position: 0
keywords: [FlutterFlow, Simple Search, Local Search, Firestore]
---
diff --git a/docs/resources/control-flow/backend-logic/backend-query/query-collection.md b/docs/resources/control-flow/backend-logic/backend-query/query-collection.md
index fe40fcb3..f0e1266c 100644
--- a/docs/resources/control-flow/backend-logic/backend-query/query-collection.md
+++ b/docs/resources/control-flow/backend-logic/backend-query/query-collection.md
@@ -1,25 +1,20 @@
---
slug: /resources/backend-query/query-collection
-title: Query Collection
+title: Query Collection / Table
description: Learn how to query a collection in your FlutterFlow app.
tags: [Query Collection, Backend Query, Backend Logic, Control Flow, FlutterFlow]
sidebar_position: 2
keywords: [Query Collection, Backend Query, Backend Logic, Control Flow, FlutterFlow]
---
-# Query Collection
+# Query Collection / Table
-**Query Collection** helps you to retrieve a record (or a list of records) automatically whenever a
+Quering Firestore Collection or Supabase Table helps you to retrieve a record (or a list of records) automatically whenever a
user navigates to the page containing the query. The information that is present in the record can
be used to update any widget present inside.
:::info[Prerequisites]
-
-In order to use this backend query, you should have:
-
-1. Completed all the steps of
-[**Firebase Setup**](../../../../ff-integrations/firebase/connect-to-firebase-setup.md) for your
- project.
-2. At least one **Firestore Collection** defined in your project.
+- To query Firestore collection, complete the [**Firebase setup**](../../../../ff-integrations/firebase/connect-to-firebase-setup.md) and have some data in a [**Collection**](../../../../ff-integrations/database/cloud-firestore/creating-collections.md).
+- To query Supabase table, complete the [**Supabase**](../../../../ff-integrations/supabase/supabase-setup.md) Setup and have some data in a [**table**](../../../../ff-integrations/supabase/supabase-setup.md#create-tables-in-supabase).
:::
## Defining the Query
@@ -44,10 +39,13 @@ backend query:
button. Select a **Field Name** to be used for ordering, and choose the **Order** to be
either `Increasing` or `Decreasing`.
9. Click **Save**.
-10. If the selected query returns a list of documents and if it's applied to any flexible widget (
- like `Column`, `Row`, or `ListView`) then FlutterFlow will generate the children widgets
+10. If the selected query returns a list of documents and if it's applied to any flexible widget (like `Column`, `Row`, or `ListView`) then FlutterFlow will generate the children widgets
dynamically. A dialog will be displayed with a similar message, click **Ok**.
+:::info
+The instructions to query a Supabase table are almost the same, except that for **Query Type**, you should select **Supabase Query**.
+:::
+
Project Setup > Firebase > Regenerate Config Files**.
+:::
+
+### Initial Page
+
+You can specify your app's **Entry Page** and **Logged In** **Page** from this section.
+
+- **Entry Page**: This is the home page for your app. If authentication is enabled, users who are not logged in will see this page, which is typically set to a login/signup or onboarding page.
+- **Logged In Page** (*available only if auth is enabled*): This page is displayed on the app start if a user is already logged in. Users are automatically navigated to the page you specify here on a successful sign-in attempt.
+
+To set the page, simply choose the page that you want to use from the dropdown menu.
+
+
+
+
+
+
+
+
+### Folder Organization
+
+If you want the improved folder organization for your project, **Enable Updated Folder Organization**. This is especially helpful for older projects; for new projects, this is enabled by default.
+
+
+### Download Settings
+
+- **Run "dart fix"**: Enabling this will run the `dart fix` command when downloading the code. This makes the generated code cleaner and potentially more performant.
+- **Download Unused Project Assets**: Enable this option to download all assets, including those that are not currently used in the project. This is useful when you need to access and use the assets in custom code or other parts of your project.
+
+
+### Routing & Deep Linking
+
+From here, you can configure the global settings for navigation and deep link in your app [here](../../../ff-concepts/navigation-routing/deep-dynamic-linking.md).
+
+
+If you prefer watching a video tutorial, here is the guide for you:
+
+
+
+
+
+## App Assets
+
+This allows you to upload the images to be used by the app. From here, you can upload the Initial splash image and the image for the app launcher icon.
+
+### Splash
+
+Splash screens are the first thing users see when your app starts up. They give the app time to get ready while showing you something fun or informative. This screen typically contains the image or logo of the app.
+
+The steps to configure the splash screen are as follows:
+
+1. Navigate to the **Setting and Integrations** from the Navigation Menu > **General** section > **App Assets**.
+
+2. Under the **Splash** section, click on the **Upload Image** button and upload the image you would like to display on the splash screen.
+3. You can try any of the **Image Fit** options to determine how the uploaded image should display on the splash screen.
+4. To control the image dimension by yourself, you can set the **width** and **height** properties.
+ - To set an **exact size,** select **PX** and enter the desired values.
+ - To set the dimensions as a **% of the screen size**, select **%** and enter the desired value.
+5. The **Min Duration** property helps you set the time for which the splash screen will be visible, where (1000ms = 1 second).
+6. You can also set a **Background Color** to match the background of the image.
+7. In mobile apps, you might occasionally notice a blank white screen briefly appearing (as the Flutter engine loads) before the splash screen is displayed. To change the color of this screen, use the **Pre-loading** Color property.
+8. Typically, web apps don't use a splash screen, so If you prefer a more traditional web experience, you can choose to **Disable for Web**.
+
+
+
+
+### Launcher Icon
+
+The launcher icon (also known as the app icon) represents your application. When you open the launcher app, it shows the app icons for all the installed apps. It acts as an entry point for your app. The image asset that you will upload here will be used as the app launcher icon.
+
+To add the app launcher icon:
+
+1. Click on the **Setting and Integrations** from the Navigation Menu (left side of your screen).
+2. Under the **General** section, select **App Assets**.
+3. Under the **Launcher Icon** section, click on the **Upload Image** button.
+4. By clicking on the **Unset** dropdown menu, you can also select from the already uploaded images to the Project Media/Assets.
+5. [Download the project](../../../testing-deployment-publishing/exporting-code/ff-cli.md) and run the following command in your terminal to generate the launcher icon:
+
+ `flutter pub run flutter_launcher_icons:main`
+
+6. [Run your app](../../../testing-deployment-publishing/running-your-app/run-your-app.md) on a real device or emulator to see the app launcher icon.
+
+### Android Adaptive Icon
+
+[Adaptive icons](https://developer.android.com/develop/ui/views/launch/icon_design_adaptive) are a design specification that allows app icons to adapt to different device environments without losing consistency in appearance. Unlike traditional launcher icons, which are static and can appear out of place or poorly scaled on different devices, adaptive icons consist of two layers:
+
+1. **Foreground layer**: This layer usually contains the logo or main visual element of the icon.
+2. **Background layer**: This provides a fill (color or background image) behind the foreground, which can be manipulated by the device’s software.
+
+Here are the steps to add adaptive icons:
+
+1. [Create an adaptive icon](https://developer.android.com/develop/ui/views/launch/icon_design_adaptive#design-adaptive-icons). You can either use this [online tool](https://icon.kitchen/) or use these [resources](#create-adaptive-icon) to create one.
+2. Return to FlutterFlow and navigate to **Setting and Integrations > General** > **App Assets > Android Adaptive Icon.**
+ 1. Upload the **Foreground Icon**. If you use the online tool, you'll find it inside the `IconKitchen-Output > android > res > mipmap-xxxhdpi > ic_launcher_foreground.png`.
+ 2. For **Background Type**, you can either set the **Color** or **Image**. It's recommended to use a color that aligns with your app's branding for a cohesive look.
+3. [Download the project](../../../testing-deployment-publishing/exporting-code/ff-cli.md) and run the following command in your terminal to generate the launcher icon:
+
+ `flutter pub run flutter_launcher_icons:main`
+
+4. [Run your app](../../../testing-deployment-publishing/running-your-app/run-your-app.md) on a real device or emulator to see the app launcher icon.
+
+
+
+#### Useful resources
+
+See the following resources for more information on Android adaptive icons.
+
+#### Create Adaptive Icon
+
+- [Create app icons in Android Studio](https://developer.android.com/studio/write/create-app-icons#create-adaptive)
+- [Figma template](https://material.uplabs.com/posts/adaptive-icon-sticker-sheet) (requires login)
+- [Affinity Designer template](https://cyrilmottier.com/2017/07/06/adaptive-icon-template/)
+- [Bjango templates](https://github.com/bjango/Bjango-Templates) include adaptive icons
+- [Adobe XD template](https://github.com/faizmalkani/adaptive-icon-template-xd)
+
+#### Adaptive Icon Fundamentals
+
+- [Understanding Android Adaptive Icons](https://medium.com/google-design/understanding-android-adaptive-icons-cee8a9de93e2)
+- [Designing Adaptive Icons](https://medium.com/google-design/designing-adaptive-icons-515af294c783)
+- [Implementing Adaptive Icons](https://medium.com/google-developers/implementing-adaptive-icons-1e4d1795470e)
+
+## Nav Bar & App Bar
+See how to configure the [Nav Bar](../../ui/pages/page-elements.md#enable-nav-bar-in-settings) and the [App Bar](../../ui/pages/page-elements.md#appbar).
\ No newline at end of file
diff --git a/docs/resources/projects/settings/project-setup.md b/docs/resources/projects/settings/project-setup.md
new file mode 100644
index 00000000..5b83f060
--- /dev/null
+++ b/docs/resources/projects/settings/project-setup.md
@@ -0,0 +1,535 @@
+---
+slug: project-setup
+title: Project Setup
+tags: [Setup, Permissions, Multiple Languages]
+keywords: [permission message, enabling platforms, support multiple languages, adding custom permissions, walkthrough]
+description: Learn how to setup your project in FlutterFlow.
+sidebar_position: 0
+---
+import Tabs from '@theme/Tabs';
+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.
+
+## 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.
+
+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.
+
+:::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.
+- See how to [**request permission**](#request-permission-action).
+:::
+
+
+ 
+ Asking for camera permission before capturing a photo
+
+
+
+### Adding permission message
+
+Although we add some default permission messages, you must change them to clearly mention the reason for asking the permission(s).
+
+To add 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).
+
+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.
+
+
+
+### Adding 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.
+
+To add 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.
+
+
+
+
+
+
+
+:::info[Adding translation for messages]
+You can also add multilingual permission messages by following the instructions [**here**](../../../ff-concepts/localization-accessibility/add-multiple-languages.md).
+:::
+
+### Request Permission [Action]
+
+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.
+
+:::info
+- Request permission only works on a mobile platform.
+- There won't be any dialog shown for the *Bluetooth* and *Notifications* permissions.
+:::
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+#### Adding Request Permission action
+
+Follow the steps below to add this action to any widget.
+
+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**.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+---
+## 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.
+
+### 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.
+- **Minimum SDK Version**: This defines the lowest version of Android that your app can run on. Setting a higher minimum SDK version ensures your app can use newer APIs and features but may limit the devices that can install it.
+- **Compile SDK Version**: This refers to the version of Android that your code is compiled against. It determines the APIs your app can use. To change it, enter the desired SDK version here.
+- **Target SDK Version**: This is the version of Android that your app is intended to run on. It helps Android ensure forward compatibility by applying certain behavior changes only if the target SDK is high enough. To adjust this, enter the desired version here.
+
+---
+
+### 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.
+- **Minimum iOS Version**: This specifies the lowest version of iOS that your app can run on.
+
+---
+
+### Advanced Web Settings
+
+- **Use Original Engine Initialization**: This setting uses the original Flutter web engine initialization, which can sometimes improve loading times in deployed web apps. Enable this option if you experience performance issues with the custom initialization process.
+- **Use CanvasKit**: CanvasKit provides better performance and fidelity for rendering on the web by leveraging WebAssembly. This setting can improve the visual quality and performance of your app, especially for complex graphics and animations. Enable this option to use CanvasKit for rendering on the web.
+
+---
+
+## Multiple Languages
+To support multiple languages in your app, refer [here](../../../ff-concepts/localization-accessibility/add-multiple-languages.md).
+
+---
+
+## Walkthroughs
+
+A walkthrough in app development is a guided tour of the app's features and functionality, typically presented to the user when they first launch the app. It is designed to help new users understand how to use the app and navigate its various sections.
+
+For example, consider a news article app. When a new user opens the app for the first time, they might be greeted with a series of pop-ups that highlight key features such as watching article videos, subscribing to article updates, and filtering articles by tags.
+
+
+
+
+
+
+The steps to create and display a walkthrough in your app are as follows:
+
+1. [Create walkthrough](#1-create-walkthrough)
+2. [Start walkthrough](#2-start-walkthrough)
+3. [Get notified on walkthrough skipped and completed](#3-get-notified-on-walkthrough-skipped-and-completed)
+
+### 1. Create walkthrough
+
+To create a walkthrough:
+
+1. Navigate to **Settings and Integrations** > **General** > **Walkthroughs >** click **Create New**.
+2. Start with providing the **Name**, **Description** and then select the **Page** on which you want to show the walkthrough. The name you enter will be used to initiate the walkthrough later.
+3. Now, we must add the steps for our walkthrough. Each step that we add here acts as a separate screen or popup that nicely animates to highlight the UI element. To add steps:
+ 1. Click on the **+ Add Step**.
+ 2. Choose the widget to highlight by clicking **Widget Unset**. In the right-side preview, select the desired widget and click **Confirm**.
+ 3. When the widget is in focus, you may want to present information about it; this could be a simple text or a custom component (e.g., a text with an arrow). You have complete control over what you want to display via a [component](../../../resources/ui/components/overview.md). Click the diamond icon to create a new component and then set it to **Content**.
+ 4. You can also choose where the Content will be displayed by setting the **Content Alignment**.
+ 5. Choose a **Focus Shape** for the widget—either **Circle** or **Rectangle**.
+ 6. Pick an **Overlay Color** that you want to display when the widget is highlighted.
+ 7. By default, we also add a skip button on the screen, and you can align it using the **Skip Alignment** option.
+ 8. Add additional steps by repeating the process for all UI elements you wish to feature.
+
+ 
+
+4. To preview the walkthrough, click the **Start Preview** button and use the arrows to navigate through the steps.
+5. To rearrange the steps, enable the **Reorder** option and then use the arrows to adjust their sequence.
+6. Click the **Add Walkthrough** to save.
+
+
+
+
+
+
+### 2. Start Walkthrough [Action]
+
+After creating a walkthrough, you can display it on a page using the Start Walkthrough action. Follow the steps below to add this action on a page load.
+
+1. Walkthroughs are generally presented immediately upon page load. Therefore, open the page where you would like the walkthrough to be showcased.
+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.
+3. Ensure the **On Page Load** is selected and click on the **+ Add Action**.
+4. On the right side, search and select the **Walkthrough > Start Walkthrough** (under *Widget/UI Interactions*) action.
+5. Click to **Select Walkthrough** that you have created.
+
+
+
+
+
+
+### 3. Get notified on walkthrough skipped and completed
+
+Sometimes, you might want to get a callback to know whether the walkthrough is skipped or completed. For example, you could set up a callback to gather analytics or trigger a specific action once the walkthrough is finished, such as directing the user to a new page or enabling certain features of the app.
+
+When a walkthrough is added on a page, you'll see the following types of actions (aka callbacks), and you can choose any of them to add actions under it.
+
+1. **On Walkthrough Complete**: Actions added under this will be triggered whenever the user finishes all the steps of the walkthrough.
+2. **On Walkthrough Skip**: Actions added under this will be triggered whenever the user chooses to skip the walkthrough.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Here's how you do 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.
+
+
+
+
+
+
+### Video guide
+
+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?
+
+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.
+
+
+
+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.
+
+
+
+
+
+
+
+
+
+My widget is not highlighting on a scrollable page. What should I do?
+
+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!
+
+
\ No newline at end of file
diff --git a/docs/resources/projects/what-is-a-project.md b/docs/resources/projects/what-is-a-project.md
index a286b865..08ce00f5 100644
--- a/docs/resources/projects/what-is-a-project.md
+++ b/docs/resources/projects/what-is-a-project.md
@@ -5,7 +5,7 @@ authors: john
description: Understand what constitutes a project in FlutterFlow and how to manage them effectively.
tags: [Project Management, FlutterFlow, Projects]
toc_max_heading_level: 5
-sidebar_position: 1
+sidebar_position: 0
keywords: [Project Management, FlutterFlow, Projects]
---
diff --git a/docs/resources/ui/widgets/built-in-widgets/imgs/infinite-scroll-behind-scene.avif b/docs/resources/ui/widgets/built-in-widgets/imgs/infinite-scroll-behind-scene.avif
new file mode 100644
index 00000000..dd122669
Binary files /dev/null and b/docs/resources/ui/widgets/built-in-widgets/imgs/infinite-scroll-behind-scene.avif differ
diff --git a/docs/resources/ui/widgets/built-in-widgets/imgs/pagination-variable.png b/docs/resources/ui/widgets/built-in-widgets/imgs/pagination-variable.png
new file mode 100644
index 00000000..f5a08465
Binary files /dev/null and b/docs/resources/ui/widgets/built-in-widgets/imgs/pagination-variable.png differ
diff --git a/docs/resources/ui/widgets/built-in-widgets/list-grid.md b/docs/resources/ui/widgets/built-in-widgets/list-grid.md
index e0265b93..47afbcca 100644
--- a/docs/resources/ui/widgets/built-in-widgets/list-grid.md
+++ b/docs/resources/ui/widgets/built-in-widgets/list-grid.md
@@ -275,12 +275,153 @@ Here's a quick demo to show how to add a GridView widget and modify its properti
:::tip[Video Tutorial]
If you prefer watching a video tutorial, here's the one for you:
-
+:::
+
+## Adding infinite scroll
+
+The infinite scroll automatically loads the new items as you scroll down the list. It works by showing only a limited number of items (e.g., 15, 25) at first and loads subsequent items before the user reaches the end of the list. At the end of the list, a circular progress bar is visible as the new items are loaded.
+
+
+
+
+
+
+
+
+Adding infinite scroll helps you improve the user experience by reducing the initial waiting time (as without infinite scroll, it would take more time to load the long list) and loading new items only when required.
+
+The infinite scroll can be added to the list of items retrieved from two sources:
+
+- [Infinite scroll on a list from the Firestore collection](#infinite-scroll-on-a-list-from-the-firestore-collection)
+- [Infinite scroll on a list from API call](#infinite-scroll-on-a-list-from-api-call)
+
+### Infinite scroll on a list from the Firestore collection
+
+In FlutterFlow, you can directly enable the infinite scroll on a list of items received from the Firestore collection.
+
+To enable the infinite scroll:
+
+1. [Query a collection](../../../control-flow/backend-logic/backend-query/query-collection.md) on a ListView (skip if you have already done so).
+2. Select the ListView, move to the properties panel and, select the **Backend Query** section.
+3. Scroll down the already added query and **turn on** the **Enable Infinite Scroll**.
+4. On enabling the infinite scroll, the **Listen For Changes** property also gets enabled. That means the list automatically updates if changes are made to the item. This is done to keep all the items up to date on the screen. However, it does not update the list if any new item is added or deleted. In rare cases, you would need to disable this feature. To do so, turn off this property.
+5. In infinite scroll, the items are loaded in chunks called pages. The number of items to load on a single page is determined by the **Page Size** property. By default, the value is set to 25 (i.e., load 25 items per page). The ListView loads the first page as soon as it is visible on the screen, and the subsequent pages (with the number of items defined in the Page Size property) are loaded as you scroll down the screen. You can adjust this value according to your design and requirements.
+6. Click **Save**.
+
+
+
+
+
+
+### Infinite scroll on a list from API call
+
+To add an infinite scroll on the API call, you must have an endpoint that supports pagination with at least one query parameter that accepts a page number like page, offset, etc.
+
+#### Pagination Variables
+When you add the paginated API call in the builder and enable the infinite scroll, we provide you the following pagination variables that you can pass to your API variables. These will be available inside the **Set Variable** menu.
+
+
+
+1. **Next Page Index**: You can pass this variable for the query parameter that accepts the page number. The default value is 0 and keeps increasing by one as you scroll down the list until it reaches the end.
+2. **#(Number of) Loaded Items**: This equals the number of items returned by the paginated API call.
+3. **Last Response**: This is useful if you want to get anything from the last response that might help you retrieve the next set of data.
+
+:::tip
+When passing the *Number of Loaded Items* for query parameters like *limit*, *per_page*, *size,* etc., use a *Specific Value,* such as 15,20.
:::
+Adding infinite scroll includes:
+
+1. [Add paginated API call](#1-add-paginated-api-call)
+2. [Passing pagination variable in API call query](#2-passing-pagination-variable-in-api-call-query)
+
+#### 1. Add paginated API call
+
+The paginated API is the API that returns the result in chunks. Most of the paginated API requires you to add the query parameters to know how many items to retrieve and from where to start.
+
+For example, this API call https://reqres.in/api/users?per_page=20&page=1 requires `per_page` parameter that specifies 20 items to load per page, and `page` parameter tells to start from the first page. This is called page-based pagination.
+
+See [how to add the paginated API](../../../control-flow/backend-logic/api/rest-api.md#passing-query-parameters) call by adding query parameters.
+
+#### 2. Passing pagination variable in API call query
+
+This step includes adding the ListView -> ListTile widget and querying the paginated API call.
+
+1. First, query and show data from API calls.
+2. While querying the API call, pass the query parameter value from the pagination variable.
+
+
+
+
+
+
+
## Pull to Refresh on ListView or GridView
:::info