Flutter wrap text on overflow

Text wrap inside Row

First, create a row and add a text widget with really long text. Then specify the overflow property to TextOverflow.ellipsis

 Row(
              children: [
                                Text('Add long text here ',
                                overflow: TextOverflow.ellipsis,
                                ),
                              ],
                        )

Based on the properties it supposes to work. But it’s not, Why?

Because text overflows the row because of not specifying the width of the widget. As a solution, you can wrap the text widget inside the Flexible widget and it will add available widget to child widget.

Row(
     children: [
                    Flexible(
                            child: Text('Add long text here',
                                              overflow: TextOverflow.ellipsis,
                      ),
                  ),
              ],
        )

You can also wrap the text widget inside the sizedbox to give fixed width.

 
    Row(
        children: [
                    SizedBox(
                      width: 100,
                      child: Text('Add long text here',
                                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                  ],
            )
    

Different text overflow options

overflow property allows adding a different type of overflow based on your need like fade, clip etc.

overflow fade

TextOverflow.fade will add fade effect when overflow. If you use it in a row make sure to add softWrap property to false. Then it will act as there is unlimited space in horizontal and show fading in the end. Otherwise, a fade effect will be added from the bottom to top.

Row(
     children: [
                Flexible(
                  child: Text('Add long text here',
                  maxLines: 1,
                  softWrap: false,
                  overflow: TextOverflow.fade,
                  ),
                ),
              ],
            )
    

overflow clip

TextOverflow.clip will make content to fix its container by adding a sharp clip. But when comes to the UX is good practice to use ellipsis and then the user will understand there is a more text to read.

    Row(
     children: [
                Flexible(
                  child: Text('Add long text here',
                  maxLines: 1,
                  softWrap: false,
                  overflow: TextOverflow.clip,
                  ),
                ),
              ],
            )