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) => new Scaffold(
    appBar: new AppBar(
      backgroundColor: new Color(0xFF26C6DA),
    ),
    body: new ListView  (
      children: <Widget>[
        new Card(
          child: new Container(
            padding: new EdgeInsets.symmetric(horizontal: 16.0, vertical: 18.0),
            child: new Row(
              children: <Widget>[
                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: <Widget>[
                      new Row(
                        children: <Widget>[
                          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: <Widget>[
                          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:

The title and content of this question don't match. Your expected result shows ellipsizing. However, the title states wrap and fade. Please adjust you title so it matches your actual question. It confuses this question: stackoverflow.com/questions/51930754/flutter-wrapping-text — DarkTrick, May 7, 2022 at 7:36

Dinei · Accepted Answer · 2022-04-23 20:35:28Z

761

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,
      ),
    ),
  ),
),

edited Apr 23, 2022 at 20:35

Dinei

4,9324 gold badges39 silver badges62 bronze badges

answered Jun 16, 2017 at 2:56

Collin Jackson

114k31 gold badges223 silver badges152 bronze badges

32

I have a similar problem on Column. This approach isn't working for me. stackoverflow.com/questions/52206221/…
– Michael Tedla
Sep 6, 2018 at 14:44
1

are there any way we could implement this in textfield?
– mangkool
Jul 31, 2019 at 6:51
1

if you want it to also have the text wrap_content specify the fit property with FlexFit.loose,
– martinseal1987
Jun 30, 2020 at 15:53
3

This approach does not always work. In my case, all the TextFlow props like elipsis or fade or clip do not work for a text inside an InkWell and insided a row and another row. All permuttations on row, container, text, inkwell, column etc with expanded and flexible FAIL.
– ombiro
Sep 2, 2020 at 10:21
6

If this approach does not work for you when you use Column, wrap the Column in Flexible
– Isaac Oluwatemilorun
Feb 26, 2021 at 15:16

| Show 3 more comments

CopsOnRoad · Accepted Answer · 2019-08-30 18:22:31Z

316

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(),
)

edited Aug 30, 2019 at 18:22

answered Jan 16, 2019 at 17:43

CopsOnRoad

253k83 gold badges672 silver badges457 bronze badges

1

can i add when text overflow then add a flat button like ...more link
– mr.hir
Jan 28, 2019 at 6:33
4

This doesn't work if you have text and another widget (e.g. icon) centred inside a row.
– Lukasz Ciastko
Oct 23, 2019 at 16:07
6

softWrap: false is exactly what I needed, thanks!
– coldembrace
May 7, 2020 at 12:08
1

Hey, what if we want to add, for example, a new page with the text that is overflowing?
– Nithin Sai
Jul 5, 2020 at 8:47
3

softWrap: false essentially says apply the effect horizontally instead of vertically. I didn't notice with the ellipses, but when switching to fade I needed it so it didn't fade the bottom of the text or just wrap anyway
– kilkfoe
Sep 24, 2020 at 19:32

| Show 3 more comments

Abdurahman Popal · Accepted Answer · 2020-10-13 08:03:07Z

59

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,
)

edited Oct 13, 2020 at 8:03

answered Nov 18, 2019 at 15:22

Abdurahman Popal

2,91924 silver badges18 bronze badges

5

Yes, this is the right way, first wrapping the Column inside the Expanded really worked! and to use the Text inside the Column children.
– ArifMustafa
Dec 17, 2019 at 14:41

Add a comment |

sideshowbarker · Accepted Answer · 2023-03-21 06:20:03Z

1. clip

Clip the overflowing text to fit its container.

SizedBox(
          width: 120.0,
          child: Text(
            "Enter Long Text",
            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(
            "Enter Long Text",
            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(
            "Enter Long Text",
            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(
            "Enter Long Text",
            maxLines: 1,
            overflow: TextOverflow.visible,
            softWrap: false,
            style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0),
          ),
        ),

Output:

Yauhen Sampir · Accepted Answer · 2018-11-29 14:15:55Z

35

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),
),

edited Nov 29, 2018 at 14:15

answered Nov 28, 2018 at 14:53

Yauhen Sampir

2,07416 silver badges17 bronze badges

19

Also please include a description of this code to explain how it answers the question.
– jkdev
Nov 28, 2018 at 20:04

Add a comment |

Preety Kumari · Accepted Answer · 2021-12-25 18:43:39Z

25

You can do that by First wrapping your Column inside Flexible or Expanded and then use Text as usual and it will get wrapped up automatically.

Container(
  child: Row(
    children: [
      Flexible(
        child: Column(
          children: [
            Text("This text is so long and long and long and long and long and that's why it is not wrapping to next line.")
          ]
        ),
      )
    ],
  ),
),

answered Dec 25, 2021 at 18:43

Preety Kumari

2593 silver badges6 bronze badges

Are you sure this is the output?
– Francisca Mkina
Jan 9, 2022 at 19:23
@FranciscaMkina Ya its the output for the text you are seeing below the image when I have tested on my device.
– Preety Kumari
Jan 19, 2022 at 17:51
What I see is for you to maintain the dimensions of that single item, you need to keep your text limited to a certain length. If you put the very long text, that one item is going to be long like a snake.
– Francisca Mkina
Jan 20, 2022 at 15:30

Add a comment |

Cenk YAGMUR · Accepted Answer · 2019-05-03 23:35:48Z

22

You can do it like that

Expanded(
   child: Text(
   'Text',
   overflow: TextOverflow.ellipsis,
   maxLines: 1
   )
)

answered May 3, 2019 at 23:35

Cenk YAGMUR

3,3122 gold badges28 silver badges47 bronze badges

Add a comment |

krishnaacharyaa · Accepted Answer · 2023-06-26 02:28:21Z

Text inside Row.

1. Preference of text in Column 1 > Column 2

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: const [
    Text(
      "This is very very  long text in column 1 of Row",
      style: TextStyle(
          overflow: TextOverflow.ellipsis, backgroundColor: Colors.green),
    ),
    Flexible(
      child: Text("This is very very  long text in column 2 of Row",
          style: TextStyle(
              overflow: TextOverflow.ellipsis,
              backgroundColor: Colors.yellow)),
    )
  ],
)

2. Preference of text in Column 2 > Column 1

   Row(
     crossAxisAlignment: CrossAxisAlignment.start,
     children: const [
        Flexible(
          child: Text(
             "This is very very  long text in column 1 of Row",
             style: TextStyle(overflow: TextOverflow.ellipsis,  backgroundColor: Colors.green),
          ),
        ),
       Text("This is very very  long text in column 2 of Row",
        style: TextStyle(overflow: TextOverflow.ellipsis, backgroundColor: Colors.yellow))
    ],
   )

3. Same Preference

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: const [
    Flexible(
      child: Text(
        "This is very very  long text in column 1 of Row",
        style: TextStyle(
            overflow: TextOverflow.ellipsis, backgroundColor: Colors.green),
      ),
    ),
    Flexible(
      child: Text("This is very very  long text in column 2 of Row",
          style: TextStyle(
              overflow: TextOverflow.ellipsis,
              backgroundColor: Colors.yellow)),
    )
  ],
)

Text inside Column

define the maxLine attribute.

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: const [
    Text(
      "This is very very very very very very very very very very very very very very very very very  long text in Row 1 of Column",
      maxLines: 2,
      style: TextStyle(
          backgroundColor: Colors.green, overflow: TextOverflow.ellipsis),
    ),
    Text("This is very very  long text in Row 2 of Column",
        style: TextStyle(
            overflow: TextOverflow.ellipsis,
            backgroundColor: Colors.yellow))
  ],
)

Note: If your requirement is to show the entrie content without overflow but not messing with the constraints, remove the `overflow` attribute but keep the `Flexible` as is:

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: const [
    Flexible(
      child: Text(
        "This is very very  long text in column 1 of Row",
        style: TextStyle(backgroundColor: Colors.green),
      ),
    ),
    Flexible(
      child: Text("This is very very  long text in column 2 of Row",
          style: TextStyle(
              overflow: TextOverflow.ellipsis,
              backgroundColor: Colors.yellow)),
    )
  ],
)

Justin B · Accepted Answer · 2019-03-14 09:00:53Z

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),
                )
            ),

Jeroen Heier · Accepted Answer · 2019-02-15 04:55:30Z

14

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.

edited Feb 15, 2019 at 4:55

Jeroen Heier

3,59815 gold badges32 silver badges34 bronze badges

answered Oct 4, 2018 at 15:33

chisom onwuegbuzie

4375 silver badges6 bronze badges

Add a comment |

Gabriel Costa · Accepted Answer · 2022-06-02 02:20:57Z

I went through such a problem several times using rows within columns. Here's a good way to fix it:

 return Column(
  children: [
    Row(
      children: const [
        Icon(Icons.close, color: Colors.red), // an example icon            
        // use the flexible widget above the padding
        Flexible(
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 10.0),
            child: Text(
              "Exemple of text",
              overflow: TextOverflow.ellipsis, // I used ellipsis, but it works with others (fade, clip, etc.)
              maxLines: 1,
            ),
          ),
        ),
      ],
    )
  ],
);

Notice that I put the Flexible above the padding, because when the text grew, the padding also broke the screen. It would be useless to put it only in Text. Hope this helps.

Oto-obong Eshiett · Accepted Answer · 2018-11-06 22:22:22Z

6

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

answered Nov 6, 2018 at 22:22

Oto-obong Eshiett

1,5593 gold badges19 silver badges35 bronze badges

Add a comment |

Alish Giri · Accepted Answer · 2021-07-03 09:21:05Z

6

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),
),

edited Jul 3, 2021 at 9:21

answered Apr 29, 2020 at 9:18

Alish Giri

2,01020 silver badges21 bronze badges

Add a comment |

core114 · Accepted Answer · 2021-08-02 10:02:38Z

6

Use an ellipsis to indicate that the text has overflowed.

SizedBox(
              width: 120.0,
              child: Text(
                "Enter Long Text",
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
                softWrap: false,
                style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0),
              ),
            ),

answered Aug 2, 2021 at 10:02

core114

5,29517 gold badges97 silver badges194 bronze badges

Add a comment |

jbryanh · Accepted Answer · 2021-09-21 13:45:51Z

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: <Widget>[
    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,),
  ],
),

Also wrapping the Text with Flexible and wrapping Flexible with a Column or Row seems to work. — mLstudent33, Sep 20, 2021 at 4:18

Muhammad Umair Saqib · Accepted Answer · 2021-02-04 04:16:37Z

4

    SizedBox(
                        width: width-100,
                        child: Text(
                          "YOUR LONG TEXT HERE...",
                          maxLines: 3,
                          overflow: TextOverflow.clip,
                          softWrap: true,
                          style: TextStyle(
                            fontWeight:FontWeight.bold,
                          ),
                        ),
                      ),

edited Feb 4, 2021 at 4:16

answered Jan 29, 2021 at 8:43

Muhammad Umair Saqib

1,5951 gold badge13 silver badges24 bronze badges

Add a comment |

Jimmy lau · Accepted Answer · 2022-07-27 09:20:49Z

4

If you are facing the problem inside a Row a widget, try to wrap the Text widget with Expanded

Row(
  children: [
    Text('first'),
    Expanded(
      child: Text('a really long message...'),
    )
  ]
)

answered Jul 27, 2022 at 9:20

Jimmy lau

1931 silver badge8 bronze badges

Add a comment |

mar0ne · Accepted Answer · 2021-02-23 11:47:03Z

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,
                    ),
                  ),
),

While this code may provide a solution to the question, it's better to add context as to why/how it works. This can help future users learn and eventually apply that knowledge to their own code. You are also likely to have positive feedback/upvotes from users, when the code is explained. — Amit Verma, Feb 24, 2021 at 7:41

Muhammad Nadeem · Accepted Answer · 2022-04-02 09:48:55Z

In Column We make text ellipsis by wraping column with flexibale widget,

 Container(
            height: SizeConfig.blockSizeVertical * 20,
            width: SizeConfig.blockSizeHorizontal * 88,
            child: Flexible(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  PicClipper(
                      height: 50,
                      width: 50,
                      circularRadius: 30,
                      circularImage: imageUrl[index]),
                  SizedBox(
                    width: SizeConfig.blockSizeHorizontal * 3,
                  ),
                  const Text(
                    fontSize: 12,
                    fontWeight: FontWeight.normal,
                    text:
                        'Lorem ipsum dolor sit amet,consectetur adipiscing elit.Lorem ipsum dolor sit amet,consectetur adipiscing elit.',
                    fontStyle: FontStyle.normal,
                    textColor: AppColors.blackTextColor,
                    overflow: TextOverflow.ellipsis,
                    fontFamily: "Poppins",
                    maxLine: 3,
                    textAlign: TextAlign.start,
                  ),
                ],
              ),
            ),
          ),

Named parameter textOverflow should be overflow.
– markhorrocks
Apr 2, 2022 at 7:35 — markhorrocks, Apr 2, 2022 at 7:35

Randal Schwartz · Accepted Answer · 2017-06-16 03:00:58Z

2

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.

answered Jun 16, 2017 at 3:00

Randal Schwartz

41.7k4 gold badges46 silver badges77 bronze badges

Add a comment |

Muhammad Nadeem · Accepted Answer · 2022-04-02 02:32:27Z

In Row We make text ellipsis to go second line by wraping firstly Text with Container and than wrap container with flexible widget

 Container(

            height: SizeConfig.blockSizeVertical * 10,
            width: SizeConfig.blockSizeHorizontal * 88,

            child: Row(
              crossAxisAlignment:
              CrossAxisAlignment.start,
              children: [
                PicClipper(height: 50, width:50, circularRadius: 30, circularImage:imageUrl[index]),
                SizedBox(
                  width:
                  SizeConfig.blockSizeHorizontal * 3,
                ),
                Flexible(
                  child: Container(
                    child: const
                    AppText
                      (
                      fontSize: 12,
                      fontWeight: FontWeight.normal,
                      text:
                      'Lorem ipsum dolor sit amet,consectetur adipiscing elit.Lorem ipsum dolor sit amet,consectetur adipiscing elit.',
                      fontStyle: FontStyle.normal,
                      textColor: AppColors.blackTextColor,
                      textOverflow: TextOverflow.ellipsis,
                      fontFamily: "Poppins",
                      maxLine: 3,
                      textAlign: TextAlign.start,
                    ),
                  ),
                ),

              ],
            ),
          ),

Iaroslav Siniugin · Accepted Answer · 2020-10-10 10:43:19Z

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: <Widget>[
      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,
      )
    ],
  )

A link to a solution is welcome, but please ensure your answer is useful without it: add context around the link so your fellow users will have some idea what it is and why it’s there, then quote the most relevant part of the page you're linking to in case the target page is unavailable. Answers that are little more than a link may be deleted. — Sabito stands with Ukraine, Oct 10, 2020 at 10:40
What to import here. 'package:assorted_layout_widgets/assorted_layout_widgets.dart'; doesn't work — user3808307, Oct 31, 2020 at 16:29

Bhargav Rao · Accepted Answer · 2020-05-07 01:43:21Z

-2

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.

edited May 7, 2020 at 1:43

Bhargav Rao

51.2k28 gold badges125 silver badges141 bronze badges

answered May 6, 2020 at 6:33

Bilal BSL

21

Add a comment |

THINKER J · Accepted Answer · 2023-04-08 16:11:38Z

TO ADJUST YOUR CONTAINER SIZE DYNAMICALLY BASED ON THE LENGTH OF THE TEXT. USE THIS:

Row(
            children: [
              Expanded(
                child: Column(
                  children: [
                    Container(
                      margin: const EdgeInsets.all(15.0),
                      child: GestureDetector(
                        onTap: () {},
                        child: Center(
                          child: Text(
                            "O(E2)hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh1233455676788",
                            style: TextStyle(
                              fontSize: 24,
                              color: Colors.white,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),

Collectives™ on Stack Overflow

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

24 Answers 24

Note: If your requirement is to show the entrie content without overflow but not messing with the constraints, remove the `overflow` attribute but keep the `Flexible` as is:

Your Answer

Not the answer you're looking for? Browse other questions tagged
android
ios
flutter
dart
user-interface
or ask your own question.

Linked

Hot Network Questions

Collectives™ on Stack Overflow

24 Answers 24

Note: If your requirement is to show the entrie content without overflow but not messing with the constraints, remove the overflow attribute but keep the Flexible as is:

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged androidiosflutterdartuser-interface or ask your own question.

Linked

Related

Note: If your requirement is to show the entrie content without overflow but not messing with the constraints, remove the `overflow` attribute but keep the `Flexible` as is:

Not the answer you're looking for? Browse other questions tagged
android
ios
flutter
dart
user-interface
or ask your own question.