challenge

Flutter text overflow

Umme Faatimah-Iz-Zaahra Mujore

Oct 7, 2023 • 3 min read

Flutter

Flutter is an open source framework by Google for building beautiful, natively compiled, multi-platform applications from a single codebase.

In this Article, we will be tackling the different ways that text overflow can be solved in Flutter.

Row(
  children: const [
    Text(
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis temporibus alias eligendi quas ullam atque numquam repudiandae est minima doloribus!",
    ),
  ],
),

Text overflow occurs when the text takes more space than the available width of the Row widget:

Solution

Wrapping our Text Widget inside Expanded Widget

Row(
  children: const [
    Expanded(
      child: Text(
        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis temporibus alias eligendi quas ullam atque numquam repudiandae est minima doloribus!",
      ),
    ),
  ],
),

Causing the text to expand over multiple lines:

2. Wrapping Text Widget in Expanded and using maxlines

Row(
  children: const [
    Expanded(
      child: Text(
        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis temporibus alias eligendi quas ullam atque numquam repudiandae est minima doloribus!",
        maxLines: 1,
      ),
    ),
  ],
),

Using maxlines would cause our text to be on a single line except that it would not be displayed in full lengths:

3. Wrapping Text Widget in Expanded and using ellipsis property by Text Widget

Row(
  children: const [
    Expanded(
      child: Text(
        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis temporibus alias eligendi quas ullam atque numquam repudiandae est minima doloribus!",
        maxLines: 1,
        overflow: TextOverflow.ellipsis,
      ),
    ),
  ],
),

Using overflow: TextOverflow.ellipsis will cause the string to be substituted for the remaining text if ever the text can not fit within the specific maximum width:

4. Wrapping Text Widget in SingleChildScrollView found Inside of Expanded Widget and giving it a scroll direction property of horizontal

Row(
  children: const [
    Expanded(
      child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Text(
          "Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis temporibus alias eligendi quas ullam atque numquam repudiandae est minima doloribus!",
        ),
      ),
    ),
  ],
),

This would cause the text to be displayed in a scrollable line:

5. Wrapping Text Widget in SingleChildScrollView found Inside of Expanded Widget and giving it a vertical scroll

Row(
  children: [
    Expanded(
      child: Container(
        height: 60,
        child: const SingleChildScrollView(
          scrollDirection: Axis.vertical,
          child: Text(
          "Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis temporibus alias eligendi quas ullam atque numquam repudiandae est minima doloribus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis temporibus alias eligendi quas ullam atque numquam repudiandae est minima doloribus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis temporibus alias eligendi quas ullam atque numquam repudiandae est minima doloribus!",
          ),
        ),
      ),
    ),
  ],
),

The above would give a vertical scrollable effect to the text if placed in a container and giving it a height:

And that’s it! I hope this solved your issues, and thank you for reading this article on text overflow in Flutter.

To reach me:

LinkedIn: https://www.linkedin.com/in/faatimah-iz-zaahra-m-0670881a1/

X (previously Twitter): _fz3hra

Cheers,

Umme Faatimah-Iz-Zaahra Mujore.

Flutter

How to solve text overflow caused by your Text Widget in Flutter?

Solution