Automatically resize the text in Flutter

In Flutter development, one common challenge is to handle text content that needs to fit within a limited space dynamically. Manually adjusting font sizes for different text lengths can be time-consuming and impractical. Thankfully, there is a Flutter package called auto_size_text, which simplifies this task by automatically resizing the text to fit within the available space. In this post, we will go over the auto_size_text package to demonstrate its functionality and how to implement it.

Installing

To get started, we need to install the auto_size_text package into our project. The installation process is simple. Just execute the following command: flutter pub add auto_size_text.

Once the command is executed, make sure to check your pubspec.yaml file for the added dependencies. You should see the auto_size_text package included in the dependencies section, like this:

dependencies:
  auto_size_text: ^3.0.0
  flutter:
    sdk: flutter

AutoSizeText

The auto_size_text provides two constructors we can use to build auto-sized text widgets. We will start with the regular AutoSizedText constructor which creates a regular AutoSizeText widget, let us go over the implementation:

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(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Auto Size Text Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                width: 300,
                height: 100,
                padding: EdgeInsets.all(8.0),
                color: Colors.grey[300],
                child: AutoSizeText(
                  'This is an auto-sized text that will adjust its font'
                      ' size to fit within the container.' ,
                  style: TextStyle(fontSize: 30.0),
                  maxLines: 3,
                  minFontSize: 20.0,
                  maxFontSize: 40.0,
                  overflow: TextOverflow.ellipsis,
                ),
              ),
              SizedBox(height: 100),
              Container(
                width: 300,
                height: 100,
                padding: EdgeInsets.all(8.0),
                color: Colors.grey[300],
                child: Text(
                  'This is a regular text that will not adjust its font'
                      ' size to fit within the container.',
                  style: TextStyle(fontSize: 30.0),
                  maxLines: 3,
                  overflow: TextOverflow.ellipsis,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

In this code snippet, we have a Flutter application that shows how the AutoSizeText widget from the auto_size_text package works compared to a regular Text widget when dealing with text that does not fit in a container.

The application has two Container widgets, both with a width of 300 and height of 100. They have a grey background and padding of 8 around the text.

In the first Container widget, we use AutoSizeText to display the text: "This is an auto-sized text that will adjust its font size to fit within the container." The font size of the text automatically changes to fit inside the Container widget. The text is limited to 3 lines, and if it does not fit, it will be cut with an ellipsis. The initial font size is 30.0, but it can go down to 20.0 and up to 40.0 if needed.

In the second container, we use a regular Text widget with a fixed font size of 30.0 to display the text: "This is a regular text that will not adjust its font size to fit within the container." Unlike AutoSizeText, the text will not resize to fit the container. If the text is too long, it will overflow and will not show completely.

When you run the application, you will see the difference: the text inside the first container adjusts to fit perfectly, while the text in the second container overflows and gets cut off.

AutoSizeText.rich

AutoSizeText.rich is a constructor of the AutoSizeText widget in Flutter that allows you to display rich text with inline styling. In Flutter, rich text refers to text that contains multiple styles within the same text span, such as different font sizes, colors, font families, and more.

The AutoSizeText.rich widget takes a TextSpan as its child, which allows you to define the inline styles for different parts of the text. The TextSpan can contain nested children, each with its own set of style attributes.

Here is an example of how to use AutoSizeText.rich constructor:

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(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Auto Size Text Demo'),
        ),
        body: Center(
          child: AutoSizeText.rich(
            TextSpan(
              text: 'Welcome ',
              style: TextStyle(fontSize: 24, color: Colors.black),
              children: [
                TextSpan(
                  text: 'to',
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.blue,
                  ),
                ),
                TextSpan(
                  text: ' Code Onwards!',
                  style: TextStyle(
                    fontStyle: FontStyle.italic,
                    color: Colors.green,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

In this example, the AutoSizeText.rich widget displays the text "Welcome to Code Onwards!" with different styles for each part of the text. The word "Welcome" is bold and larger, the word "to" is bold and blue, while the phrase "Code Onwards!" is italic and green.

With AutoSizeText.rich, you can create fancy text layouts with different styles, making it a helpful tool for showing stylish and rich text in your Flutter application.

Use cases

The AutoSizeText widget is really fast. In fact, you can replace all your Text widgets with AutoSizeText. Here are some use cases:

1. Responsiveness

To create well-designed applications that look great on various screen sizes and orientations, the auto_size_text package can be very convenient. It automatically adjusts the font size of text elements based on the device's screen width, ensuring the text remains legible and fits well on any screen.

2. Buttons with Dynamic Text

When buttons have text that can change dynamically based on the application's state, using AutoSizeText prevents text overflow or wrapping issues. The widget automatically resizes the font size of the button's text to fit perfectly within the available space.

3. Text inside Cards or Tiles

For displaying dynamic content like news articles or social media posts within cards or tiles, AutoSizeText is useful. It ensures that the text adjusts and fits correctly within the container without overflowing, providing a clean and polished appearance for the content.

Conclusion

The auto_size_text package is a valuable tool in Flutter development that simplifies handling dynamic text sizing. It allows you to create responsive and adaptive user interfaces with text that automatically adjusts its font size to fit within available space. By replacing the Text widgets with the AutoSizeText widgets, you can ensure a great user experience and visually appealing text elements in your Flutter applications.

Tags

• Flutter
• Dart