How to dynamically resize text in Flutter?

You can use FittedBox to manage text based on height or width.

For Ex.

Simply just wrap your Text widget to FittedBox widget like, Here I want to resize my AppBar text based on width.

AppBar(
    centerTitle: true,
    title: FittedBox(
        fit: BoxFit.fitWidth, 
        child: Text('Hey this is my long text appbar title')
    ),
),

Text will be resized based on width of AppBar.


You can do it using the auto_size_text package:

Container(
  child: ConstrainedBox(
    constraints: BoxConstraints(
      minWidth: 300.0,
      maxWidth: 300.0,
      minHeight: 30.0,
      maxHeight: 100.0,
    ),
    child: AutoSizeText(
      "yourText",
      style: TextStyle(fontSize: 30.0),
    ),
  ),
);

You can also set maxLines to constrain the text even further or use presetFontSizes if you only want to allow specific font sizes.


Using BoxFit.scaleDown and fixing the FontSize you can adjust the maximum size of the font.

If the content is small, it occupies the minimum width with the specified font size. At the same time, if the content is large, it resizes to the smallest font size.

FittedBox(
                      fit: BoxFit.scaleDown,
                      child: 
                          Text(
                            "Text here",
                            style: TextStyle(fontSize: 18),
                          ),)

If you need the text to fill the entire width, using any font size use BoxFit.cover

FittedBox(
                      fit: BoxFit.cover,
                      child: 
                          Text(
                            "Text here",
                            //style: TextStyle(fontSize: 18),
                          ),)

FittedBox worked in my case with multiple lines.

SizedBox(
            width: MediaQuery.of(context).size.width,
            child: FittedBox(
              fit: BoxFit.contain,
              child: Text(
                widget.model.poem,
                textAlign: TextAlign.justify,
                style: TextStyle(
                    color: Colors.black,
                    fontWeight: FontWeight.w600,
                    fontStyle: FontStyle.normal),
              ),
            ),
          ),