diff --git a/docs/ff-concepts/localization-accessibility/_category_.json b/docs/ff-concepts/localization-accessibility/_category_.json
index 413d3e3a..fc7c8340 100644
--- a/docs/ff-concepts/localization-accessibility/_category_.json
+++ b/docs/ff-concepts/localization-accessibility/_category_.json
@@ -1,4 +1,4 @@
{
- "label": "Localization & Accessibility",
+ "label": "Accessibility & Localization",
"position": 7
}
\ No newline at end of file
diff --git a/docs/ff-concepts/localization-accessibility/accessibility.md b/docs/ff-concepts/localization-accessibility/accessibility.md
new file mode 100644
index 00000000..6f60424a
--- /dev/null
+++ b/docs/ff-concepts/localization-accessibility/accessibility.md
@@ -0,0 +1,111 @@
+---
+slug: /concepts/accessibility
+title: Accessibility
+tags: [Accessibility]
+keywords: [FlutterFlow, Accessibility, Screen Reader Support, Semantic Labels]
+description: Learn how to make your app accessible to everyone.
+sidebar_position: 0
+---
+# Accessibility
+
+Accessibility is about making your app usable for everyone, including individuals with visual, auditory, cognitive, or motor impairments. Ensuring your app is accessible not only benefits users with disabilities but also improves the overall user experience and usability of the app for everyone.
+
+Here are some examples of how accessibility can help users with disabilities:
+
+- **Screen Readers for Visually Impaired Users**: Screen readers like **TalkBack** (Android) and **VoiceOver** (iOS) help visually impaired users navigate and understand the app by reading aloud on-screen content.
+- **Large Touch Targets for Motor Impairments**: Large touch targets make it easier for users with motor impairments to interact with buttons and other UI elements.
+- **Color Contrast for Visual Impairments**: High-contrast color schemes ensure text and interactive elements are easily readable for users with visual impairments.
+- **Keyboard Navigation for Physical Impairments**: Users unable to use touchscreens can navigate the app effectively with keyboard controls.
+- **Haptic Feedback**: Tactile responses help users with visual or motor impairments understand when interactions are successful.
+
+In FlutterFlow, you can enhance the accessibility of your app by incorporating various accessibility features, such as semantic labels, keyboard navigation, haptic feedback, responsive fonts, and proper color contrast.
+
+Here are some key accessibility features you can use:
+
+## Semantic Label
+
+You can use **Semantic Labels** to provide custom descriptions, hints, or to emphasize the importance of specific parts of the widget tree. This ensures that screen reader users receive clear and meaningful information about each widget more effectively.
+
+For example, in an e-commerce app, you can add a semantic label to an '*Add to Bag*' button with a message like '*Add the selected item to cart*', which helps users better understand the button's action.
+
+To add a semantic label for any widget, select the widget, move to the properties panel (right side), tap the document icon inside the **Accessibility & Semantic Label** section, add the message, and click **Save**.
+
+
+
+
+
+
+
+Moreover, to add a semantic label for every widget in your app that has an action trigger `OnTap` or `onLongPress`, you can enable the **Add Warning for Semactic Widgets**. By doing so, you'll get a warning if any widget has action but doesn't have a semantic label added yet.
+
+:::tip
+
+You can click on the warning item to directly navigate to that widget.
+
+:::
+
+
+
+After you add semantic labels, enable **TalkBack** on Android or **VoiceOver** on iOS to test how screen readers interact with your app. These screen readers will help you verify that all UI elements are read clearly, descriptions are meaningful, and users can navigate logically without getting lost.
+
+Learn more about [enabling screen reader on your device](https://docs.flutter.dev/ui/accessibility-and-internationalization/accessibility#screen-readers).
+
+## Keyboard Navigation
+
+You can use the [On Shortcut Press](../../resources/ui/pages/page-lifecycle.md#on-shortcut-press-action-trigger) action trigger to bind keyboard shortcuts to specific actions. This makes it easier for users with disabilities to navigate your app, especially in web and desktop environments.
+
+It enhances accessibility by allowing users to interact without relying solely on a mouse or touchscreen, making the experience more inclusive and efficient.
+
+## Haptic Feedback
+
+Using [Haptic Feedback](../alerts-notification/haptic-feedback.md), you can vibrate the user's device, which is particularly helpful for users with visual or cognitive impairments. It provides a tactile response to indicate that an action has been completed.
+
+For example, vibrating the user's device when successfully submitting a form.
+
+## Responsive Fonts
+
+When developing an app, it's important to consider the different platforms on which it will run. Text may appear smaller on devices with higher screen resolution, such as tablets, web, or desktops, which can negatively impact accessibility for users with visual impairments.
+
+[Adding responsive text](../design-system/design-system.md#adding-responsive-text-styles) that adjusts font size based on the platform helps make content more readable, improving accessibility for users who need larger or more legible text.
+
+## Color Contrast
+
+Use sufficient color contrast to make text and interactive elements readable for users with visual impairments or color blindness. This helps ensure that content is easily distinguishable, even for users with limited vision. Learn more about using various ways to [add colors](../design-system/design-system.md#colors) in your FlutterFlow app.
+
+:::tip
+You can use tools like [**WCAG Contrast Checker**](https://webaim.org/resources/contrastchecker/) to validate the color contrast ratio.
+:::
+
+## Best Practices
+
+- Accessibility should be considered from the start of the design and development process, not added as an afterthought.
+- While adding [semantic labels](#semantic-label):
+ - Avoid ambiguous labels like "Click here" or "Press this"; instead, use descriptive phrases such as "Submit form" or "Navigate to settings."
+ - Instead of just showing an icon, add semantic labels like "Back button" or "Search button" to provide context for screen readers.
+- Ensure that interactive widgets have a minimum touch target size of 48x48 logical pixels. This helps users with motor impairments easily interact with buttons, switches, and other components.
+- Always test your app with screen readers enabled to verify that it behaves as expected.
+- Don't use color as the only means to convey important information. Include text, icons, or patterns to supplement color, making the content accessible to colorblind users.
+- Verify your app's UI under high contrast or larger text sizes to ensure it remains readable and usable.
+- Use simple gestures like taps and double-taps instead of multi-finger swipes or long presses. Provide alternate ways to perform actions, such as using a button in addition to a swipe gesture.
+- Perform usability tests with individuals with disabilities. Real user feedback is invaluable for identifying issues that might not be caught during standard testing.
\ 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
deleted file mode 100644
index 3d222b6c..00000000
--- a/docs/ff-concepts/localization-accessibility/add-multiple-languages.md
+++ /dev/null
@@ -1,534 +0,0 @@
----
-slug: /concepts/multiple-languages
-title: Localizing App
-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
----
-
-# Localizing App
-
-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-add-set-app-language-action)
-
-### 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/basic-widgets/text.md) Widget that shows some texts.
-4. Add a [**Button**](../../resources/ui/widgets/basic-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](#inside-language-settings)
-- [Inside App Builder](#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](#ios-permission-messages)
-- [Preset Snackbar Messages](#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](#current-language-code)
-- [Language dependent text](#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/basic-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/basic-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/basic-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/basic-widgets/button.md) widgets with an action to change the language. To change the language manually, find the instructions [here](#changing-app-language-manually).
-
-
-
-
-
-
-:::tip[Language Selector Widget]
-You can also use our in built component **[LanguageSelector widget](language-selector.md)** to allow the user the set the language of your app from a language dropdown.
-:::
diff --git a/docs/ff-concepts/localization-accessibility/imgs/add-warning-for-semantic-widgets.avif b/docs/ff-concepts/localization-accessibility/imgs/add-warning-for-semantic-widgets.avif
new file mode 100644
index 00000000..2bc9a57e
Binary files /dev/null and b/docs/ff-concepts/localization-accessibility/imgs/add-warning-for-semantic-widgets.avif differ
diff --git a/docs/ff-concepts/localization-accessibility/imgs/language-selector-properties.avif b/docs/ff-concepts/localization-accessibility/imgs/language-selector-properties.avif
new file mode 100644
index 00000000..2f4cf399
Binary files /dev/null and b/docs/ff-concepts/localization-accessibility/imgs/language-selector-properties.avif differ
diff --git a/docs/ff-concepts/localization-accessibility/imgs/localize-currency.avif b/docs/ff-concepts/localization-accessibility/imgs/localize-currency.avif
new file mode 100644
index 00000000..1ec62011
Binary files /dev/null and b/docs/ff-concepts/localization-accessibility/imgs/localize-currency.avif differ
diff --git a/docs/ff-concepts/localization-accessibility/imgs/localize-dates.avif b/docs/ff-concepts/localization-accessibility/imgs/localize-dates.avif
new file mode 100644
index 00000000..f2979f61
Binary files /dev/null and b/docs/ff-concepts/localization-accessibility/imgs/localize-dates.avif differ
diff --git a/docs/ff-concepts/localization-accessibility/imgs/localize-numbers.avif b/docs/ff-concepts/localization-accessibility/imgs/localize-numbers.avif
new file mode 100644
index 00000000..49bc04ae
Binary files /dev/null and b/docs/ff-concepts/localization-accessibility/imgs/localize-numbers.avif differ
diff --git a/docs/ff-concepts/localization-accessibility/imgs/manage-translation-in-language-settings.avif b/docs/ff-concepts/localization-accessibility/imgs/manage-translation-in-language-settings.avif
new file mode 100644
index 00000000..95b7f97b
Binary files /dev/null and b/docs/ff-concepts/localization-accessibility/imgs/manage-translation-in-language-settings.avif differ
diff --git a/docs/ff-concepts/localization-accessibility/imgs/manage-translation-in-properties-panel.avif b/docs/ff-concepts/localization-accessibility/imgs/manage-translation-in-properties-panel.avif
new file mode 100644
index 00000000..98c788b9
Binary files /dev/null and b/docs/ff-concepts/localization-accessibility/imgs/manage-translation-in-properties-panel.avif differ
diff --git a/docs/ff-concepts/localization-accessibility/imgs/retrieve-lang-data.png b/docs/ff-concepts/localization-accessibility/imgs/retrieve-lang-data.png
new file mode 100644
index 00000000..0ba228cd
Binary files /dev/null and b/docs/ff-concepts/localization-accessibility/imgs/retrieve-lang-data.png differ
diff --git a/docs/ff-concepts/localization-accessibility/imgs/set-app-lang-action.png b/docs/ff-concepts/localization-accessibility/imgs/set-app-lang-action.png
new file mode 100644
index 00000000..26a6ed2e
Binary files /dev/null and b/docs/ff-concepts/localization-accessibility/imgs/set-app-lang-action.png differ
diff --git a/docs/ff-concepts/localization-accessibility/language-selector.md b/docs/ff-concepts/localization-accessibility/language-selector.md
deleted file mode 100644
index c771fa01..00000000
--- a/docs/ff-concepts/localization-accessibility/language-selector.md
+++ /dev/null
@@ -1,180 +0,0 @@
----
-slug: /concepts/multiple-languages/language-selector
-title: Language Selector Widget
-tags: [Multilingual, Base Elements]
-keywords: [FlutterFlow, Language Selector, Base Widget, Multilingual, Localization, Internationalization]
-description: Learn how to add the LanguageSelector widget in your FlutterFlow app.
----
-
-# LanguageSelector
-The LanguageSelector widget is used to allow a user to set the language of your app. The LanguageSelector widget shows the currently selected language and opens up a list of all languages (that you support) when you tap on it.
-
-For example, you can use the LanguageSelector widget on the onboarding screen to let users choose the app language.
-
-## Adding LanguageSelector Widget
-
-Let's build an example of adding the LanguageSelector and see how the app language changes when selecting a different language from the LanguageSelector. Here's how it looks:
-
-
-
-
-
-
-To add LanguageSelector to your project:
-
-1. Make sure you have added multi-language support to your app. If you haven't already done so, find the instructions here.
-2. First, drag the **Column** widget from the **Layout Elements** tab (in the Widget Panel).
-3. Now, add the **LanguageSelector** widget (inside Column) by dragging it from the **Base Elements** tab or adding it directly from the widget tree. Align it in the center.
-4. Add the [**Text**](../../resources/ui/widgets/basic-widgets/text.md) widget to show the text.
-5. Translate the text by navigating to Settings and Integration -> General -> Languages -> App Content Translations -> Page Name -> Your Text.
-6. Find the language dropdown above the canvas and try changing it to other languages and see the translated text appear on the canvas.
-
-
-
-
-
-
-
-## Customization
-
-You can customize the behavior of this widget using the various properties available under the [Properties Panel](../../resources/ui/widgets/widget-properties.md).
-
-### Customizing Flag
-
-By default, the LanguageSelector widget shows the country flag before the language name. You can change the flag's size, adjust the spacing between flag and language name or completely hide the flag.
-
-
-
-
-
-
-### Adding Space between Flag and Text
-
-To add some space between the flag and the language name:
-
-1. Select the **LanguageSelector** widget from the widget tree or from the canvas area.
-2. Move to the Property Editor (on the right side of your screen) and scroll down to the **Language Selector** section.
-3. Find the **Flag & Text Gap** property and enter the value.
-
-
-
-
-
-
-### Hiding the Flag
-
-To hide the flag:
-
-1. Select the **LanguageSelector** widget from the widget tree or from the canvas area.
-2. Move to the Property Editor (on the right side of your screen) and scroll down to the **Language Selector** section.
-3. Checkmark the **Hide Flags** property to hide the flag (click on it).
-
-
-
-
-
\ No newline at end of file
diff --git a/docs/ff-concepts/localization-accessibility/localization.md b/docs/ff-concepts/localization-accessibility/localization.md
new file mode 100644
index 00000000..38534c8b
--- /dev/null
+++ b/docs/ff-concepts/localization-accessibility/localization.md
@@ -0,0 +1,218 @@
+---
+slug: /concepts/localization
+title: Localization
+tags: [Localization, Internationalization]
+keywords: [FlutterFlow, multiple languages, app localization, internationalization, multilingual support, Language Selector]
+description: Learn how to make your app work for different languages.
+sidebar_position: 1
+---
+
+# Localization
+
+**Localization** (often abbreviated as **l10n**) is the process of making your app work for different languages, regions, and cultures. It involves translating the app's text, adapting date and number formats, and adjusting other elements to meet the cultural expectations of a particular locale.
+
+:::info[Difference Between Internationalization and Localization]
+
+- [**Internationalization (i18n)**](https://docs.flutter.dev/ui/accessibility-and-internationalization/internationalization): This is the process of setting up your app in such a way that it can easily adapt to various languages and regions without requiring engineering changes. **Note that FlutterFlow handles most of the internationalization for you, so the only thing you need to take care of is localization.**
+- **Localization (l10n)**: This is the process of translating the content of your app and adapting it for a specific locale or culture. It involves providing translations for user-visible strings, formatting dates, times, and numbers, and adapting content to meet cultural norms.
+
+In a nutshell, internationalization is about making your app to support multiple languages, while localization is the actual process of translating the content and adapting it to specific locales.
+
+:::
+
+## Add Multi Language Support
+
+FlutterFlow enables you to translate all text in your app at once using Google Translate or to manually adjust translations as needed. Additionally, you can localize predefined messages, such as permission prompts, authentication snackbars, and other in-app notifications.
+
+Adding multi-language support is essential for making your app accessible to a wider audience. For instance, if your app provides exercise instructions only in English, non-English speakers may find it hard to understand and might choose a different app, even if it’s less effective, simply because it’s available in their language. Implementing a multi-language feature helps your app succeed globally by offering a user-friendly experience for diverse audiences.
+
+To add multi-language support in FlutterFlow, navigate to **Settings and Integrations** > **Languages**, add the languages to support, set a primary language as a fallback, and optionally choose a display language. Then, use **Translate All** for automatic translations and adjust them if needed. Finally, verify translations on different pages by changing the language dropdown in the canvas.
+
+:::warning
+
+Changing the primary language after translating all of your text will clear the existing translations for other languages.
+
+:::
+
+
+
+
+
+
+
+## LanguageSelector Widget
+
+The **LanguageSelector** widget in FlutterFlow allows users to switch to their preferred language in real-time without needing to restart the app. It displays the currently selected language and, when interacted with, presents a list of all available languages for easy selection.
+
+It's particularly useful on onboarding screens or within settings menus to allow users to customize their language preferences.
+
+### LanguageSelector Properties
+
+You can customize the appearance using the various properties available under the Properties Panel.
+
+
+
+:::tip
+
+By default, the **LanguageSelector** widget does not persist the user's language choice across app sessions. To retain the selected language, enable the **Persist Selection** option under Language Settings.
+
+:::
+
+## Set App Language Manually [Action]
+
+Sometimes, you might prefer not to use the default [LanguageSelector widget](#languageselector-widget) and instead implement a custom widget for language switching. For example, you could create a custom language selection screen that appears when the app first launches.
+
+You can use the **Set App Language** action to let users choose their preferred language from the available options.
+
+:::info
+
+Note that this action affects only the app's language and does not modify the device's system language.
+
+:::
+
+
+
+## Managing Translation
+
+There are two ways you can manage the app text translation:
+
+**Inside Language Settings**
+
+The Language Settings page lists all of your app's text, grouped by page, making it easy to manage translations in bulk.
+
+To manually add or update a translation, make changes directly in the language column and mark the text as **Fixed**. Marking it as **Fixed** will prevent auto translate from overriding your custom translations during the bulk translation process.
+
+To use Google Translate for new or existing text, click **Translate Page.**
+
+
+
+**Inside Properties Panel**
+
+You can also add or update translations for individual text directly inside the properties panel. To do so, select the widget (e.g., Text, TextField, etc.), go to the properties panel, and click on the Globe icon. This will open a new panel.
+
+- To manually add or update a translation, make changes directly in the box under the language name.
+- To auto-translate for all languages, click on **Google Translate**.
+
+
+
+## Translating Predefined Messages
+
+FlutterFlow allows you to manage the translation for the following types of predefined messages.
+
+- **iOS Permission Messages**: iOS permission messages are the prompts shown to iOS users when your app requests access to device features, such as the camera or photo library.
+- **Preset In-App Messages**: These are built-in messages that FlutterFlow displays for specific actions, such as authentication and file upload actions.
+
+To add translations for predefined messages, navigate to **Settings and Integrations** > **Project Setup** > **Languages**. Scroll down to the **Translation** section and select the category containing the message you wish to translate.
+
+Start by entering your message in the base language. Then, either use the **Translate Message** button for automatic translation or manually add your translations and mark them as **Fixed** to prevent them from being overridden by auto-translate.
+
+:::info
+
+Permission messages are displayed based on the features included in your app. For instance, Camera and Photo Library permission messages appear when a page contains a button with the **Upload Photo/Video action**.
+
+:::
+
+
+
+
+
+
+## Accessing Language-Specific Data
+
+When building a multi-language app, you may need data like the current language code or language-specific text.
+
+In FlutterFlow, you can retrieve the following types of language-related data:
+
+- **Current Language Code**: This provides the ISO language code for the current app language (e.g., en, de, fr).
+- **Language-Dependent Text**: Allows you to specify different values for each language. For instance, you might want to display a country flag or name based on the current app language.
+
+These options are accessible through **Set from Variable > Internationalization**.
+
+
+
+
+## Localizing Dates
+
+To ensure your app displays dates in formats familiar to users from different regions, you can use the predefined **DateTime Format Options** while displaying dates.
+
+For example, in the United States, dates follow a **month, day, year** format (e.g., 12/31/2023), whereas in India, they use a **day, month, year** format (e.g., 31/12/2023). To accommodate these regional differences, set the format option to `yMd`, a locale-aware format that automatically adjusts date representation based on the user's locale.
+
+
+
+:::tip
+
+Here are a few more locale-aware formatting options you can use:
+
+- **`yMMMd`** – Formats the date with an abbreviated month and day, e.g., `Dec 31, 2023` (US) or `31 Dec 2023` (India).
+- **`jm`** – Displays time with minutes, e.g., `5:30 PM` (US) or `17:30` (Europe).
+
+For custom locale-specific date formats, you can also [**create your own patterns**](../../resources/data-representation/global-properties.md#custom-formatting).
+
+:::
+
+## Localizing Numbers
+
+Different regions use different symbols for decimal and thousand separators. For example, the U.S. uses a period for decimals and a comma for thousands, while many European countries use the opposite.
+
+To localize the numbers, set the [**Number Format Options**](../../resources/ui/widgets/basic-widgets/text.md#formatting-numbers) to **Decimal** and then set the **Decimal Type** to **Automatic**.
+
+
+
+## Localizing Currency
+
+Currency symbols and their placement vary by locale. For example, in the U.S., the dollar sign appears before the amount (`$1,000.00`), whereas in countries like France, the currency symbol is placed after the amount (e.g., `1 000,50 €`).
+
+To handle this behavior, enable the **Display as Currency** option under Number Format settings and leave the **Currency Symbol** field empty to automatically adjust based on the user’s locale.
+
+
+
+## Testing
+
+Localization testing is crucial to ensure that all elements work properly across different languages and locales. Here are a few ways to test localization:
+
+- **Change Device Locale**: Test your app by changing the device locale to verify translations and layout adjustments.
+- **Use Emulators**: Use Android or iOS emulators to simulate different locales and ensure everything is displaying correctly.
+- **Long Texts**: Verify that long translations do not overflow or cause UI issues.
+- **Manual Testing**: Manually verify the accuracy of translations, date formats, number formats, etc.
\ No newline at end of file
diff --git a/docs/marketplace/creators-hub/submission-criteria.md b/docs/marketplace/creators-hub/submission-criteria.md
index fdabb534..7dfbef44 100644
--- a/docs/marketplace/creators-hub/submission-criteria.md
+++ b/docs/marketplace/creators-hub/submission-criteria.md
@@ -75,7 +75,7 @@ Clear, engaging, and accurate metadata helps users discover and understand the v
- **Criteria:** All item metadata (title, description, tags, etc.) must be in English.
- **Why it Matters:** To ensure a broad understanding among our global community, all Marketplace items must be in English.
-- **What To Do:** Use clear, concise English throughout your submission. If English isn't your first language, consider using FlutterFlow's automatic [translation](../../ff-concepts/localization-accessibility/add-multiple-languages.md) feature.
+- **What To Do:** Use clear, concise English throughout your submission. If English isn't your first language, consider using FlutterFlow's automatic [translation](../../ff-concepts/localization-accessibility/localization.md) feature.
diff --git a/docs/resources/projects/settings/project-setup.md b/docs/resources/projects/settings/project-setup.md
index dba39325..ad058c4d 100644
--- a/docs/resources/projects/settings/project-setup.md
+++ b/docs/resources/projects/settings/project-setup.md
@@ -87,7 +87,7 @@ To add custom permission:
:::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).
+You can also add multilingual permission messages by following the instructions [**here**](../../../ff-concepts/localization-accessibility/localization.md).
:::
### Request Permission [Action]
@@ -235,7 +235,7 @@ By default, the generated project can run on Android, iOS, and the Web without a
---
## Multiple Languages
-To support multiple languages in your app, refer [here](../../../ff-concepts/localization-accessibility/add-multiple-languages.md).
+To support multiple languages in your app, refer [here](../../../ff-concepts/localization-accessibility/localization.md).
---
diff --git a/docs/testing-deployment-publishing/publishing/pre-checks-publishing.md b/docs/testing-deployment-publishing/publishing/pre-checks-publishing.md
index 7b2d81b3..4d1ef122 100644
--- a/docs/testing-deployment-publishing/publishing/pre-checks-publishing.md
+++ b/docs/testing-deployment-publishing/publishing/pre-checks-publishing.md
@@ -21,7 +21,7 @@ Here’s a comprehensive list of these prechecks:
5. **Accessibility Checks**: Add semantic labels to make the app more accessible to users with disabilities by providing meaningful descriptions.
6. **Security Measures**: Make sure all data handling practices comply with legal standards, including GDPR if applicable. Use HTTPS for all network connections and ensure that sensitive data is encrypted.
7. **Compliance with Store Guidelines**: Review the submission guidelines for [Apple’s App Store](https://developer.apple.com/app-store/review/guidelines/) and [Google Play Store](https://play.google/developer-content-policy/). Check for any specific requirements such as app metadata, privacy policies, and minimum functionality.
-8. **Localization and Internationalization**: If your app targets users in multiple countries, consider [adding multi-language](../../ff-concepts/localization-accessibility/add-multiple-languages.md) support.
+8. **Localization and Internationalization**: If your app targets users in multiple countries, consider [adding multi-language](../../ff-concepts/localization-accessibility/localization.md) support.
9. **License and Third-Party Attributions**: Adhere to licenses and include necessary attributions for third-party libraries and assets.
10. **Prepare Marketing Assets**: Prepare all the necessary marketing assets, such as screenshots, app icons, and promotional text. You can easily [generate screenshots](../publishing/pre-checks-publishing.md#generate-screenshots) right within FlutterFlow.
diff --git a/firebase.json b/firebase.json
index 2703d38c..0264603d 100644
--- a/firebase.json
+++ b/firebase.json
@@ -2297,7 +2297,17 @@
"source": "/building-your-ui/ui-builder/properties-panel",
"destination": "/resources/ui/widgets/properties",
"type": 301
+ },
+ {
+ "source": "/concepts/multiple-languages",
+ "destination": "/concepts/localization",
+ "type": 301
+ },
+ {
+ "source": "/concepts/multiple-languages/language-selector",
+ "destination": "/concepts/localization",
+ "type": 301
}
]
}
-}
+}
\ No newline at end of file