Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 12 additions & 2 deletions docs/ff-concepts/localization-accessibility/localization.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,9 @@ FlutterFlow enables you to translate all text in your app at once using Google T

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.
To add multi-language support in FlutterFlow, navigate to **Settings and Integrations** > **Languages**, add the languages to support, and set a primary language. Then, use **Translate All** for automatic translations and adjust them if needed.

To preview translated content without running your app, open **Canvas Settings** next to the light and dark mode control and choose a **Display Language**. This selector is available after you add multiple languages to your project.

:::warning

Expand Down Expand Up @@ -116,6 +118,14 @@ You can also add or update translations for individual text directly inside the

![manage-translation-in-properties-panel.avif](imgs/manage-translation-in-properties-panel.avif)

:::note[RichText and Combine Text]

Static text in each **RichTextSpan** is translatable and appears in the Languages table like text from a standard Text widget.

Text assembled with the **Combine Text** function does not appear in the Languages table and is not included in **Translate All**. If you need separately styled translatable text, use a [**RichText** widget](../../resources/ui/widgets/basic-widgets/text.md#richtext-widget) and enter the text in its RichTextSpan children.

:::

## Translating Predefined Messages

FlutterFlow allows you to manage the translation for the following types of predefined messages.
Expand Down Expand Up @@ -215,4 +225,4 @@ Localization testing is crucial to ensure that all elements work properly across
- **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.
- **Manual Testing**: Manually verify the accuracy of translations, date formats, number formats, etc.
5 changes: 4 additions & 1 deletion docs/resources/control-flow/functions/utility-functions.md
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,9 @@ The **Combine Text** built-in function only allows you to combine multiple value
static)
together, with the same text style applied to all of them. If you need to combine multiple String
values with different text styles for each, consider using the **[RichText](../../ui/widgets/basic-widgets/text.md#richtext-widget)** widget.

Text assembled with **Combine Text** does not appear in the Languages table and is not included in
**Translate All**. Static text in RichTextSpan children is translatable.
:::


Expand Down Expand Up @@ -261,4 +264,4 @@ With Inline Functions, you had to manually pass values as arguments. In contrast
You can write any valid Dart expression in a Custom code expression, even multi-line logic using anonymous functions. Plus, Custom Code Expressions support real-time autocomplete and inline error validation, making it much easier to discover available variables and avoid mistakes.

</p>
</details>
</details>
2 changes: 2 additions & 0 deletions docs/resources/ui/widgets/basic-widgets/text.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,8 @@ either drag it to your desired location on the screen or insert it directly via

When the RichText widget is added to your widget tree, FlutterFlow automatically creates two RichTextSpan child objects. You can modify the text value and styling of each object to create multiple styles within your paragraph.

Static text entered in a RichTextSpan is translatable and appears in the Languages table. In contrast, text assembled with the [**Combine Text** function](../../../control-flow/functions/utility-functions.md#combine-text) does not appear in the Languages table or **Translate All**.

To modify the RichTextSpan objects, see the quick demo below:


Expand Down
Loading