I'm building an expenses app, and have:
As you can see, I have a text overflow problem. I want that text to trim with ellipses, but I'm not sure how to do it. Currently I have:
Widget buildCardLeft() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Text(
this.transaction.title,
style: TextStyle(fontSize: 24),
overflow: TextOverflow.ellipsis,
),
),
SizedBox(
height: 8,
),
Text(
dateFormat.format(this.transaction.date),
style: TextStyle(color: Colors.grey),
)
],
);
What's the correct way to get this text to truncate?
you can say like:
Text(
this.transaction.title.replaceRange(25, this.transaction.title.length, "...",
style: TextStyle(fontSize: 24),
overflow: TextOverflow.ellipsis,
)
Solved with Flexible:
Widget buildCardLeft() {
return Container(
child: Flexible(
flex: 1,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
this.transaction.title,
style: TextStyle(fontSize: 24),
overflow: TextOverflow.ellipsis,
),
SizedBox(
height: 8,
),
Text(
dateFormat.format(this.transaction.date),
style: TextStyle(color: Colors.grey),
)
],
),
),
);
}
Related
I am building a widget to look like Tweets. At the moment, the header is the following row:
Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: [
Flexible(
flex: 3,
child: Container(
margin: const EdgeInsets.only(right: 5.0),
child: Text(
poster.name,
style: Theme.of(context)
.textTheme
.headline4!
.copyWith(fontWeight: FontWeight.bold, fontSize: 14),
),
),
),
Expanded(
flex: 14,
child: Text(
'${poster.handle} · ${timeago.format(wave.createdAt)}',
style:
Theme.of(context).textTheme.headline5!.copyWith(fontSize: 12),
overflow: TextOverflow.ellipsis,
),
),
Spacer(),
if (showPopup)
WaveTilePopup(
poster: poster, wave: wave, user: user, onDeleted: onDeleted),
],
),
Which look like this:
When i increase the flex property of the name text, it will fix the formatting on the name, however shorter names will result in the PopUp being away from the right alignment, which is where I want it to be in a consistent manner:
Any ideas?
Thanks!
Instead of all hard-coded flex, you can just wrap your more button with expanded and align widget like this:
Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: [
Container(
margin: const EdgeInsets.only(right: 5.0),
child: Text(
poster.name,
style: Theme.of(context)
.textTheme
.headline4!
.copyWith(fontWeight: FontWeight.bold, fontSize: 14),
),
),
Text(
'${poster.handle} · ${timeago.format(wave.createdAt)}',
style: Theme.of(context)
.textTheme
.headline5!
.copyWith(fontSize: 12),
overflow: TextOverflow.ellipsis,
),
Expanded(
child: Align(
alignment: Alignment.centerRight,
child: showPopup
? WaveTilePopup(
poster: poster,
wave: wave,
user: user,
onDeleted: onDeleted)
: SizedBox(),
),
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children:const [
Padding(
padding: EdgeInsets.only(top: 30, bottom: 5.0),
child: Text(
"Data#data",
style: TextStyle(color: Colors.white),
),
),
Text(
"title",
style: TextStyle(fontSize: 18),
),
Text(
'datadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadata',
overflow: TextOverflow.ellipsis,
),
],
),
Expanded(
child: Text(
'datadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadata',
overflow: TextOverflow.ellipsis,
),)
Your column is inside a row widget and inside your column you use a long string so for telling column how much space should take you need wrap your column with Expanded widget:
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Padding(
padding: EdgeInsets.only(top: 30, bottom: 5.0),
child: Text(
"Data#data",
style: TextStyle(color: Colors.white),
),
),
Text(
"title",
style: TextStyle(fontSize: 18),
),
Text(
'datadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadata',
overflow: TextOverflow.ellipsis,
),
],
),
),
You should wrap your Text in a Flexible to let your element know that it's ok for the Text to be narrower than its intrinsic width. Expanded will also work.
you can encapsulate the text with the expanded widget and add the maxlines attribute
Expanded(child:
Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
maxLines:3,
overflow:TextOverflow.ellipsis ))
see the video.
When using Unicode text in flutter there seems to be a lot of whitespace in each character which makes it hard to align. In the code and picture below, I'm trying to get the 35m sit on the cross arrows with no space in between. I'm also trying to get the three stars at the start to center align vertically with the word starburst and then center align the (35m and arrows), starburst, and thee stars all to center align with each other vertically.
Scaffold(
body: SafeArea(
child: Column(
children: [
Row(
children: [
Text(
'\u{2605}' * 3,
style: TextStyle(
fontSize: 18.0,
),
),
Text(
'Starburst',
style: TextStyle(
fontSize: 28.0,
),
),
Column(
children: [
Text(
'35m',
style: TextStyle(
fontSize: 18.0,
),
),
Text(
'\u{2194}',
style: TextStyle(fontSize: 35.0),
),
],
)
],
),
],
),
),
);
Make Row crossAxisAlignment property to CrossAxisAlignment.center
Row(
crossAxisAlignment: CrossAxisAlignment.center
children: [....
And
Make Column mainAxisAlignment propert to
MainAxisAlignment.center
Column(
mainAxisAlignment: MainAxisAlignment.center
children: [...
You can use Stack instead of Column and align the Text as per your UI specifications:
Output Using Column:
Output Using Stack:
Full code:
return Scaffold(
body: SafeArea(
child: Column(
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'\u{2605}' * 3,
style: TextStyle(
fontSize: 18.0,
),
),
Text(
'Starburst',
style: TextStyle(
fontSize: 28.0,
),
),
// SizedBox(width: 5.0),
Container(
width: 50.0,
child: Center(
child: Stack(
children: [
Positioned(
top: 4,
child: Text(
'35m',
style: TextStyle(
fontSize: 18.0,
),
),
),
Text(
'\u{2194}',
style: TextStyle(fontSize: 40.0),
),
],
),
),
),
],
),
],
),
),
);
You might have to tweak Stack widget's children a bit, but I hope this answer gives the idea.
Now I am using this code to show text in flutter, this is my code:
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.only(top: 8, bottom: 8.0),
child: Text(
item.subName,
softWrap: true,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
),
),
),
],
),
sometimes the text item.subName is too long, how to make it auto expand or render in new line when the text overflow? I have tried to add this but still not work:
softWrap: true,
This is the error:
Try this
new Container(
child: Row(
children: <Widget>[
Flexible(
child: new Text("sample text"))
],
));
Row(
children: <Widget>[
Expanded(
child: new Text("your text"))
],
)
Widget build(BuildContext context){
final size = MediaQuery.of(context).size;
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
width: size.width * 0.4, // Choose a number that works for you
child: Text(
item.subName,
softWrap: true,
overflow: TextOverflow.clip,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
),
),
),
],
),
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.