AppFlowy-IO/AppFlowy

Fork 0

mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2026-03-24 04:46:56 +00:00

[GH-ISSUE #2280] [FR] Add Options to scale app text #945

New issue

Closed

opened 2026-03-23 20:43:26 +00:00 by mirror · 10 comments

mirror commented

2026-03-23 20:43:26 +00:00

Owner

Originally created by @AmanNegi on GitHub (Apr 17, 2023).
Original GitHub issue: https://github.com/AppFlowy-IO/AppFlowy/issues/2280

Feature Information

Since I have been using AppFlowy this is an issue I have been facing, i.e the text is too small and there's no option to scale it either. While, there is an option to scale the in document text there's no option to scale the complete app text altogether.

Here, I have scaled the document text to my comfort but the side bar text remains unaffected.

It's a normal feature to keep different font sizes for the document and the other app texts, and that should be the same here as well. Thus, we should also keep a feature where the user can scale the text of the app layout (discluding document/editing area).

Technical Approach

In AppFlowy we have created text.dart to centralize the use of text widgets in the application. However, it contains only three styles {regular, semibold, medium} which does not suffices the use cases through out the app.
While we are not using the text.dart throughout the project, the places where we use it we completely override the properties, like:

FlowyText.medium(
   LocaleKeys.deletePagePrompt_restore.tr(),
   color: Theme.of(context).colorScheme.onPrimary,
   fontSize: 14, // Hard coded value, can not change it via settings
),

In the other places we are simply using the Text widget directly and provide the fontSize: double as hard coded value.

Solution

In appearance.dart we define the font sizes and also save it to device. The settings set in appearance.dart should be used globally throughout the application, to set the font size. Like:

FlowyText(
 "Some Text",
 fontSize: Theme.of(context).textTheme.displayMedium,
)

Now when we change the preferences from appearance.dart it should be visible globally. Note that this does not alter with the document level preferences as it is stored separately via DocumentAppearanceCubit.

Impact

Users which like to scale the App Features excluding the Editing Area, will now be able to change it and view it according to their comfort.

Additional Context

No response

Originally created by @AmanNegi on GitHub (Apr 17, 2023). Original GitHub issue: https://github.com/AppFlowy-IO/AppFlowy/issues/2280 ## Feature Information Since I have been using `AppFlowy` this is an issue I have been facing, i.e the text is too small and there's no option to scale it either. While, there is an option to scale the in document text there's no option to scale the complete app text altogether. ![Screenshot from 2023-04-17 17-55-35](https://user-images.githubusercontent.com/37607224/232483453-7cfd1693-f154-481b-a2a5-de0231c57adc.png) > Here, I have scaled the document text to my comfort but the side bar text remains unaffected. - It's a normal feature to keep different font sizes for the document and the other app texts, and that should be the same here as well. Thus, we should also keep a feature where the user can scale the text of the app layout (discluding document/editing area). ## Technical Approach - In AppFlowy we have created `text.dart` to centralize the use of text widgets in the application. However, it contains only three styles `{regular, semibold, medium}` which does not suffices the use cases through out the app. - While we are not using the `text.dart` throughout the project, the places where we use it we completely override the properties, like: ```dart FlowyText.medium( LocaleKeys.deletePagePrompt_restore.tr(), color: Theme.of(context).colorScheme.onPrimary, fontSize: 14, // Hard coded value, can not change it via settings ), ``` - In the other places we are simply using the `Text` widget directly and provide the `fontSize: double` as hard coded value. ## Solution - In `appearance.dart` we define the font sizes and also save it to device. The settings set in `appearance.dart` should be used globally throughout the application, to set the font size. Like: ```dart FlowyText( "Some Text", fontSize: Theme.of(context).textTheme.displayMedium, ) ``` > Now when we change the preferences from `appearance.dart` it should be visible globally. Note that this does not alter with the `document` level preferences as it is stored separately via `DocumentAppearanceCubit`. ### Impact Users which like to scale the App Features excluding the Editing Area, will now be able to change it and view it according to their comfort. ### Additional Context _No response_

mirror

2026-03-23 20:43:26 +00:00

closed this issue
added the
new feature

2024
labels

mirror commented

2026-03-23 20:43:26 +00:00

Author

Owner

@AmanNegi commented on GitHub (Apr 17, 2023):

@annieappflowy Let me know if this seems valid, I would love to work on this task 😄

@AmanNegi commented on GitHub (Apr 17, 2023): @annieappflowy Let me know if this seems valid, I would love to work on this task :smile:

mirror commented

2026-03-23 20:43:27 +00:00

Author

Owner

@annieappflowy commented on GitHub (Apr 17, 2023):

@LucasXu0 , please review

@annieappflowy commented on GitHub (Apr 17, 2023): @LucasXu0 , please review

mirror commented

2026-03-23 20:43:27 +00:00

Author

Owner

@LucasXu0 commented on GitHub (Apr 18, 2023):

@AmanNegi, would it look odd if we only scale the text and not the icon, resulting in the text being big but the icon remaining small? Is there any approach to scale the whole material app?

@LucasXu0 commented on GitHub (Apr 18, 2023): @AmanNegi, would it look odd if we only scale the text and not the icon, resulting in the text being big but the icon remaining small? Is there any approach to scale the whole material app?

mirror commented

2026-03-23 20:43:27 +00:00

Author

Owner

@Xazin commented on GitHub (Apr 18, 2023):

@AmanNegi, would it look odd if we only scale the text and not the icon, resulting in the text being big but the icon remaining small? Is there any approach to scale the whole material app?

We can use MediaQuery.of(context).textScaleFactor inside FlowySvg itself.

And if we wrap the application with a MediaQuery, below MaterialApp I'd assume, we can do something like this:

final mediaQuery = MediaQuery.of(context);

...

MediaQuery(
  data: mediaQuery.copyWith(
    textScaleFactor: state.uiScaleFactor * mediaQuery.textScaleFactor,
  ),
  child: ...,

Then we just need to have hotkeys to up/down the uiScaleFactor and in the settings menu as well. We also need to have some constraints, eg. scaleFactor > 0.5 && scaleFactor < 2.0 or something.

Edit: I'll have to make a POC to actually test the above, I'm not sure if the MediaQuery widget actually does affect Text widgets globally, if not then my solution is not that good.

@Xazin commented on GitHub (Apr 18, 2023): > @AmanNegi, would it look odd if we only scale the text and not the icon, resulting in the text being big but the icon remaining small? Is there any approach to scale the whole material app? We can use `MediaQuery.of(context).textScaleFactor` inside `FlowySvg` itself. And if we wrap the application with a `MediaQuery`, below MaterialApp I'd assume, we can do something like this: ``` final mediaQuery = MediaQuery.of(context); ... MediaQuery( data: mediaQuery.copyWith( textScaleFactor: state.uiScaleFactor * mediaQuery.textScaleFactor, ), child: ..., ``` Then we just need to have hotkeys to up/down the uiScaleFactor and in the settings menu as well. We also need to have some constraints, eg. `scaleFactor > 0.5 && scaleFactor < 2.0` or something. Edit: I'll have to make a POC to actually test the above, I'm not sure if the MediaQuery widget actually does affect `Text` widgets globally, if not then my solution is not that good.

mirror commented

2026-03-23 20:43:27 +00:00

Author

Owner

@AmanNegi commented on GitHub (Apr 19, 2023):

Rightly said @LucasXu0 the icons should also be scaled alongside text. Currently, the FlowySvg is used in some places, we can simply define and use the fontScale property to scale the icons as well. For example:

var fontScale = context.read<AppearanceSettingsCubit>().state.fontScale;
// AppearanceSettingsCubit is available globally, and fontScale is a custom field I added to store the app scale level

SizedBox(
  height: 20 * fontScale,
  width: 20 * fontScale,
  child: svgWidget(
   "home/add",
    color: Theme.of(context).iconTheme.color,
    ),
),

We can't do this at the FlowySvg itself as it resides in a different package and can not access the AppearanceSettingsCubit.

@Xazin Let me know if this makes sense because we are storing the appearance related concepts in AppearanceSettingsCubit so I thought it might be a good idea to store it there, as it caches it as well.

@AmanNegi commented on GitHub (Apr 19, 2023): Rightly said @LucasXu0 the icons should also be scaled alongside text. Currently, the `FlowySvg` is used in some places, we can simply define and use the `fontScale` property to scale the icons as well. For example: ```dart var fontScale = context.read<AppearanceSettingsCubit>().state.fontScale; // AppearanceSettingsCubit is available globally, and fontScale is a custom field I added to store the app scale level SizedBox( height: 20 * fontScale, width: 20 * fontScale, child: svgWidget( "home/add", color: Theme.of(context).iconTheme.color, ), ), ``` - We can't do this at the `FlowySvg` itself as it resides in a different package and can not access the `AppearanceSettingsCubit`. > @Xazin Let me know if this makes sense because we are storing the appearance related concepts in `AppearanceSettingsCubit` so I thought it might be a good idea to store it there, as it caches it as well.

mirror commented

2026-03-23 20:43:28 +00:00

Author

Owner

@LucasXu0 commented on GitHub (Apr 19, 2023):

@AmanNegi, so, do you plan to refactor all the widget wrappers containing the SVG widget to have scalable sizes?

@LucasXu0 commented on GitHub (Apr 19, 2023): @AmanNegi, so, do you plan to refactor all the widget wrappers containing the `SVG widget` to have scalable sizes?

mirror commented

2026-03-23 20:43:28 +00:00

Author

Owner

@AmanNegi commented on GitHub (Apr 19, 2023):

Yes, as I can see the use of SVG is not generalized in some places we are using FlowySVG and in some places, we are using the svgWidget function. It would be nice to generalize these as well and provide the size according to scale while using the FlowySVG.

So overall this issue will cover the following:

Generalizing and updating FlowyText to have various text styles using the Theme like {bodySmall, bodyMedium, bodyLarge, ...}.
Generalizing the use of FlowySVG for icons, and ensuring that scale multiplier is used while setting size.

@AmanNegi commented on GitHub (Apr 19, 2023): Yes, as I can see the use of `SVG` is not generalized in some places we are using `FlowySVG` and in some places, we are using the `svgWidget` function. It would be nice to generalize these as well and provide the size according to `scale` while using the `FlowySVG`. So overall this issue will cover the following: - Generalizing and updating `FlowyText` to have various text styles using the `Theme` like `{bodySmall, bodyMedium, bodyLarge, ...}`. - Generalizing the use of `FlowySVG` for icons, and ensuring that scale multiplier is used while setting size.

mirror commented

2026-03-23 20:43:28 +00:00

Author

Owner

@Twilightssuperb commented on GitHub (May 5, 2023):

What about {bodyExtraSmall}? It could be useful and nice at older laptops with low screen resolution (<FullHD @ 15.6") and low PPI. At these devices even {boydSmall} looks big.

@Twilightssuperb commented on GitHub (May 5, 2023): What about `{bodyExtraSmall}`? It could be useful and nice at older laptops with low screen resolution (<FullHD @ 15.6") and low PPI. At these devices even `{boydSmall}` looks big.

mirror commented

2026-03-23 20:43:28 +00:00

Author

Owner

@Xazin commented on GitHub (May 5, 2023):

What about {bodyExtraSmall}? It could be useful and nice at older laptops with low screen resolution (<FullHD @ 15.6") and low PPI. At these devices even {boydSmall} looks big.

Doesn't matter what the actual font sizes available are, because this whole feature allows users with devices that have either low or high resolution, to change the UI scale of the application itself. Meaning if a particular text is bodySmall, and you choose to scale the whole application UI down, then you can go even lower in size.

@Xazin commented on GitHub (May 5, 2023): > What about `{bodyExtraSmall}`? It could be useful and nice at older laptops with low screen resolution (<FullHD @ 15.6") and low PPI. At these devices even `{boydSmall}` looks big. Doesn't matter what the actual font sizes available are, because this whole feature allows users with devices that have either low or high resolution, to change the UI scale of the application itself. Meaning if a particular text is `bodySmall`, and you choose to scale the whole application UI down, then you can go even lower in size.

mirror commented

2026-03-23 20:43:28 +00:00

Author

Owner

@annieappflowy commented on GitHub (May 22, 2024):

Supported cmd / ctrl +/- in the latest version (v0.5.8)

@annieappflowy commented on GitHub (May 22, 2024): Supported cmd / ctrl +/- in the latest version (v0.5.8)

mirror referenced this issue

2026-03-23 21:37:51 +00:00

[PR #945] [MERGED] Feat/update flutter packages #4446