I have the following List.
I would like the scale Icons (on the right) to be aligned.
The top should be in the same spot as the one underneath.
#override
Widget build(BuildContext context) {
return Padding(
padding:
const EdgeInsets.only(left: 0.0, right: 0.0, top: 8.0, bottom: 8.0),
child: Slidable(
endActionPane: ActionPane(motion: StretchMotion(), children: [
//delete option
SlidableAction(
onPressed: deleteTapped,
backgroundColor: Colors.red.shade400,
icon: Icons.delete,
borderRadius: BorderRadius.circular(8),
)
]),
child: Container(
padding: const EdgeInsets.all(16.0),
decoration: BoxDecoration(
color: Color(0xFFD9F0FF),
borderRadius: BorderRadius.circular(8),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
const Icon(
Icons.date_range_outlined,
color: Color(0xFF006B8F),
),
const SizedBox(width: 8),
Text(date,
style: const TextStyle(
fontWeight: FontWeight.w400,
fontSize: 18,
color: Color(0xFF006B8F))),
const Spacer(),
const Text(
"|",
style: TextStyle(
fontSize: 18,
color: Color(0xFF006B8F),
fontWeight: FontWeight.bold),
),
const Spacer(),
const Icon(
Icons.monitor_weight_outlined,
color: Color(0xFF006B8F),
),
const SizedBox(width: 8),
Text(weight + " kg",
style: const TextStyle(
fontWeight: FontWeight.w400,
fontSize: 18,
color: Color(0xFF006B8F))),
],
),
),
),
);
}
}
I have tried several things, like putting the Icon and the text in a container but with no luck.
Any help appreciate it!
While you are already using Spacer on both Size, you can use
textAlign: TextAlign.center,
const Text(
"|",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 18,
color: Color(0xFF006B8F),
fontWeight: FontWeight.bold),
),
Without spacer, it can be
Expanded(
child: const Text(
"|",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 18,
color: Color(0xFF006B8F),
fontWeight: FontWeight.bold),
),
),
try this:
Column(
children: [
IntrinsicHeight(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Row(
children: [
//left part
],
),
VerticalDivider(),
Row(
children: [
//right part
],
)
],
),
),
....
],
)
I am trying to make a widget that may have some long text that I would want to wrap a few lines.
I am trying to use the "Flexible" widget to wrap my Text but it is still overflowing and I do not know what is going wrong.
Here is what is happening:
Here is my code for the Columns which will be relevant to the Text:
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'My Title text',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
color: Colors.black),
),
Text(
'This is lower text',
style: TextStyle(
fontWeight: FontWeight.w200,
fontSize: 16.0,
color: Colors.black),
),
Flexible(
child: Text(
'Here is some long text that I am expecting will go off of the screen.',
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 16.0,
color: Colors.black),
),
)
],
),
),
And in case it is relevant, here is the whole widget:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Material(
color: Colors.transparent,
child: Container(
height: 100.0,
child: Padding(
padding: EdgeInsets.all(8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Padding(
padding: EdgeInsets.all(16.0),
child: Icon(
Icons.cake,
size: 60.0,
),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'My Title text',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
color: Colors.black),
),
Text(
'This is lower text',
style: TextStyle(
fontWeight: FontWeight.w200,
fontSize: 16.0,
color: Colors.black),
),
Flexible(
child: Text(
'Here is some long text that I am expecting will go off of the screen.',
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 16.0,
color: Colors.black),
),
)
],
),
),
],
),
),
),
),
);
}
You can use Expanded Here. Expanded, which forces the child to expand to fill the available space. you can expand column here.
Here is code snippet for column:-
Expanded(
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'My Title text',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
color: Colors.black),
),
Text(
'This is lower text',
style: TextStyle(
fontWeight: FontWeight.w200,
fontSize: 16.0,
color: Colors.black),
),
Flexible(
child: Text(
'Here is some long text that I am expecting will go off of the screen.',
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 16.0,
color: Colors.black),
),
)
],
),
),
)
Here is what you expect:-
Hope it will work.
You need to put the Container to Expanded inside Row widget
Like this
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.all(16.0),
child: Icon(
Icons.cake,
size: 60.0,
),
),
Expanded(child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'My Title text',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
color: Colors.black),
),
Text(
'This is lower text',
style: TextStyle(
fontWeight: FontWeight.w200,
fontSize: 16.0,
color: Colors.black),
),
Flexible(
child: Text(
'Here is some long text that I am expecting will go off of the screen.',
softWrap: true,
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 16.0,
color: Colors.black),
),
)
],
),
),
) ],
),
The problem is if you didn't put the Container into Expanded, the Row widget keeps expand itself to horizontal and it would overflow.
you can try this approach by placing the width of the container to 70% and for an image 30%. There is no need for Flexible widget over here
Container(
width:MediaQuery.of(context).size.width*0.7
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Here is some long text that I am expecting will go off of the screen.',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
color: Colors.black),
),
Text(
'Here is some long text that I am expecting will go off of the screen.',
style: TextStyle(
fontWeight: FontWeight.w200,
fontSize: 16.0,
color: Colors.black),
),
Text(
'Here is some long text that I am expecting will go off of the screen.',
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 16.0,
color: Colors.black
)
],
),
),
I was trying to use a ListTile to display a small title on the left, and then a longer text in the trailing widget. My idea es to let the trailing text to split out into multiple lines if there is not enough horizontal space.
I also tried to create my own tile using the following code:
Container(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 12),
child: Text(
"Campus",
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w700,
),
),
),
Text(
"20h course - New students -",
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w400,
),
),
],
),
),
Using this code in a Pixel 2 XL emulator, as there is enough space, everything is in the same line as expected:
But when I'm trying it in a Nexus One emulator, because of its size, here is the output:
In order to allow the text to split in multiples lines, I wrapped the text on the right into a flexible widget:
Container(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 12),
child: Text(
"Campus",
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w700,
),
),
),
Flexible(
child: Text(
"20h course - New students -",
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w400,
),
),
),
],
),
),
But then the problem is that even though the text is split in two lines, it is using more space than needing, so there is empty space left:
I have also tried to use an align widget to move the text to the end, but no luck either. Any ideas?
Wrap your Text with container and give it alignment left or right. Then the important part is, add textWidthBasis: TextWidthBasis.longestLine, to your Text. Code:
Container(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 12),
child: Text(
"Campus",
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w700,
),
),
),
Flexible(
child: Container(
alignment: Alignment.centerLeft,
child: Text(
"20h course - New students - sd f sdfsddssdfsdfs dfs df sf sdf sdf ",
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w400,
),
textWidthBasis: TextWidthBasis.longestLine,
),
),
),
],
),
),
Flexible expands to fill all the available space. So if you want both widgets have the same space you can wrap the with flexible. Also you can use softWrap for you text.
Container(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Flexible(
child: Padding(
padding: const EdgeInsets.only(right: 12),
child: Text(
"Campus",
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w700,
),
),
),
),
Flexible(
child: Text(
"20h course - New students -20h course - New students -20h course - New students -20h course - New students -20h course - New students -",
softWrap: true,
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w400,
),
),
),
],
),
),
You can also use Expanded instead of `Flexible
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.