How to Make Auto Size Text in Flutter

How to Make Auto Size Text in Flutter – With FittedBox, adjusting the size of the text is a breeze. As needed, it may immediately shrink its offspring’s text size to fit the available space. This makes it much simpler to ensure that text is always visible and shows effectively regardless of the size of the device on which the app is running.

Use the following sample to see how quickly FittedBox can alter the font size of any given piece of text:

Basic Auto Size Text using FittedBox

FittedBox(
  fit: BoxFit.contain,
  child: Text(
    'Auto Font Size',
    style: TextStyle(fontSize: 100.0),
  ),
)

Text widget font size is set to 100.0, which could be unsuitable due to limited space. However, the FittedBox widget resizes the Text widget to fit the space while keeping its aspect ratio intact. The fit attribute is specified as BoxFit.contain, ensuring the entire text is visible without exceeding its parent widget.

Full Code Auto Size Text in Flutter

import 'dart:async';
import 'package:flutter/material.dart';

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'flutterflux.com',
        theme: ThemeData(
          primarySwatch: Colors.deepPurple,
          primaryColor: Colors.deepPurple,
          scaffoldBackgroundColor: Colors.white,
          textTheme: TextTheme(
            displayLarge: TextStyle(
              color: Colors.black,
              fontSize: 24,
              fontWeight: FontWeight.bold,
            ),
            bodyLarge: TextStyle(
              color: Colors.red[800],
              fontSize: 16,
              fontWeight: FontWeight.normal,
            ),
          ),
        ),
        home: MyHomePage());
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Row(children: [
            Image.asset(
              'assets/logo.png',
              height: 30,
            ),
            Text('flutterflux.com')
          ]),
        ),
        bottomNavigationBar: Container(height: 60),
        body: Center(
          child: FittedBox(
            fit: BoxFit.contain,
            child: Text(
              'Auto Font Size',
              style: TextStyle(fontSize: 100.0),
            ),
          ),
        ));
  }
}

To modify the font size, adjust the fontSize attribute of the TextStyle object assigned to the Text widget. The FittedBox widget will handle the Auto Size Text in Flutter to fit the available space.

Conclusion

Auto Size Text in Flutter is a handy tool available in Flutter that automatically adjusts the font size of any text to best match the available space. The AutoSizeText package, along with the FittedBox and Flexible widgets, can be used to realize this functionality.

Setting the minimum and maximum font sizes and taking into consideration any layout limits and available space will guarantee that the content is legible and visually appealing.