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
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
This article helped me in my project. Thank you so much