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: https://stackoverflow.com/questions/51930754/flutter-wrapping-text — DarkTrick, May 07 '22 at 07:36

score 730 · Accepted Answer · edited Apr 23 '22 at 20:35

730

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 '22 at 20:35

Dinei

4,494
4
36
60

answered Jun 16 '17 at 02:56

Collin Jackson

110,240
31
221
152

29

I have a similar problem on Column. This approach isn't working for me. https://stackoverflow.com/questions/52206221/flutter-text-inside-an-expanded-widget-within-a-column-overflowing – Michael Tedla Sep 06 '18 at 14:44
1

are there any way we could implement this in textfield? – mangkool Jul 31 '19 at 06:51
1

if you want it to also have the text wrap_content specify the fit property with FlexFit.loose, – martinseal1987 Jun 30 '20 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 02 '20 at 10:21
5

If this approach does not work for you when you use Column, wrap the Column in Flexible – Isaac Oluwatemilorun Feb 26 '21 at 15:16
Thanks a lot @IsaacOluwatemilorun It worked like charm. `Flexible -> Column -> Text()`. – Kamlesh Jun 26 '21 at 18:28
1

For column and text overflow combination, here is a clue to solve. Row->Expanded->Your Column. here is more details in the answer. https://stackoverflow.com/questions/65656774/flutter-text-overflow-on-column-widget – Raghu Mudem Mar 28 '22 at 08:13
I try to use `Expanded` and it does not work, but when I try to use `Flexible` to wrap my Column, now it works. Thanks. – prawito hudoro Jul 01 '22 at 22:57

CopsOnRoad · Answer 2 · 2019-08-30T18:22:31.657

305

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 '19 at 18:22

answered Jan 16 '19 at 17:43

CopsOnRoad

237,138
77
654
440

1

can i add when text overflow then add a flat button like ...more link – mr.hir Jan 28 '19 at 06:33
4

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

`softWrap: false` is exactly what I needed, thanks! – coldembrace May 07 '20 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 05 '20 at 08:47
2

`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 '20 at 19:32
@kilkfoe That's why you need to provide `maxLines` as mentioned in the answer. – CopsOnRoad Sep 26 '20 at 04:54
Hay @CopsOnRoad I have customeTile brother TextOverflow.ellipsis is not working even i used softWrap: false and also limit maxLine to 1 still my text overflow from side. – user11908262 Sep 30 '20 at 14:26
1

@user11908262 I can't help you without seeing the code. – CopsOnRoad Sep 30 '20 at 14:58

Abdurahman Popal · Answer 3 · 2020-10-13T08:03:07.560

57

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 '20 at 08:03

answered Nov 18 '19 at 15:22

Abdurahman Popal

2,859
24
18

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 '19 at 14:41

score 37 · Answer 4 · edited Mar 21 '23 at 06:20

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 · Answer 5 · 2018-11-29T14:15:55.263

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 '18 at 14:15

answered Nov 28 '18 at 14:53

Yauhen Sampir

1,989
15
16

19

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

score 21 · Answer 6 · answered May 03 '19 at 23:35

21

You can do it like that

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

answered May 03 '19 at 23:35

Cenk YAGMUR

3,154
2
26
42

score 20 · Answer 7 · answered Dec 25 '21 at 18:43

20

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 '21 at 18:43

Preety Kumari

209
2
4

Are you sure this is the output? – Francisca Mkina Jan 09 '22 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 '22 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 '22 at 15:30

score 15 · Answer 8 · answered Mar 14 '19 at 09:00

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

score 14 · Answer 9 · edited Feb 15 '19 at 04:55

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 '19 at 04:55

Jeroen Heier

3,520
15
31
32

answered Oct 04 '18 at 15:33

chisom onwuegbuzie

437
5
6

score 11 · Answer 10 · answered Jun 02 '22 at 02:20

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.

krishnaacharyaa · Answer 11 · 2023-06-26T02:28:21.307

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

score 6 · Answer 12 · answered Nov 06 '18 at 22:22

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 06 '18 at 22:22

Oto-obong Eshiett

1,459
3
18
33

Alish Giri · Answer 13 · 2021-07-03T09:21:05.923

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 03 '21 at 09:21

answered Apr 29 '20 at 09:18

Alish Giri

1,855
18
21

jbryanh · Answer 14 · 2021-09-21T13:45:51.357

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 '21 at 04:18

score 6 · Answer 15 · answered Aug 02 '21 at 10:02

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

Muhammad Umair Saqib · Answer 16 · 2021-02-04T04:16:37.213

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

score 3 · Answer 17 · answered Feb 23 '21 at 11:47

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 '21 at 07:41

Muhammad Nadeem · Answer 18 · 2022-04-02T09:48:55.687

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 02 '22 at 07:35 — markhorrocks, Apr 02 '22 at 07:35

score 3 · Answer 19 · answered Jul 27 '22 at 09:20

3

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 '22 at 09:20

Jimmy lau

173
1
8

score 2 · Answer 20 · answered Jun 16 '17 at 03:00

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 '17 at 03:00

Randal Schwartz

39,428
4
43
70

Muhammad Nadeem · Answer 21 · 2022-04-02T02:32:27.040

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

              ],
            ),
          ),

Ya Si · Answer 22 · 2020-10-10T10:43:19.087

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](//meta.stackexchange.com/a/8259) 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.](//stackoverflow.com/help/deleted-answers) — Sabito stands with Ukraine, Oct 10 '20 at 10:40
What to import here. 'package:assorted_layout_widgets/assorted_layout_widgets.dart'; doesn't work — user3808307, Oct 31 '20 at 16:29

score -2 · Answer 23 · edited May 07 '20 at 01:43

-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 07 '20 at 01:43

Bhargav Rao

50,140
28
121
140

answered May 06 '20 at 06:33

Bilal BSL

21

score -3 · Answer 24 · answered Apr 08 '23 at 16:11

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

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

24 Answers24

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:

Linked

Related

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

24 Answers24

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:

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: