Responsive Text in Flutter

Have you ever come across a situation where you realized you have to resize your text according to different screen sizes? Unfortunately, such a feature is not supported in Flutter!

I was working on an app recently and I found out that flutter doesn’t have this responsive text feature in it. I searched through many links and I found out that this thing is really not supported in flutter and this is a work in progress by the team. I tried everything I could to make the text adjust itself to the screen, wrapping it in a SizedBox, a Container, and a lot of other things. In the end, I had switch to the most basic thing, using \n (backslash n)to make the texts shift to different lines and not go beyond the screen.

But then after months, I came across this amazing package at pub.dev named Auto Size Text. You can go through the documentation here: https://pub.dev/packages/auto_size_text

Here’s what a screen with overflowing text looks like (text not adjusting itself to the screen):

When any widget goes beyond the limit of the screen, it is said to be overflowing. This is how it is denoted with yellow and black colored tapes.

To overcome this problem, we use theAutoSizeText widget. Go to your pubspec.yaml file to use this package and include this line:

dependencies:
 auto_size_text: ^2.1.0

If you come across this article late in the future, then you can also use this:

dependencies:
 auto_size_text:

This way, it will automatically chose the latest version of auto_size_text to work with.

Install the package, run flutter pub get, if you are using Visual Studio Code, you can simply Ctrl+S the pubspec.yaml file.

flutter pub get

To use this, import the package

import 'package:auto_size_text/auto_size_text.dart';

We use this widget inside a SizedBox widget so that the text takes the maximum possible space of the given SizedBox. You also provide it with some width, the maximum amount of space it can capture. You can also define the height, but height is never really an issue in Flutter, width is. I want the text (SizedBox) to take 65% space from the container it is in.

For example:

SizedBox(
width: MediaQuery.of(context).size.width*0.65,
child:AutoSizedText(
'Some Text Here'
 ),
);

You can also add the TextStyle the same way you add it to your Text widget.

SizedBox(
 width: MediaQuery.of(context).size.width*0.65,
 child:AutoSizedText(
    'Some Text Here', 
     style: TextStyle(
        color: Colors.black,
        fontFamily:'Rubik',
        fontSize: 20,
     ),
    ),
   );

I have included the color as black, the font-family of Rubik, which I got from Google Fonts, and the font size of 20. Now, I will put some more restrictions so that the text changes when it is on different screen sizes.

SizedBox(
 width: MediaQuery.of(context).size.width*0.65,
 child:AutoSizedText(
    'Some Text Here', 
     style: TextStyle(
        color: Colors.black,
        fontFamily:'Rubik',
        fontSize: 20,
     ), 
      minFontSize: 15,
      stepGranularity: 1,
      maxLines:5
    ),
   );

Here we add more parameters, which is the minFontSize (self-explanatory). If the font size of 20 is less likely to fit in a smaller screen width then it will be reduced to a font size less than 20 but not less than 15. Now, if the text size 20 couldn’t fit in, so the minimum font size that will be used is 15, but we don’t want it to directly switch to 15. We want it to try 19, if it doesn’t fit, then try 18, if 18 doesn’t fit, then try 17, and so on. stepGranularity when set to 1, will drop the font size by 1. If it was set to 2 then the drop in the font sizes would be 18 and then 16. Hope this makes sense. maxLines, again self-explanatory. The string would be broken down in multiple lines and the maximum it could go is till 5 (as mentioned in the code). The minimum value of max lines would be 1.

If the text is too large and you specify the max lines to be 5 but since the text is long enough, it won’t create an overflow but the rest of the text will be hidden. It won’t show.

To indicate that the string is too long to be shown, we use

overflow: TextOverflow.ellipsis

This will put … three dots at the end of the visible text.

overflow: TextOverflow.fade

This will fade out the rest of the text that is not visible

Using the exact same code on this container has stopped by text from overflowing, instead, it adjusted itself to the size of the container and on its own, it divided itself into 3 lines.