Flutter Resize Your Text Automatically - Auto Size Text in Flutter

When it comes to text size in Flutter having responsive text is Must because if you have a particular length to your Text it might give RenderFlex Overflow Error or you limit it to a particular length as on a different size device the text will look different and only limited text is displayed, an easy solution to it is making our text resize automatically.

In this flutter example tutorial, we will see how you can make your text resize automatically.

Let's Start 

Step 1: Create a new Flutter Application.

Step 2: Add a line like this to your package's pubspec.yaml

dependencies:
  auto_size_text: ^3.0.0

Step 3: Now you can use AutoSizeText Widget in your Application instead of using Text widget in Flutter

For example, you have text widget as:

Text('This is a Text with two lines',style: TextStyle(fontsize: 50, maxline: 2)),

if the text does not have enough space to show in 2 lines it will only show the text that will fit into the space. So you can use AutoSizeText instead of Text as:

AutoSizeText('This is a Text with two lines as well',style: TextStyle(fontsize: 50, maxline: 2)),

when you use this widget even if you give a certain fontsize it will resize its size and will show the full text in two lines in your app.

Here's the Example with Complete Source Code for Text Auto Size in flutter:

import 'package:flutter/material.dart';      
   import 'package:auto_size_text/auto_size_text.dart';
    
   void main()=> runApp(MaterialApp(
   debugShowCheckedModeBanner: false,
   home: AutoTextDemo(),
   ));
    
   class AutoTextDemo extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
   return Scaffold(
   appBar: AppBar(
   title:Text('Auto TExt') ,
   ),
   body: ListView(
   children: [
   Column(
   children: [
   Text('This is regular String which does not resize Lets see if this AUto '
   'sizes if more than 4 line will it work.',
   style: TextStyle(fontSize: 50.0),
   maxLines: 4,),
   Divider(height: 20, color: Colors.red, thickness: 10.0,),
   AutoSizeText('This it the String which auto resize with the length Lets see if this AUto '
   'sizes if more than 4 line will it work see how this work well'
   ,
   style: TextStyle(fontSize: 50.0),
   minFontSize: 10.0,
   maxLines: 4,)
   ],
   )
   ],
   ),
   );
   }
   }
    

Video Tutorial + Source Code

Conclusion: In this tutorial, we learned how you can make your text resize automatically in your flutter application.