Press "Enter" to skip to content

Dynamic Font Size in Flutter – Responsive Text Size

The size of font is not everywhere in a good layout. Sometimes, it may change depending upon your text size or screen width or any other reasons. You can simply set responsive or dynamic font size in flutter for your texts.


You can use AutoSizeText widget to get responsive size of font in Flutter.

First of all, just add auto_size_text on pubspec.yaml file as a dependency.

For this just add auto_size_text: ^2.1.0 on pubspec.yaml under dependencies.

dependencies:
  auto_size_text: ^2.1.0
Dynamic Font Size in Flutter - Responsive Text Size

Now just click on ‘Pub get’ link on top right side.

Using Auto Size Text Widget for Dynamic Font Size in Flutter

First of all, on your main.dart file, import auto_size_text file using code:

import 'package:auto_size_text/auto_size_text.dart';

Like using ‘Text’ widget, you can simple use the widget like below :

AutoSizeText(
"Your Text here",
style: TextStyle(fontSize: 30.0),
),

Where fontSize is the maximum font size.

Properties:

  • maxLines: 1,

maximum number of lines of your text.

  • minFontSize: 25.0,

Minimum font size of dynamic font.

Full App Code

import 'package:flutter/material.dart';
import 'package:auto_size_text/auto_size_text.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appTitle = 'Dynamic font size in Flutter';

    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: Text(appTitle),
        ),
        body: BuildBody(),
      ),
    );
  }
}
class BuildBody extends StatefulWidget {
  @override
  _BuildBodyState createState() => _BuildBodyState();
}

class _BuildBodyState extends State<BuildBody> {

  @override
  Widget build(BuildContext context) {
    return Container(
           padding: EdgeInsets.all(20),
              child: Column(
                    children: <Widget>[
                       AutoSizeText(
                                "Hello ",
                                style: TextStyle(fontSize: 50.0),
                                maxLines: 1,
                       ),

                      AutoSizeText(
                        "Hello My Dear Friend ",
                        style: TextStyle(fontSize: 50.0),
                        maxLines: 1,
                      ),
                      AutoSizeText(
                        "Hello My Dear Friend, How ",
                        style: TextStyle(fontSize: 50.0),
                        maxLines: 1,
                      ),
                      AutoSizeText(
                        "Hello Hello My Dear Friend, How are",
                        style: TextStyle(fontSize: 50.0),
                        maxLines: 1,
                      ),
                      AutoSizeText(
                        "Hello Hello My Dear Friend, How are you ",
                        style: TextStyle(fontSize: 50.0),
                        maxLines: 1,
                      ),
                      AutoSizeText(
                        "Hello Hello My Dear Friend, How are you today?",
                        style: TextStyle(fontSize: 50.0),
                        maxLines: 2,
                        minFontSize: 25.0,
                      ),
                  ],
         )
     );
    }
}

Sample Output

Dynamic Font Size in Flutter - Responsive Text Size

One Comment

  1. Tanvi Tanvi 18th January 2021

    This article helped me in my project. Thank you so much

Leave a Reply