Flutter - Wrap text on overflow like insert ellipsis or fade

Question

I m trying to create a line in which center text has a maximum size  and if the text content is too large  it fits in size   I insert the TextOverflow ellipsis property to shorten the text and inserting the triple points     but it is not working   main dart  import  package flutter material dart    void main     runApp new MyApp        class MyApp extends StatelessWidget      override   Widget build BuildContext context        return new MaterialApp        home  new HomePage                  class HomePage extends StatelessWidget      override   Widget build BuildContext context    gt  new Scaffold      appBar  new AppBar        backgroundColor  new Color 0xFF26C6DA              body  new ListView          children   lt Widget gt           new Card            child  new Container              padding  new EdgeInsets symmetric horizontal  16 0  vertical  18 0               child  new Row                children   lt Widget gt                   new Container                    padding  new EdgeInsets only right  24 0                     child  new CircleAvatar                      backgroundColor  new Color 0xFFF5F5F5                       radius  16 0                                                         new Container                    padding  new EdgeInsets only right  13 0                     child  new Text                       Text lar                          overflow  TextOverflow ellipsis                      style  new TextStyle                        fontSize  13 0                        fontFamily   Roboto                         color  new Color 0xFF212121                         fontWeight  FontWeight bold                                                                                 new Container                    child  new Column                      crossAxisAlignment  CrossAxisAlignment end                      children   lt Widget gt                         new Row                          children   lt Widget gt                             new Text                               Bill                                 style  new TextStyle                                fontSize  12 0                                fontFamily   Roboto                                 color  new Color 0xFF9E9E9E                                                                                        new Text                                  -999 999 999 95                               style  new TextStyle                                fontSize  14 0                                fontFamily   Roboto                                 color  new Color 0xFF212121                                                                                                                                        new Row                          children   lt Widget gt                             new Text                               Limit                                 style  new TextStyle                                fontSize  12 0                                fontFamily   Roboto                                 color  new Color 0xFF9E9E9E                                                                                        new Text                               R   900 000 000 95                               style  new TextStyle                                fontSize  14 0                                fontFamily   Roboto                                 color  new Color 0xFF9E9E9E                                                                                                                                                                                                                                                            result     expected

User · Answer

One way to fix an overflow of a Text Widget within a row if for example a chat message can be one really long line  You can create a Container and a BoxConstraint with a maxWidth in it               Container                constraints  BoxConstraints maxWidth  200                   child  Text                     chatName    null         chatName                    style  TextStyle                        fontWeight  FontWeight w400                        color  Colors black87                        fontSize  17 0

User · Answer

Try    Expanded    child  Container        child  Text  OVER FLOW TEST TEXTTTT             overflow  TextOverflow fade         This will show OVER FLOW  If there is an overflow  it  will be handled

User · Answer

You can use this code snipped to show text with ellipsis  Text       Introduction to Very very very long text       maxLines  1      overflow  TextOverflow ellipsis      softWrap  false      style  TextStyle color  Colors black  fontWeight  FontWeight bold

User · Answer

SizedBox                          width  width-100                          child  Text                             quot YOUR LONG TEXT HERE    quot                             maxLines  3                            overflow  TextOverflow clip                            softWrap  true                            style  TextStyle                              fontWeight FontWeight bold

User · Answer

You should wrap your Container in a Flexible to let your Row know that it s ok for the Container to be narrower than its intrinsic width  Expanded will also work     Flexible    child  new Container      padding  new EdgeInsets only right  13 0       child  new Text         Text largeeeeeeeeeeeeeeeeeeeeeee         overflow  TextOverflow ellipsis        style  new TextStyle          fontSize  13 0          fontFamily   Roboto           color  new Color 0xFF212121           fontWeight  FontWeight bold

User · Answer

There are many answers but Will some more observation it  1  clip Clip the overflowing text to fix its container  SizedBox            width  120 0            child  Text               quot Enter Long Text quot               maxLines  1              overflow  TextOverflow clip              softWrap  false              style  TextStyle color  Colors black  fontWeight  FontWeight bold  fontSize  20 0                            Output   2 fade Fade the overflowing text to transparent  SizedBox            width  120 0            child  Text               quot Enter Long Text quot               maxLines  1              overflow  TextOverflow fade              softWrap  false              style  TextStyle color  Colors black  fontWeight  FontWeight bold  fontSize  20 0                             Output   3 ellipsis Use an ellipsis to indicate that the text has overflowed  SizedBox            width  120 0            child  Text               quot Enter Long Text quot               maxLines  1              overflow  TextOverflow ellipsis              softWrap  false              style  TextStyle color  Colors black  fontWeight  FontWeight bold  fontSize  20 0                            Output   4 visible Render overflowing text outside of its container  SizedBox            width  120 0            child  Text               quot Enter Long Text quot               maxLines  1              overflow  TextOverflow visible              softWrap  false              style  TextStyle color  Colors black  fontWeight  FontWeight bold  fontSize  20 0                            Output   Please Blog  https   medium com flutterworld flutter-text-wrapping-ellipsis-4fa70b19d316

User · Answer

You can do it like that  Expanded     child  Text      Text      overflow  TextOverflow ellipsis     maxLines  1

User · Answer

Using Ellipsis   Text     This is a long text     overflow  TextOverflow ellipsis           Using Fade  Text     This is a long text     overflow  TextOverflow fade    maxLines  1    softWrap  false           Using Clip  Text     This is a long text     overflow  TextOverflow clip    maxLines  1    softWrap  false           Note   If you are using Text inside a Row  you can put above Text inside Expanded like    Expanded    child  AboveText

User · Answer

Depending on your situation  I think this is the best approach below   final maxWidth   MediaQuery of context  size width   0 4  Container          textAlign  TextAlign center           child  Text  This is long text           constraints  BoxConstraints maxWidth  maxWidth

User · Answer

Wrap the Container with Expanded   Expanded  child  Container                    padding  new EdgeInsets only right  24 0                     child  new CircleAvatar                      backgroundColor  new Color 0xFFF5F5F5                       radius  16 0                                                         new Container                    padding  new EdgeInsets only right  13 0                     child  new Text                       Text lar                          overflow  TextOverflow ellipsis                      style  new TextStyle                        fontSize  13 0                        fontFamily   Roboto                         color  new Color 0xFF212121                         fontWeight  FontWeight bold

User · Answer

There is a very simple class TextOneLine from package assorted layout widgets  Just put your text in that class  For example  Row      crossAxisAlignment  CrossAxisAlignment center      children   lt Widget gt         SvgPicture asset          loadAsset SVG CALL GREEN           width  23          height  23          fit  BoxFit fill                 SizedBox width  16         Expanded          child  Column            crossAxisAlignment  CrossAxisAlignment start            children                TextOneLine                widget firstText                style  findTextStyle widget firstTextStyle                 textAlign  TextAlign left                             SizedBox height  4               TextOneLine                widget secondText                style  findTextStyle widget secondTextStyle                 textAlign  TextAlign left                                                        Icon          Icons arrow forward ios          color  Styles iOSArrowRight

User · Answer

I think the parent Container needs to be given a maxWidth of the proper size   It looks like the Text box will fill whatever space it is given above

User · Answer

First  wrap your Row or Column in Expanded widget Then Text       your long text here       overflow  TextOverflow fade      maxLines  1      softWrap  false      style  Theme of context  textTheme body1

User · Answer

If you simply place text as a child ren  of a column  this is the easiest way to have text automatically wrap  Assuming you don t have anything more complicated going on   In those cases  I would think you would create your container sized as you see fit and put another column inside and then your text   This seems to work nicely   Containers want to shrink to the size of its contents  and this seems to naturally conflict with wrapping  which requires more effort   Column    mainAxisSize  MainAxisSize min    children   lt Widget gt       Text  This long text will wrap very nicely if there isn t room beyond the column  s total width and if you have enough vertical space available to wrap into          style  TextStyle fontSize  16  color  primaryColor         textAlign  TextAlign center

User · Answer

SizedBox      width  200 0      child  Text  PRODUCERS CAVITY FIGHTER 50X140g                   overflow  TextOverflow ellipsis                  style  Theme of context  textTheme body2     Just wrap in inside a widget that can take a specific width for it to work or it will assume the width of the parent container

User · Answer

Wrapping whose child elements are in a row or column  please wrap your column or row is new Flexible     https   github com flutter flutter issues 4128

[flutter] Flutter - Wrap text on overflow, like insert ellipsis or fade

Examples related to flutter

Examples related to dart

Examples related to flutter-layout