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

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:**

[![enter image description here][1]][1]

**expected:**

[![enter image description here][2]][2]


[1]:

[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.

Wrapping whose child elements are in a row or column, please wrap your column or row is new Flexible();

[To see links please register here]

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

```dart
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.

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

You can do it like that

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

***Using Ellipsis***

Text(
"This is a long text",
overflow: TextOverflow.ellipsis,
),


[![enter image description here][1]][1]

----------


***Using Fade***

Text(
"This is a long text",
overflow: TextOverflow.fade,
maxLines: 1,
softWrap: false,
),

[![enter image description here][2]][2]

----------


***Using Clip***

Text(
"This is a long text",
overflow: TextOverflow.clip,
maxLines: 1,
softWrap: false,
),

[![enter image description here][3]][3]


----------

**Note:**

If you are using `Text` inside a `Row`, you can put above `Text` inside `Expanded` like:

Expanded(
child: AboveText(),
)

[1]:

[2]:

[3]:

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.

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