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 :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

194 Views

Subscribe For Daily Updates

Flutter Questions
Android Questions