Flutter Text overflow doesn't work for the second row - flutter

I have a column with text. I don't know the exact size of the incoming string, so I want some of my texts to end with an ellipsis.
Flexible(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 16),
Align(
alignment: Alignment.center,
child: Text(_model._schoolName,
overflow: TextOverflow.ellipsis, //this one works
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w600,
fontSize: 18)),
),
SizedBox(height: 12),
Row(
children: <Widget>[
Icon(Icons.location_on, color: Colors.grey[700]),
Container(width: 8),
Text(_model._guides,
overflow: TextOverflow.ellipsis, //this one doesn't work
style: TextStyle(
fontSize: 14,
color: Colors.black,
fontWeight: FontWeight.w400)),
],
),
SizedBox(height: 12),
Row(
children: <Widget>[
Icon(Icons.attach_money, color: Colors.grey[700]),
Container(width: 8),
Text(_model._priceFrom,
style: TextStyle(
fontSize: 14,
color: Colors.black,
fontWeight: FontWeight.w400))
],
)
],
),
)
First time I use TextOverflow.ellipsis works and the second doesn't. Can anybody explain why? Thanks!

Just wrap your Text in another Flexible, like so:
Row(
children: <Widget>[
Icon(Icons.location_on, color: Colors.grey[700]),
Container(width: 8),
Flexible(
child: Text(_model._guides,
overflow: TextOverflow.ellipsis, //this one now works :)
style: TextStyle(
fontSize: 14,
color: Colors.black,
fontWeight: FontWeight.w400)),
),
],
),
The first Flexible wrapping your main Column sets the layout for its direct children, that's why the first Text works, because it's a direct child (layout wise) of the Column. But then you add a Row which sets its own children's layout, and the overflow won't work because it doesn't has any width constraint, by wrapping that Text in a Flexible you tell it to grab all the space it can up to its parent width, and apply whatever TextOverflow you need, ellipsis in this case.
Hope it helps.

The reason is that you need to tell the Text widget the max width for it to wrap. In a Row you can set it's mainAxisSize to MainAsixSize.max and wrap the Text widget on a Flexible to take the remaining space.
Row(
mainAxisSize: mainAxisSize: MainAxisSize.max,
children: <Widget>[
Icon(Icons.location_on, color: Colors.grey[700]),
Container(width: 8),
Flexible(
child: Text(_model._guides,
overflow: TextOverflow.ellipsis, //this one doesn't work
style: TextStyle(
fontSize: 14,
color: Colors.black,
fontWeight: FontWeight.w400,
),
),
),
],
),

This will set the text to a single line text and append it with an ellipsis. Note that it will only start appending once the width exceeds that of the parent widget.
Text(
"Really long text here!",
overflow: TextOverflow.ellipsis,
maxLines: 1,
)

Related

How to align three items, two on the sides and one on the center in Flutter?

Obviously, if two items only, MainAxisAlignment.space Between would be enough, but I have three items, so I have tried with Align:
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Align(
alignment: Alignment.topLeft,
child: Text('Left',
style: TextStyle(
fontSize: 8.0,
fontWeight: FontWeight.bold,
),),
),
Align(
alignment:Alignment.center,
child: Text('Center',
style: TextStyle(
fontSize: 9.0,
fontWeight: FontWeight.bold),
),
),
Align(
alignment: Alignment.topRight,
child: Text('Right',
style: TextStyle(
fontSize: 9.0,
fontWeight: FontWeight.bold,
)),
),
],
),
But contents are still aligned to center in general, I also tried using Spacer() before and after the centered element, the result was much like spaceEvenly but with spaces in between.
What I want is the centered element to be fixed in the center no matter what other elements contentes, the left element to be fixed on the left, the right element on the right.
EDIT
space Between is not working for sure, see doc:
MainAxisAlignment.spaceBetween:
Divides the extra space evenly between children.
This does not garantie that the centered element go to center.
Try below code, remove Align Widget refer Flutter Layout here
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Left',
style: TextStyle(
fontSize: 8.0,
fontWeight: FontWeight.bold,
),
),
Text(
'Center',
style: TextStyle(fontSize: 9.0, fontWeight: FontWeight.bold),
),
Text(
'Right',
style: TextStyle(
fontSize: 9.0,
fontWeight: FontWeight.bold,
),
),
],
),
Result->
Answer Updated:
Wrap your Text widget inside Expanded or Flexible Widget
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Text(
'Leftvsdvjwhgehdxuguhe duyxegfygwedue dw',
style: TextStyle(
fontSize: 8.0,
fontWeight: FontWeight.bold,
),
),
),
Expanded(
child: Text(
'Center',
style: TextStyle(fontSize: 9.0, fontWeight: FontWeight.bold),
),
),
Expanded(
child: Text(
'Right',
style: TextStyle(
fontSize: 9.0,
fontWeight: FontWeight.bold,
),
),
),
],
),
Result Image->
Finally, to get rid of the equal space caused by Expanded, I removed Expanded from the centered element, then set the fit properly to loose for the left and right elements.
To align sides, I surrounded the left and right elements with 'Row', to set 'MainAxisAlignment' to start and end respectively, now it works:
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
fit: FlexFit.loose,//Added this
child: Row(
//Surround the Left element with Row aligned to start
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
'Left',
style: TextStyle(
fontSize: 8.0,
fontWeight: FontWeight.bold,
),
),
]),
),
//No expanded needed to the centered child
Text( 'Center',style: TextStyle(
fontSize: 9.0,
fontWeight: FontWeight.bold,
),),
Expanded(
fit: FlexFit.loose,//Added this too
child: Row( //Surround the right element with Row aligned to end
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text(
'Right',
style: TextStyle(
fontSize: 9.0,
fontWeight: FontWeight.bold,
),
),
]),
),
],
)
Like #Yunus Emre Çelik said, you dont need to add Align, spaceBetween is already doing that. But, if your problem still persists, maybe you have a Column as parent of your Row that need crossAxisAlignment: CrossAxisAlignment.stretch,. Or if you dont, check if your Row can expand all width space available.
Anyway you can set your Row like that:
Row(
children: [
Expanded(...),
Expanded(...),
Expanded(...),
])
This force to set equals space to each child
But if you dont want to set equals space for all, can do that:
Row(
mainAxisAlignment: MainAxisAlignment.center, // <- center items
children: [
Flexible( // <-- flexible space
child: Container(
alignment: Alignment.centerLeft,
color: Colors.red,
child: Text('left left left left left left left left left left left '),
),
),
Container( // <-- center
alignment: Alignment.center,
color: Colors.blue,
child: Text('center'),
),
Flexible( // <-- flexible space
child: Container(
alignment: Alignment.centerRight,
color: Colors.green,
child: Text('right'),
),
),
],
),

Why textAlign of AutoSizeText Widget and crossAxisAlignment of Wrap Widget doesn't align correctly?

I'm using a Wrap and AutoSizeText for represent a value and the unit of measure on the same line.
I'm trying to align the value and the unit of measure at the end of the Container but it doesn't happen and what I get is this:
Below I attach the code:
Wrap(
crossAxisAlignment: WrapCrossAlignment.end,
children: [
Container(
color: Colors.red,
height: calculatedHeight,
child: AutoSizeText(
val.toString() + ' ',
minFontSize: 5,
textAlign: TextAlign.end,
style: TextStyle(
fontSize: item.textSize),
)),
Container(
color: Colors.amber,
height: calculatedHeight,
child: AutoSizeText(
unit,
textAlign: TextAlign.end,
minFontSize: 5,
style: TextStyle(
fontSize: item.unitSize),
)),
],
),
if I remove the Container it obviously aligns correctly but the problem is that if I remove it, the text is not resized..
Surely the problem is wrapping the AutoSizeText with the Containers, you can try this and replace the Wrap with the Row and wrap it with a FittedBox:
FittedBox(
fit: BoxFit.fitHeight,
child:
Row(
crossAxisAlignment:
CrossAxisAlignment.end,
children: [
AutoSizeText(
val.toString() + ' ',
minFontSize: 1,
style: TextStyle(
fontSize: item.textSize,
fontWeight: FontWeight.bold,
color: HexColor(
item.colors!.back!,
),
),
),
AutoSizeText(
unit,
textAlign: TextAlign.end,
minFontSize: 1,
style: TextStyle(
fontSize: item.unitSize,
color: HexColor(
item.colors!.back!,
),
),
),
),

Why isn't TextOverflow.Ellipsis working as intended with my Text Widget?

I'm trying to use TextOverflow.Ellipsis to make sure some text data doesn't cause an overflow error. Only problem is that it doesn't seem to be working properly for me. I add the property but the text doesn't get shortened and still causes an overflow error. Anyone got an idea of why this is occurring and how to fix it?
This is how it currently looks. Even with Ellipsis added.
This is the code that renders it all.
Expanded(
flex: 3,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.only(top: 13, left: 10),
child: Row(
mainAxisAlignment:
MainAxisAlignment.start,
children: [
Text(mileage[index].trippurpose,
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
color: Colors.black,
fontFamily: 'Montserrat'),
overflow: TextOverflow.ellipsis,
softWrap: false,
textAlign: TextAlign.center)
],
)),
Padding(
padding: EdgeInsets.only(left: 10),
child: Row(
children: [
Text(
'${mileage[index].tripfrom} - ',
style: TextStyle(
color: Colors.black,
fontStyle: FontStyle.italic),
),
Padding(
padding: EdgeInsets.only(right: 36),
child: Text(
mileage[index].tripto,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Colors.black,
fontStyle: FontStyle.italic
),
),
)
],
),
),
],
),),
First, I would always add the maxLines: 1 property to the Text widget in this kind of layouts.
Then...
If you can, try removing the Row widget.
If you can't remove the Row widget, wrap the Row widget with the Expanded widget around.

Is my TextOverflow.ellipsis causing my text to be moved to the right?

I'm displaying text in a ListView.Builder and if some of the text is too long I'm using the overflow: TextOverflow.ellipsis property of the Text widget to ensure it doesn't cause an overflow error. Well when text is too long, it uses the TextOverflow correctly, but it also shifts the text to the right. I want to keep the text all aligned. Could this be caused by the TextOverflow or is this a layout issue?
This is an image of one of the pieces of text that had ellipsis used on it due to it being too long. As you can see it is shifted to the right. This only occurs when an ellipsis is used though. If the Text doesn't need an ellipsis it doesn't get shifted to the right.
This is the code that renders this entire page. The bit that I's being moved to the right is where the the text displays mileage[index].trippurpose I've included the entire code incase it is a layout issue that I keep overlooking.
Container(
height: 60,
child: Row(
children: <Widget>[
Expanded(
flex: 1,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: EdgeInsets.only(left: 5, top: 13),
child: Text(mileage[index].tripdate,
style: TextStyle(
fontSize: 14, color: Colors.black),
textAlign: TextAlign.left),
),
],
),),
Expanded(
flex: 3,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.only(top: 13, left: 10),
child: Text(mileage[index].trippurpose,
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
color: Colors.black,
fontFamily: 'Montserrat'),
overflow: TextOverflow.ellipsis,
softWrap: true,
textAlign: TextAlign.center),),
Padding(
padding: EdgeInsets.only(left: 10),
child: Row(
children: [Text(
'${mileage[index].tripfrom} - ',
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Colors.black,
fontStyle: FontStyle.italic),
),
Padding(
padding: EdgeInsets.only(),
child:Text(
mileage[index].tripto,
overflow: TextOverflow.ellipsis,
softWrap: false,
style: TextStyle(
color: Colors.black,
fontStyle: FontStyle.italic
),
),
),
],
),
),
],
),),
Expanded(
flex: 1,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Padding(
padding:
EdgeInsets.only(top: 13, right: 10),
child: Container(
child: Text(
mileage[index].triptotalmiles,
style: TextStyle(
fontSize: 16,
color: Colors.black),
textAlign: TextAlign.right),
),
),
],
),)
],
))
Here is a sample code, you can use to create design as per your code.
Container(
child: Row(
children: [
Flexible(
flex: 1,
child: Text(
'THIS IS A TEST TEXT',
overflow: TextOverflow.ellipsis,
),
),
Flexible(
flex: 3,
fit: FlexFit.tight,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'THIS IS A TEST TEXT',
overflow: TextOverflow.ellipsis,
),
Text(
'THIS IS A TEST TEXT',
overflow: TextOverflow.ellipsis,
),
],
),
),
Flexible(
flex: 1,
child: Text(
'THIS IS A TEST TEXT',
overflow: TextOverflow.ellipsis,
),
),
],
),
)
Note :- You are applying wrong logics to your code. flex is best fit with Flexible widget. Also check FlexFit.tight.

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:
expected:
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,
),
),
),
),
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(),
)
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,
)
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
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),
),
You can do it like that
Expanded(
child: Text(
'Text',
overflow: TextOverflow.ellipsis,
maxLines: 1
)
)
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 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.")
]
),
)
],
),
),
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.
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.
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
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),
),
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),
),
),
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,),
],
),
SizedBox(
width: width-100,
child: Text(
"YOUR LONG TEXT HERE...",
maxLines: 3,
overflow: TextOverflow.clip,
softWrap: true,
style: TextStyle(
fontWeight:FontWeight.bold,
),
),
),
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,
),
),
),
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,
),
],
),
),
),
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...'),
)
]
)
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.
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)),
)
],
)
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,
),
),
),
],
),
),
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,
)
],
)
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.