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),
),
),
),