Take care of Font Size Accessibility in Flutter Design

Immovable
2 min readFeb 18, 2021

Hi Everyone,

Right now most of the flutter developers uses constant value while they are developing their apps. lets say the font size of Text widget is either 12, 14, 16.5 etc. there is no issue if the user is uses the normal accessibility setting. But what if users have custom accessibility setting ?

What is Accessibility ?

In short description it allows user to customize your device’s behavior. There are many kinds of features are available in device like

Size Accessibility

Control Color Accessibility

Speech Accessibility

Contrast and Color Accessibility etc.

Design Scenario

There is Stack widget contains Image widget on top of that there is one Text widget with Container of black color.

Let’s see below image that is our output of application.

Cool, Looks nice. Now let’s change the font size from device’s setting option And the result is the text is not properly visible to the user. Because when user increases the font size flutter automatically increase the size of Text widget but not height of Container widget.

Solution

Of course there are lots of solutions available but for me easiest one is using textScalefactor option. Let’s see how.

That’s how we can manage the height of container in dynamic way.

--

--