Flutter is an open-source mobile application development framework created by Google. One of the essential components of any mobile application is text, and Flutter provides several widgets to work with text. One such widget is AutoSizedText. The AutoSizedText widget automatically adjusts its font size to fit the available space. It is useful when you want to ensure that your text fits within a given space without truncating it or wrapping it.
Getting Started
To use the auto_size_text package, you must add it to your project’s pubspec.yaml file. Here is how to do it:
dependencies:
auto_size_text: ^3.0.0
After adding the dependency, run flutter pub get to download and install the package.
Usage
The AutoSizeText widget is similar to the Text widget. You can use it wherever you would use the Text widget. Here is an example of how to use it:
AutoSizeText(
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non tellus blandit, faucibus ipsum vel, finibus dolor. Sed at dolor euismod, efficitur nunc sed, convallis urna.',
style: TextStyle(fontSize: 20),
maxLines: 2,
overflow: TextOverflow.ellipsis,
)
In this example, we have created an AutoSizeText widget with a string of text that will automatically adjust its font size to fit the available space. We have set the style property to set the font size to 20, maxLines property to 2 to limit the number of lines to two, and overflow property to TextOverflow.ellipsis to add an ellipsis to the end of the text if it overflows the available space.
The AutoSizeText widget has many more properties that you can use to customize its behavior. Here are some of the most common properties:
minFontSize: the minimum font size that the text can be scaled down to.maxFontSize: the maximum font size that the text can be scaled up to.stepGranularity: the amount by which the font size is adjusted when the text needs to be resized. The default value is 1.0.textAlign: the alignment of the text within its container.textDirection: the direction of the text.softWrap: whether the text should be wrapped if it exceeds the available space.textScaleFactor: a multiplier applied to the text’s font size.style: the style of the text.overflow: how overflowing text should be handled.maxLines: the maximum number of lines of text to display.
Example
Let’s create an example where we have a ListView of AutoSizeText widgets. We will display a list of items with varying lengths of text, and the text will automatically adjust its font size to fit the available space.
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) {
return MaterialApp(
title: 'AutoSizeText Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'AutoSizeText Example'),
);
}
}
class MyHomePage extends StatelessWidget {
final String title;
const MyHomePage({Key? key, required this.title}) : super(key: key);
@override
Widget build(BuildContext context) {
List<String> texts = [
'This is a long text that needs to be auto-sized to fit within the constraints of the container',
'This is another long text that needs to be auto-sized to fit within the constraints of the container',
'This is a third long text that needs to be auto-sized to fit within the constraints of the container',
'This is a fourth long text that needs to be auto-sized to fit within the constraints of the container',
'This is a fifth long text that needs to be auto-sized to fit within the constraints of the container',
'This is a sixth long text that needs to be auto-sized to fit within the constraints of the container',
'This is a seventh long text that needs to be auto-sized to fit within the constraints of the container',
'This is an eighth long text that needs to be auto-sized to fit within the constraints of the container',
'This is a ninth long text that needs to be auto-sized to fit within the constraints of the container',
'This is a tenth long text that needs to be auto-sized to fit within the constraints of the container',
];
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: ListView.builder(
itemCount: texts.length,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 100,
color: Colors.grey[200],
child: Center(
child: AutoSizeText(
texts[index],
style: TextStyle(fontSize: 20),
maxLines: 2,
),
),
),
);
},
),
);
}
}
In this example, we create a ListView.builder with 10 AutoSizeText widgets, each containing a long string of text. The maxLines parameter is set to 2, which limits the number of lines the text can take up. The text size is automatically adjusted to fit within the constraints of the container.