Related
That's how it looks when I have a WidgetSpan and a TextSpan, and the text inside the TextSpan is too long:
problem
A similar question has already been asked here TextSpan's text doesn't show if it overflows and is placed after WidgetSpan, but the one answer isn't suitable for my problem.
I have two Text.rich() widgets (which each host one WidgetSpan and one TextSpan) inside an Expanded widget, both Expanded with flex:1, because I want them to be the same size and take as much space as they can. That's why a row is not an option, you can't (as far as I know) put two rows side by side, at this happens...
using rows
This is how it's supposed to look like, just with the TextOverflow.ellipsis, if the text is too long:
target UI
Here is my code:
Row(
children: [
Expanded(
flex: 1,
child: Text.rich(
TextSpan(children: [
WidgetSpan(
child: Container(
margin: const EdgeInsets.only(right: 4.0),
child: SvgPicture.asset("assets/icons/building.svg", color:
htLightGrey),
),
),
TextSpan(
text: incident.building.name,
style: const TextStyle(
fontWeight: FontWeight.normal,
fontSize: 16.0,
color: htLightGrey, /*overflow: TextOverflow.ellipsis*/
),
),
]),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
Expanded(
flex: 1,
child: incident.department != null
? Text.rich(
TextSpan(children: [
WidgetSpan(
child: Container(
margin: const EdgeInsets.only(right: 4.0),
child: SvgPicture.asset("assets/icons/department.svg",
color: htLightGrey),
),
),
TextSpan(
text: incident.department!.name,
style: const TextStyle(fontWeight: FontWeight.normal,
fontSize: 16.0, color: htLightGrey, overflow:
TextOverflow.ellipsis),
),
]),
maxLines: 1,
overflow: TextOverflow.ellipsis,
)
: const SizedBox.shrink(),
)
],
)
To achieve your target Ui, use the Wrap widget instead of the Row widget. Here, when the contents of the widget overflow/exceed it will break it to the next line, hence you'll achieve your target Ui.
While we like to archive this UI, we are using Row as parent widget, which is perfect. Then we can split the row into tree part, left two part will get same and maximum available width. For this scenario, widget structure as follows.
Row(
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
flex: 1,
child: Container(
color: Colors.green,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start, //start from left
children: [
buildItem(
text:
"incident.buildi cident.buildi cident.buildi cident.buildi cident.building.name"),
buildItem(text: "incide ing.ssss"),
],
),
),
),
Expanded(
flex: 1,
child: Container(
color: Colors.red,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
buildItem(text: "i ent.building.name"),
buildItem(text: "incident.building.ssss"),
],
),
),
),
IconButton(
onPressed: () {},
iconSize: 33,
icon: Icon(Icons.arrow_right),
),
],
),
And inside Text.rich add use alignment: PlaceholderAlignment.middle, on WidgetSpan to set the middle.
maxLines: 1,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.start,
And you will get
I am using extra container to point the UI, simply remove the container from the column. Also, you can use Row instead of Rich Text.
Test widget
class _TestGroundState extends State<TestGround> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Row(
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
flex: 1,
child: Container(
color: Colors.green,
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start, //start from left
children: [
buildItem(
text:
"incident.buildi cident.buildi cident.buildi cident.buildi cident.building.name"),
buildItem(text: "incide ing.ssss"),
],
),
),
),
Expanded(
flex: 1,
child: Container(
color: Colors.red,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
buildItem(text: "i ent.building.name"),
buildItem(text: "incident.building.ssss"),
],
),
),
),
IconButton(
onPressed: () {},
iconSize: 33,
icon: Icon(Icons.arrow_right),
),
],
),
],
));
}
Text buildItem({
required String text,
}) {
return Text.rich(
TextSpan(
children: [
WidgetSpan(
alignment: PlaceholderAlignment.middle,
child: Container(
child: Icon(Icons.ac_unit),
),
),
TextSpan(
text: text,
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 16.0,
),
),
],
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.start,
);
}
}
More about flutter layout
In appBar I have a container which is responsible for displaying text (it could be 5 chars or even 100). And I want to adjust width of container based on text. For example for 5 chars container should show text and should be a little bigger than text (I will add paddings later), but for 100 chars container should take all possible space and show text with dots.
Currently I have two solutions:
The first one (Without spacer() in tree) is expanding container always to the biggest possible width (like I said, I don't need this big container for short texts)
The second one (with spacer() in tree) is always displaying container with 1/3 width of appbar (Did someone know why it's always the same width? It's kind of interesting).
return Scaffold(
appBar: AppBar(
titleSpacing: 10,
centerTitle: false,
automaticallyImplyLeading: false,
title: SizedBox(
width: MediaQuery.of(context).size.width,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(height: 40, width: 40, color: Colors.amberAccent),
const SizedBox(width: 10),
const Text("Some Text"),
const SizedBox(width: 10),
Expanded(
child: Container(
color: Colors.purpleAccent,
height: 40,
child: const Center(
child: Text(
"text",
overflow: TextOverflow.ellipsis,
softWrap: true,
),
),
),
),
],
),
),
),
body: Container(),
);
So, how can I adjust width of this container to text inside?
Update:
I don't know if I explained it correctly, because your answers weren't related with my question đ So I will try again:
I want the last one container to take full possible width if text is long and for shorten texts just width to cover background behind text.
Here is long text: (It should be like that)
Here is short text: (Container should be smaller)
You should use constraints: BoxConstraints(maxWidth:), property of Container.
Please go with below code.
Container(
color: Colors.red,
padding: const EdgeInsets.all(20.0),
constraints: BoxConstraints(
maxWidth: MediaQuery.of(context).size.width * 0.7,
),
child: Text('Hello', style: TextStyle(color: Colors.black)),
),
Spacer(),
Flexible(
child: Container(
color: Colors.purpleAccent,
height: 40,
child: const Center(
child: Text(
"Long Textttttttttttttttttttt",
overflow: TextOverflow.ellipsis,
softWrap: true,
),
),
),
),
Your result will be like below screenshot.
I implement another text for checking dynamic width of container.
Container(
color: Colors.red,
padding: const EdgeInsets.all(20.0),
constraints: BoxConstraints(
maxWidth: MediaQuery.of(context).size.width * 0.7,
),
child: Text('Hello World', style: TextStyle(color: Colors.black)),
),
Spacer(),
Flexible(
child: Container(
color: Colors.purpleAccent,
height: 40,
child: const Center(
child: Text(
"Long Textttttttttttttttttttt",
overflow: TextOverflow.ellipsis,
softWrap: true,
),
),
),
),
For This You can Use :
Flexible Widget:
Example:
Flexible(
child: Container(
color: Colors.green,
)
),
or Wrap Widget :
Example :
Card(
margin: const EdgeInsets.only(top: 20.0),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: <Widget>[
Text(
'Categories',
style: TextStyle(fontFamily: 'MonteSerrat', fontSize: 16.0),
),
Wrap(
children: <Widget>[
_checkBox('Gaming'),
_checkBox('Sports'),
_checkBox('Casual'),
_checkBox('21 +'),
_checkBox('Adult'),
_checkBox('Food'),
_checkBox('Club'),
_checkBox('Activities'),
_checkBox('Shopping')
],
)
],
),
));
I used a card widget in my flutter App that has two rows, the problem that I have is a large space appeared between the two rows as you can see in the following image
how can fix this problem ?
my code that i tried it here :
return Card(
child: Container(
alignment: FractionalOffset.center,
child: Row(
children: <Widget>[
Expanded(
flex: 1,
child: Container(
child: ListTile(
title: Text(snapshot.data[index].data["title"],
textDirection: TextDirection.rtl,
style: TextStyle(fontSize: 14.0,
fontFamily: 'Cairo',
fontWeight: FontWeight.bold),),
onTap: () => navigateToDetails(snapshot.data[index]),
),
),
),
//SizedBox(width: 1.0),
Expanded(
flex: 1,
child: Container(child: Image.network(snapshot.data[index].data["image_url"],height: 80.0,width: 80.0)),
),
],
),
),
);
add MainAxisAlignment:MainAxisAlignment.center property to your Row widget
followed code should work for you check this out.
return Card(
child: Container(
alignment: FractionalOffset.center,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
flex: 1,
child: Container(
child: ListTile(
title: Text(
snapshot.data[index].data["title"],
textDirection: TextDirection.rtl,
style: TextStyle(
fontSize: 14.0,
fontFamily: 'Cairo',
fontWeight: FontWeight.bold),
),
onTap: () => navigateToDetails(snapshot.data[index]),
),
),
),
//SizedBox(width: 1.0),
Expanded(
flex: 1,
child: Container(
child: Image.network(snapshot.data[index].data["image_url"],
height: 80.0, width: 80.0)),
),
],
),
),
);
you are using expanded widget inside row so that both the widget try to get same width and also try to cover whole width possible.
so that, if you want to remove space between row widget then remove expanded widget and play with MainAxisAlignment property of Row to arrange or manage the space.
you can use values like:
MainAxisAlignment.spaceBetween and MainAxisAlignment.spaceEvenly
What I want to achieve is to have a text widget inside a Column of fixed height. When the text is long I want the overflow property which is set to TextOverflow.ellipsis to kick in. The Text widget has its maxLines property set to a high value to allow it to wrap down. But there are other widgets in the column too, both before and after the text widget. The text widget is in an Expanded widget so that it takes up as much room in the column. Full code is pasted below.
The problem with this setup is that the text is overflowing its container parent. I have a border decoration on the container that shows this happening. Why is this happening and how do I fix it.
import 'package:flutter/material.dart';
void main() {
runApp(App());
}
class App extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Overflow"),
),
body: Center(
child: Container(
width: 200.0,
height: 250.0,
child: Card(
child: Column(children: <Widget>[
Image.asset(
"assets/bereket.jpg",
width: double.infinity,
fit: BoxFit.cover,
),
Expanded(
child: Container(
padding: EdgeInsets.all(8.0),
child: (Column(
children: [
Text(
"á á¨á¨áľ áľááŚáᥠáááᎠá á áááᤠáĽááľá á áŤááŁááľá! á ááá áááᥠá áááÂť",
maxLines: 2,
style: Theme.of(context)
.primaryTextTheme
.subhead
.copyWith(
color: Colors.black,
),
overflow: TextOverflow.ellipsis),
Expanded(
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.green, width: 2.0),
),
child: Text(
"""áŁáááľ áááľ á áľááľ áááłáľ á á˘áľáŽáľáŤ ááá˛áŤ á¨áá°á á°á˝áĽá ááŁáŞ á¨áá áŠáľ á áś á á¨á¨áľ áľááŚá á á
áᥠá¨áĽá á´á ááĽá¨áá áŽáá´ á áŁáááľ ááłááłá¸á ááłááłáá˘
á áś á áá¨áľ á¨áĽá á´á ááłáá á á°ááá¨á° áĽá á¨áá°ááľ á¨ááá˛áŤ á
áááłá¸á áá ááá áĽáá°áá˝á áá˘á˘á˛ á ááá°ááá˘""",
maxLines: 10,
style: Theme.of(context)
.primaryTextTheme
.caption
.copyWith(color: Colors.black),
overflow: TextOverflow.ellipsis,
))),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
width: 20.0,
height: 20.0,
child: Image.asset("assets/bbc.png"),
),
SizedBox(width: 8.0),
Text('á˘á˘á˛ - á¨áááľ á°á áľ á ááľ',
style: Theme.of(context)
.textTheme
.caption
.copyWith(fontSize: 10.0))
],
)
],
))))
]))),
),
),
);
}
}
Try wrapping your column with 'Flexible' instead of expandable.
I had the same issue with text overflowing in column and wrapping column itself with 'flexible' allowed to make text smaller.
Flexible(
child: Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Text(
'Name',
style: CustomTextStyle.blueTitle14(context),
),
),
Padding(
padding: const EdgeInsets.only(bottom: 4.0),
child: Text('Long text'),
),
],
),
),
),
Based on my experiences, you should assign a fixed width to the Container containing the overflowing text, as per this post. Flutter- wrapping text .
In present version of flutter (presently 3.0) you dont have to use Flexible or Expanded as Column's child automatically expandes to fill the content of child .
For ellipses 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))
],
)
In the code below, textAlign property doesn't work. If you remove DefaultTextStyle wrapper which is several levels above, textAlign starts to work.
Why and how to ensure it is always working?
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new DefaultTextStyle(style: new TextStyle(fontSize: 10.0), child: new Column(children: <Widget>[
new Text("Should be left", textAlign: TextAlign.left,),
new Text("Should be right", textAlign: TextAlign.right,)
],))
);
}
}
Both approaches, suggested by Remi apparently don't work "in the wild". Here is an example I nested both inside rows and columns. First approach doesn't do align and second approach makes application just crash:
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return new Directionality(textDirection: TextDirection.ltr, child: new DefaultTextStyle(
style: new TextStyle(fontSize: 10.0, color: Colors.white),
child: new Column(children: <Widget>[
new Row(children: <Widget>[
new Container(color: Colors.grey, child: new Column(children: <Widget>[
new Align(alignment: Alignment.centerLeft, child: new Text("left")),
new Align(alignment: Alignment.centerRight, child: new Text("right")),
],)),
new Container(color: Colors.grey, child: new Column(children: <Widget>[
new Align(alignment: Alignment.centerLeft, child: new Text("left")),
new Align(alignment: Alignment.centerRight, child: new Text("right")),
],)),
],),
/*new Row(children: <Widget>[
new Container(color: Colors.grey, child: new Column(children: <Widget>[
new SizedBox(width: double.infinity, child: new Text("left", textAlign: TextAlign.left,)),
new SizedBox(width: double.infinity, child: new Text("right", textAlign: TextAlign.right)),
],)),
new Container(color: Colors.grey, child: new Column(children: <Widget>[
new SizedBox(width: double.infinity, child: new Text("left", textAlign: TextAlign.left)),
new SizedBox(width: double.infinity, child: new Text("right", textAlign: TextAlign.right)),
],)),
],)*/]
)));
}
}
What I get from code is
i.e. text is centered, ignoring alignment of Align element.
DefaultTextStyle is unrelated to the problem. Removing it simply uses the default style, which is far bigger than the one you used so it hides the problem.
textAlign aligns the text in the space occupied by Text when that occupied space is bigger than the actual content.
The thing is, inside a Column, your Text takes the bare minimum space. It is then the Column that aligns its children using crossAxisAlignment which defaults to center.
An easy way to catch such behavior is by wrapping your texts like this :
Container(
color: Colors.red,
child: Text(...)
)
Which using the code you provided, render the following :
The problem suddenly becomes obvious: Text don't take the whole Column width.
You now have a few solutions.
You can wrap your Text into an Align to mimic textAlign behavior
Column(
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Container(
color: Colors.red,
child: Text(
"Should be left",
),
),
),
],
)
Which will render the following :
or you can force your Text to fill the Column width.
Either by specifying crossAxisAlignment: CrossAxisAlignment.stretch on Column, or by using SizedBox with an infinite width.
Column(
children: <Widget>[
SizedBox(
width: double.infinity,
child: Container(
color: Colors.red,
child: Text(
"Should be left",
textAlign: TextAlign.left,
),
),
),
],
),
which renders the following:
In that example, it is TextAlign that placed the text to the left.
Specify crossAxisAlignment: CrossAxisAlignment.start in your column
In Colum widget Text alignment will be centred automatically, so use crossAxisAlignment: CrossAxisAlignment.start to align start.
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(""),
Text(""),
]);
textAlign property only works when there is a more space left for the Text's content. Below are 2 examples which shows when textAlign has impact and when not.
No impact
For instance, in this example, it won't have any impact because there is no extra space for the content of the Text.
Text(
"Hello",
textAlign: TextAlign.end, // no impact
),
Has impact
If you wrap it in a Container and provide extra width such that it has more extra space.
Container(
width: 200,
color: Colors.orange,
child: Text(
"Hello",
textAlign: TextAlign.end, // has impact
),
)
Set alignment: Alignment.centerRight in Container:
Container(
alignment: Alignment.centerRight,
child:Text(
"Hello",
),
)
You can use the container, It will help you to set the alignment.
Widget _buildListWidget({Map reminder}) {
return Container(
color: Colors.amber,
alignment: Alignment.centerLeft,
padding: EdgeInsets.all(20),
height: 80,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
alignment: Alignment.centerLeft,
child: Text(
reminder['title'],
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 16,
color: Colors.black,
backgroundColor: Colors.blue,
fontWeight: FontWeight.normal,
),
),
),
Container(
alignment: Alignment.centerRight,
child: Text(
reminder['Date'],
textAlign: TextAlign.right,
style: TextStyle(
fontSize: 12,
color: Colors.grey,
backgroundColor: Colors.blue,
fontWeight: FontWeight.normal,
),
),
),
],
),
);
}
For maximum flexibility, I usually prefer working with SizedBox like this:
Row(
children: <Widget>[
SizedBox(
width: 235,
child: Text('Hey, ')),
SizedBox(
width: 110,
child: Text('how are'),
SizedBox(
width: 10,
child: Text('you?'))
],
)
I've experienced problems with text alignment when using alignment in the past, whereas sizedbox always does the work.
You can align text anywhere in the scaffold or container except center:-
Its works for me anywhere in my application:-
new Text(
"Nextperience",
//i have setted in center.
textAlign: TextAlign.center,
//when i want it left.
//textAlign: TextAlign.left,
//when i want it right.
//textAlign: TextAlign.right,
style: TextStyle(
fontSize: 16,
color: Colors.blue[900],
fontWeight: FontWeight.w500),
),
Text(' Use textAlign: TextAlign.center',
style: TextStyle(fontWeight: FontWeight.w900,fontSize: 20,),
textAlign: TextAlign.center,)
Always use textAlign When trying to direct you text