Skip to content

Added Text Scaling Action Info #328

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
May 5, 2025
Merged
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
19 changes: 19 additions & 0 deletions docs/ff-concepts/localization-accessibility/accessibility.md
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,25 @@ The **Focus Traversal Group** defines a context or scope for focus traversal, an

:::

## Update Text Scaling Factor [Action]
The **Update Text Scaling Factor** action in FlutterFlow allows you to dynamically adjust the text size across your app during runtime. This is particularly useful for improving accessibility by letting users control the size of the text without having to manually change system settings.

Imagine you have a "+" and "-" button on a page to help users adjust text size. When the user taps the "+" button, the text scaling factor increases by 1, making the text larger. Tapping the "-" button decreases the text scaling factor by 1, making the text smaller. Additionally, a Reset button can be provided to return the text scaling back to its default value.

:::info

This action works in conjunction with the [**Display Settings**](../../resources/projects/settings/general-settings.md#display-settings) configured at the project level, such as **Min Text Scaling Factor** and **Max Text Scaling Factor**.

:::

When configuring the Update Text Scaling Factor action, you can choose from three update types:

- **Set Value**: Directly assigns the text scaling factor to a specific value.
- **Increment/Decrement**: Adjusts the current scaling factor by a specified amount. A positive value increases scaling, and a negative value decreases it.
- **Reset**: Restores the text scaling factor to the project's default setting.

![text-scaling-action](imgs/text-scaling-action.avif)

## 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.
Expand Down
Binary file not shown.
19 changes: 19 additions & 0 deletions docs/resources/projects/settings/general-settings.md
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,25 @@ If you want the improved folder organization for your project, **Enable Updated

Configure the global settings for navigation and deep link in your app. To learn, how to set up deeplinks, check out the **[Deep & Dynamic Linking](../../../ff-concepts/navigation-routing/deep-dynamic-linking.md)** guide.

### Display Settings

The **Display Settings** section allows you to configure how text scales within your app. This is particularly helpful for accessibility, ensuring that users with visual impairments can comfortably read content.

- **Min Text Scaling Factor**: Defines the minimum allowable scale for text. This prevents text from shrinking below a certain threshold, helping maintain legibility for all users. For example, setting this to `1` ensures text is never rendered smaller than its base size, regardless of device settings or user preferences.
- **Max Text Scaling Factor**: Defines the maximum allowable scale for text. This limits how large text can appear, which is useful for preserving layout consistency on devices with accessibility text scaling enabled. For example, setting this to `10` allows text to scale up to 10× its original size.
- **Persist Text Scaling Factor**: When enabled, the current text scaling factor will be stored and applied even after the app is restarted. This ensures a consistent user experience across sessions. **Note that** this setting requires both **Min** and **Max Text Scaling Factors** to be set. If either is unset, persistence will have no effect.

:::info
Once the text scaling factors are set, you can use the [**Update Text Scaling Factor**](../../../ff-concepts/localization-accessibility/accessibility.md#update-text-scaling-factor-action) action to let users dynamically adjust text size.
:::


Let’s understand this better with an example. Suppose the Min Text Scaling Factor is set to 1.0 and the Max Text Scaling Factor is set to 5.0. If a user's device requests a scaling factor of 2.5, FlutterFlow will accept it because it falls within the allowed range. So, if the base font size is 16.0, the final rendered size would be: `2.5 × 16.0 = 40.0`

If a device requests a scaling factor higher than 5.0 (such as 6.0), it will be capped at 5.0. Thus, for a base font size of 16.0, the final rendered size will be: `5.0 × 16.0 = 80.0`.

Similarly, if a device requests a scaling factor below 1.0 (for example, 0.5), it will be raised to 1.0 to ensure readability. The resulting font size would remain: `1.0 × 16.0 = 16.0`.


## App Assets

Expand Down