How to dynamically resize text in Flutter?
FlutterFlutter Problem Overview
I retrieve a piece of text from an API. I want to allot a set amount of space to it (say a max Container with width: 300.0 and height: 100.0). Sometimes, the piece of text fits in this Container with font size 30.0. In other times, it won't fit unless I set the text size to 24.0.
Is there a way to dynamically resize text based on its parent container space?
I've built a Container with a ConstrainedBox, which lets me define the max size of the text space. I've also wrapped my Text with a LayoutBuilder. I was hoping that I could check the height of the space of the text, and based on that, determine how to size the text. Like this:
Container(
child: ConstrainedBox(
constraints: BoxConstraints(
minWidth: 300.0,
maxWidth: 300.0,
minHeight: 30.0,
maxHeight: 100.0,
),
child: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
if (/* height is larger than 100.0? height is over the constraints? */) { return textWithSize24(); }
return textWithSize30();
}),
),
),
How can I determine the "height that the text would take up if it were size 30.0"?
Maybe I'm approaching this the wrong way and I'm supposed to use maxLines to determine this instead? But how do we know that we've reached more than maxLines?
The other way to do it is to use the number of characters in my String to determine when to change font sizes. This seems kind of manual.
Flutter Solutions
Solution 1 - 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.
Solution 2 - Flutter
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),
),)
Solution 3 - Flutter
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.
Solution 4 - Flutter
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),
),
),
),
Solution 5 - Flutter
Responsive_Flutter, I had the same issues since reading your problem. I found it Works every time using this package to resize your fonts.
This Flutter package is for scaling the size your apps UI and fontSize across different sized devices. (The example shows the top text using the Responsive_Flutter package and the bottom text without plugin.
https://github.com/layounisl/responsive_flutter
You can install in 30 seconds - 3 Steps
- Add dependencies to yaml file
responsive_flutter: ^0.0.4 import 'package:responsive_flutter/responsive_flutter.dart';child: Text("Responsive flutter", style: TextStyle(fontSize: ResponsiveFlutter.of(context).fontSize(3)),
Solution 6 - Flutter
Here is a list of things I tried which may work for you depending on your use case: https://github.com/flutter/flutter/issues/18431
Ultimately I went with a function that sets the font size based on the length of the String (i.e. with if-else statements).
Solution 7 - Flutter
Just generate the font size according to the text length and the maximum rendering area. 300.0 * 100.0 in your case, without forgetting the areas lost during the rendering of the text.
like this :
class MyWidget extends StatefulWidget {
@override
_StateMyWidget createState() => _StateMyWidget();
}
class _StateMyWidget extends State<MyWidget> {
static const _QUOTES = [
{"quote": "mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm", "author": "test"},
{"quote": "Talk is cheap. Show me the code.", "author": "Linus Torvalds"},
{"quote": "First, solve the problem. Then, write the code.", "author": "John Johnson"},
{"quote": "To iterate is human, to recurse divine.", "author": "L. Peter Deutsch"},
{"quote": "The best thing about a boolean is even if you are wrong, you are only off by a bit.", "author": "Anonymous"},
{"quote": "Software is like sex: It’s better when it’s free.", "author": "Linus Torvalds"},
{"quote": "The first 90% of the code accounts for the first 90% of the development time. The remaining 10% of the code accounts for the other 90% of the development time.", "author": "Tom Cargill"},
{"quote": "I think that it’s extraordinarily important that we in computer science keep fun in computing. When it started out it was an awful lot of fun. Of course the paying customers got shafted every now and then and after a while we began to take their complaints seriously. We began to feel as if we really were responsible for the successful error-free perfect use of these machines. I don’t think we are. I think we’re responsible for stretching them setting them off in new directions and keeping fun in the house. I hope the field of computer science never loses its sense of fun. Above all I hope we don’t become missionaries. Don’t feel as if you’re Bible sales-men. The world has too many of those already. What you know about computing other people will learn. Don’t feel as if the key to successful computing is only in your hands. What’s in your hands I think and hope is intelligence: the ability to see the machine as more than when you were first led up to it that you can make it more.", "author": "Alan J. Perlis"},
{"quote":"Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live","author": "John Woods"},
{"quote":"You've baked a really lovely cake, but then you've used dog shit for frosting.","author": "Steve Jobs"},
{"quote": "Most software today is very much like an Egyptian pyramid with millions of bricks piled on top of each other, with no structural integrity, but just done by brute force and thousands of slaves.","author": "Alan Kay" },
{"quote": "Software suppliers are trying to make their software packages more ‘user-friendly’… Their best approach so far has been to take all the old brochures and stamp the words ‘user-friendly’ on the cover.","author": "Bill Gates"},
];
static const AREA_LOST_PERCENT = 5;
final rand = math.Random();
@override
initState() {
super.initState();
Timer.periodic(Duration(seconds: 3), (timeVal) {
setState(() {});
});
}
@override
Widget build(BuildContext context) {
final Map<String, String> mapQuote = _QUOTES[rand.nextInt(_QUOTES.length)];
final authorW =
Text(mapQuote["author"], style: TextStyle(fontStyle: FontStyle.italic));
final quoteW = Text(
mapQuote["quote"],
textAlign: TextAlign.center,
style: TextStyle(
fontSize: autoSize(
quoteLength: mapQuote["quote"].length,
parentArea: (350 - 10 * 2 - 16 * 2) * (450 - 10 * 2),
),
),
);
final containerW0 = Container(
height: 450.0,
padding: EdgeInsets.all(10.0),
color: Colors.grey,
child: Center(child: quoteW));
final containerW1 = Container(
height: 500.0,
width: 350,
padding: EdgeInsets.all(16.0),
color: Colors.purple,
child: Column(children: [authorW, containerW0]));
return containerW1;
}
double autoSize({@required int quoteLength, @required int parentArea}) {
assert(quoteLength != null, "`quoteLength` may not be null");
assert(parentArea != null, "`parentArea` may not be null");
final areaOfLetter = parentArea / quoteLength;
final pixelOfLetter = math.sqrt(areaOfLetter);
final pixelOfLetterP = pixelOfLetter - (pixelOfLetter * AREA_LOST_PERCENT) / 100;
return pixelOfLetterP;
}
}
the escape characters must be taken into account during the allocation of the percentage of lost areas. it is best to remove them if the variation is excessive.
Solution 8 - Flutter
I used it this way and it worked perfectly:
Flexible(
child: FittedBox(
fit: BoxFit.contain,
child: AutoSizeText(
'your specific text',
maxLines: 1,
style: TextStyle(),
),
),
),
This gives us flexibility and ensures that our child widget is inside and behaving as expected (containing), in addition to using auto_size_text.
Solution 9 - Flutter
Easiest thing I found was auto_size_text: ^2.1.0. As simple as importing the dependency and using AutoSizeText() instead of Text()
import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/material.dart';
void main() {
runApp(App());
}
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: SizedBox(
width: 200.0,
height: 140.0,
child: AutoSizeText(
'This string will be automatically resized to fit in two lines.',
style: TextStyle(fontSize: 30.0),
maxLines: 2,
),
),
),
),
);
}
}
Solution 10 - Flutter
There are two approaches to do this.
- Using FittedBox
- Using TextPainter (calculate width with text Painter and update font )
https://prafullkumar77.medium.com/how-to-dynamically-resize-text-in-flutter-bca80415a4d2
Solution 11 - Flutter
You can also use the textScaleFactor attribute in the MediaQueryData class to limit how big a text get