5 min read

Flutter allows you to combine various widgets to develop a UI that matches your design. While developing a screen in the Flutter app, you may add a Text widget inside a Row widget and you might have got the overflow error with a long text. This can be fixed by wrapping a text. So in this tutorial, we’ll learn how to wrap text on overflow in Flutter.

Here’ what well cover:

The Problem

While showing a dynamic response from an API, you may get a long text in response. When the text is sufficiently long enough that it won’t fit in the width of the screen, you will get an overflow error.

Here’s is how it looks:

text overflow issue in flutter

Steps to Wrap Text on Overflow in Flutter (Solution)

To overcome the overflow error, wrap the Text widget inside the Expanded widget. The Expanded widget allows the Text widget to grow and fill the available space. When you wrap the Text widget (with long text) inside the Expanded widget, the text which can be visible in the screen’s width will be displayed and the rest of the text portion will be clipped off.

Here’s how you wrap text on overflow in Flutter:

Step 1: Make sure your Text widget is inside the Row widget.

Step 2: Wrap your Text widget inside the Expanded widget.

Step 3: Run your app.

Code:

Row(
  children: const [
    Expanded(
      child: Text(
        'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.',
        style: TextStyle(fontSize: 58),
        softWrap: false,
        maxLines: 1,
      ),
    ),
  ],
)

Output:

 wrap text on overflow in Flutter

Showing Ellipsis on Overflow

Showing the clipped text on the screen is not a good idea. You never know what meaning a half text will convey 🙂 Instead, it’s better to give the user an idea about the continued text when it’s overflowing. The text continuity can be represented with the Ellipsis symbol.

To show ellipsis on overflow:

  • Add the overflow parameter.
  • Assign TextOverflow.ellipsis to the overflow parameter of the TextField widget.

Code:

Row(
  children: const [
    Expanded(
      child: Text(
        'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.',
        style: TextStyle(fontSize: 58),
        softWrap: false,
        maxLines: 1,
        overflow: TextOverflow.ellipsis, // new
      ),
    ),
  ],
)

Output:

 wrap text on overflow with ellipsis in Flutter

Output after setting maxLines: 2 on Text Widget:

 wrap text on overflow with ellipsis multiline in Flutter

Fading the Text on Overflow

You can also represent the text continuity by fading the text. By default, it shows fading with white color. If the text is a single line it will fade the text from left to right. If it’s multi-line, fading will be shown from bottom to top.

To show fading on overflow:

  • Add the overflow parameter.
  • Assign TextOverflow.fade to the overflow parameter of the TextField widget.

Code:

Row(
  children: const [
    Expanded(
      child: Text(
        'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.',
        style: TextStyle(fontSize: 58),
        softWrap: false,
        maxLines: 1,
        overflow: TextOverflow.fade, //new
      ),
    ),
  ],
)

Output:

 wrap text on overflow with fading in Flutter

Output after setting maxLines: 2 and softWrap: true on Text Widget:

 wrap text on overflow with fading multiline in Flutter

Showing Full Text to Avoid Overflow

Sometimes you may want to display the full text on a screen by compromising the font size. To display the long text in a limited screen width, you can use FittedBox widget.

To show full text in a Row:

  • Make sure your Text widget is inside the Row and an Expanded widget.
  • Wrap your Text widget inside the FittedBox widget.
  • Run the app.

Code:

Row(
  children: const [
    Expanded(
      child: FittedBox(
        child: Text(
          'It is a long established text.',
          style: TextStyle(fontSize: 58),
          softWrap: false,
          overflow: TextOverflow.ellipsis,
        ),
      ),
    ),
  ],
)

Output:

showing full text in flutter

Full Code

Here’s the full code:

import 'package:flutter/material.dart';
import 'wrapping_text/wrapping_text_demo.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: WrappingTextDemo(),
    );
  }
}
class WrappingTextDemo extends StatelessWidget {
  const WrappingTextDemo({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        FocusManager.instance.primaryFocus?.unfocus();
      },
      child: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Image.asset(
                'assets/images/logo.png',
                scale: 12,
              ),
              const SizedBox(
                width: 10,
              ),
              const Text(
                'FlutterBeads',
                style: TextStyle(color: Colors.black),
              ),
            ],
          ),
          backgroundColor: const Color(0xff6ae792),
        ),
        body: Column(
          children: [
            Row(
              children: const [
                Expanded(
                  child: Text(
                    'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.',
                    style: TextStyle(fontSize: 58),
                    softWrap: false,
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ],
            ),
            Row(
              children: const [
                Expanded(
                  child: Text(
                    'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.',
                    style: TextStyle(fontSize: 58),
                    softWrap: true,
                    maxLines: 2,
                    overflow: TextOverflow.fade,
                  ),
                ),
              ],
            ),
            Row(
              children: const [
                Expanded(
                  child: FittedBox(
                    child: Text(
                      'It is a long established text.',
                      style: TextStyle(fontSize: 58),
                      softWrap: false,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Thanks!

Conclusion

In this tutorial, we learned, how to wrap a text on overflow in Flutter with practical examples. We also learned how to show ellipsis and fading on overflowing text.

Would you like to check other interesting Flutter tutorials?