How to wrap Text in flutter inside Row widget?

Published July 30, 2021

In this flutter example we will learn how to wrap text inside Row widget. When we add text inside Row when the text exceeds the widget width it will through Overflow error. To over come this error we have different ways with property overflow.

Let's first generate overflow error with Text

Row(
  children: [
    Text('Flutter Text Overflow while adding long text. how to wrap text in flutter ',
    ),
  ],
),

When we run the above code it will through error Overflowed by

Wrap Text Flutter

Fix Text Overflow error with Flexible Widget

Add your Text widget inside Flexible widget it will cover the text

Flexible(
  child: Text('Flutter Text Overflow while adding long text. how to wrap text in flutter ',
    style: TextStyle(fontSize: 20),
  ),
),

Text Wrap with Flexible widget

Wrap text with Text widget Overflow properties

TextOverflow.ellipsis

This will add dots at the end of the Text if the text exeeds given number of lines

Flexible(
  child: Text('Flutter Text Overflow while adding long text. how to wrap text in flutterhow to wrap text in flutter ',
    style: TextStyle(fontSize: 20),
    maxLines: 2,
    overflow: TextOverflow.ellipsis,
  ),
),

Flutter Text wrap with Ellipse property

TextOverflow.clip

Clip the overflowing text to fix its container

Flexible(
  child: Text('Flutter Text Overflow while adding long text. how to wrap text in flutterhow to wrap text in flutter ',
    style: TextStyle(fontSize: 20),
    maxLines: 2,
    overflow: TextOverflow.clip,
  ),
),

TextOverflow.fade

Fade the overflowing text to transparent

Flexible(
  child: Text('Flutter Text Overflow while adding long text. how to wrap text in flutterhow to wrap text in flutter ',
    style: TextStyle(fontSize: 20),
    maxLines: 2,
    overflow: TextOverflow.fade,
  ),
),

Text wrap with fade property flutter

TextOverflow.visible

Render overflowing text outside of its container

Flexible(
  child: Text('Flutter Text Overflow while adding long text. how to wrap text in flutterhow to wrap text in flutter ',
    style: TextStyle(fontSize: 20),
    maxLines: 2,
    overflow: TextOverflow.visible,
  ),
),

Article Contributed By :

12381 Views