Flutter - Wrap text on overflow, like insert ellipsis or fade
FlutterDartTextFlutter LayoutFlutter Problem Overview
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:
Flutter Solutions
Solution 1 - Flutter
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,
),
),
),
),
Solution 2 - Flutter
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(),
)
Solution 3 - Flutter
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,
)
Solution 4 - Flutter
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),
),
Solution 5 - Flutter
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:
Please Blog: https://medium.com/flutterworld/flutter-text-wrapping-ellipsis-4fa70b19d316
Solution 6 - Flutter
You can do it like that
Expanded(
child: Text(
'Text',
overflow: TextOverflow.ellipsis,
maxLines: 1
)
)
Solution 7 - Flutter
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.
Solution 8 - Flutter
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),
)
),
Solution 9 - Flutter
Wrapping whose child elements are in a row or column, please wrap your column or row is new Flexible();
Solution 10 - Flutter
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.")
]
),
)
],
),
),
Solution 11 - Flutter
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),
),
Solution 12 - Flutter
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,),
],
),
Solution 13 - Flutter
SizedBox(
width: width-100,
child: Text(
"YOUR LONG TEXT HERE...",
maxLines: 3,
overflow: TextOverflow.clip,
softWrap: true,
style: TextStyle(
fontWeight:FontWeight.bold,
),
),
),
Solution 14 - Flutter
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),
),
),
Solution 15 - Flutter
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,
),
),
),
Solution 16 - Flutter
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,
),
],
),
),
),
Solution 17 - Flutter
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.
Solution 18 - Flutter
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,
),
),
),
],
),
),
Solution 19 - Flutter
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,
)
],
)
Solution 20 - Flutter
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.