Skip to content

Commit 401df60

Browse files
authored
Merge pull request #328 from FlutterFlow/feature/text-scaling-action
Added Text Scaling Action Info
2 parents 3c56e8e + 0721ea3 commit 401df60

File tree

3 files changed

+38
-0
lines changed

3 files changed

+38
-0
lines changed

docs/ff-concepts/localization-accessibility/accessibility.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,25 @@ The **Focus Traversal Group** defines a context or scope for focus traversal, an
144144

145145
:::
146146

147+
## Update Text Scaling Factor [Action]
148+
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.
149+
150+
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.
151+
152+
:::info
153+
154+
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**.
155+
156+
:::
157+
158+
When configuring the Update Text Scaling Factor action, you can choose from three update types:
159+
160+
- **Set Value**: Directly assigns the text scaling factor to a specific value.
161+
- **Increment/Decrement**: Adjusts the current scaling factor by a specified amount. A positive value increases scaling, and a negative value decreases it.
162+
- **Reset**: Restores the text scaling factor to the project's default setting.
163+
164+
![text-scaling-action](imgs/text-scaling-action.avif)
165+
147166
## Keyboard Navigation
148167

149168
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.
Binary file not shown.

docs/resources/projects/settings/general-settings.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,25 @@ If you want the improved folder organization for your project, **Enable Updated
7777

7878
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.
7979

80+
### Display Settings
81+
82+
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.
83+
84+
- **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.
85+
- **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.
86+
- **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.
87+
88+
:::info
89+
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.
90+
:::
91+
92+
93+
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`
94+
95+
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`.
96+
97+
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`.
98+
8099

81100
## App Assets
82101

0 commit comments

Comments
 (0)