Related
As you can see in the these two photos below, this problem happened only when the address contains many words, if the address contains fewer words I don't see any issues, I got stuck here and can't think anymore :)
what shall I do in this case, please?
Code:
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
children: [
UserAvatarView(
urlPrefix: serverUrl,
url: null,
cornerRadius: 60,
size: 20),
const SizedBox(width: 8),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
order.service.name,
style: Theme.of(context).textTheme.titleMedium,
),
Text(
"${(driverDistance / 1000).round()} KM away",
style: Theme.of(context).textTheme.labelMedium,
)
],
),
const Spacer(),
Container(
padding:
const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
decoration: BoxDecoration(
color: CustomTheme.primaryColors.shade200,
borderRadius: BorderRadius.circular(12)),
child: Text(
NumberFormat.simpleCurrency(name: order.currency)
.format(order.costBest),
style: Theme.of(context).textTheme.headlineMedium,
),
)
],
),
const Divider(),
...order.addresses.mapIndexed((e, index) {
if (order.addresses.length > 2 &&
index > 0 &&
index != order.addresses.length - 1) {
return const SizedBox(
width: 1,
height: 1,
);
}
return Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Padding(
padding: const EdgeInsets.all(0),
child: Icon(
getIconByIndex(index, order.addresses.length),
color: CustomTheme.neutralColors.shade500,
),
),
Expanded(
child: Text(e,
overflow: TextOverflow.visible,
style: Theme.of(context).textTheme.bodySmall),
),
if (index == order.addresses.length - 1)
Text(
order.durationBest == 0
? ""
: durationToString(
Duration(seconds: order.durationBest)),
style: Theme.of(context).textTheme.bodySmall)
],
).pOnly(right: 0),
if (index < order.addresses.length - 1)
DottedLine(
direction: Axis.vertical,
lineLength: 25,
lineThickness: 3,
dashLength: 3,
dashColor: CustomTheme.neutralColors.shade500)
.pOnly(left: 10)
],
);
}).toList(),
const Spacer(),
Row(
children: order.options
.map((e) => OrderPreferenceTagView(
icon: e.icon,
name: e.name,
))
.toList()),
ElevatedButton(
onPressed: !isActionActive
? null
: () => onAcceptCallback(order.id),
child: Row(
children: [
const Spacer(),
Text(S.of(context).available_order_action_accept),
const Spacer()
],
).p4())
.p4()
],
),
Photo of a few address words:
Photo of many address words:
Try to wrap your Text() widget with a Flexible(). This should size your widget to make the Text fit.
More here
So i fixed it by adding maxLines and added softWrap and set it to true, (thanks to #Marcel Dz) for his suggestion, but it doesn't work with only Wrap the text with Flexible.
The problem is that the address is changeable, every address has a different number of words, when the address is long it's mean more words and these words are pushing the Button to the bottom because there's no more free space to show the full words of address.
here is the piece of code that i modified:
Expanded(
child: Text(e,
overflow: TextOverflow.visible,
maxLines: 3,
softWrap: true,
style: Theme.of(context).textTheme.bodySmall),
),
Another solution with Flexible:
Flexible(
child: Text(e,
overflow: TextOverflow.visible,
maxLines: 3,
softWrap: true,
style: Theme.of(context).textTheme.bodySmall),
),
Result:
Now it's working perfectly, and i can have as many words as i need, both Expended and Flexible can be used.
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
I'm trying to get my app polished and noticed an issue with the SliverChildList I'm using. When the Text inside is too long to be displayed I get an expection thrown.
How am I able to correctly wrap the Text (not cut)
As in my example most of the entries work just fine. For the elements that overflow I'd like to break the text to the next line and adapt the list element height.
Something simular to:
{ } Colombian White-Faced Capuchin
{ image } Monkey
{ } Cebus capucinus
I tried adding overflow: TextOverflow.ellipsis to the text element but it doesn't appear to work the way I'd like it to.
Code:
SliverList(
delegate: SliverChildListDelegate(
[
for (var animal in response)
GestureDetector(
onTap: () {
print('(DEBUG) Pressed on ${animal['id']} (${animal['name']})');
},
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(left: 10),
child: Image.network(
animal['image_url'],
fit: BoxFit.cover,
width: 75,
height: 50,
),
),
Padding(
padding: const EdgeInsets.fromLTRB(15, 10, 20, 10),
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(animal['name'].toString(),
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold),
overflow: TextOverflow.ellipsis),
if (animal['latin_name'] != null)
Text(animal['latin_name'].toString(),
style: TextStyle(
fontStyle: FontStyle.italic)),
],
),
),
),
],
)),
],
),
)
Try wrapping your Text widget in a Flexible or Expanded widget.
I am new to flutter, need to know about a problem I am facing. I have built a web app using flutter. Which contains columns, containers, grid views, and other flutter widgets.
The problem I am facing is, though my layout is responsive when I shrink the chrome browser, it starts shrinking the content. Usually, in sites like Amazon, and other web pages, the shrink browser shows an extra scroll bar horizontally and vertically, and the content size remains the same.
How the same can be done using flutter?
Before
After
Here is the code:
Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(
child: DateCard(
eventName: 'Code Freeze', date: DateTime.now())),
SizedBox(width: 5),
Flexible(
child: DateCard(
eventName: 'Switchover', date: DateTime.now())),
SizedBox(width: 5),
Flexible(
child: DateCard(eventName: 'SP GA', date: DateTime.now())),
],
),
class DateCard extends StatelessWidget {
final String eventName;
final DateTime date;
const DateCard({this.eventName, this.date});
#override
Widget build(BuildContext context) {
return Column(
children: [
Material(
shape: SuperellipseShape(
borderRadius: BorderRadius.circular(28),
),
child: Container(
padding: EdgeInsets.symmetric(horizontal: 18, vertical: 3),
child: FittedBox(
fit: BoxFit.contain,
child: Column(
children: [
Text(
date.day.toString(),
// maxLines: 1,
// overflow: TextOverflow.visible,
style: TextStyle(
fontSize: SizeConfig.blockSizeHorizontal * 3,
letterSpacing: -1),
),
Text(
DateFormat("MMM").format(date),
// overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: SizeConfig.blockSizeHorizontal * 1.2,
),
),
],
),
),
),
),
SizedBox(height: 5),
Text(
eventName,
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white, fontSize: 14),
)
],
);
}
}
I am trying to create a list view that contains 10 data, in each item there four widgets that wraps inside a row.
First i inserted a circle image widget, in next I added expanded widget to divide the text widgets equally.
Almost, I have achieved but i found difficulty in ellipsis the text.
Code
class EmailPage extends StatefulWidget {
#override
_EmailPageState createState() => _EmailPageState();
}
class _EmailPageState extends State<EmailPage> {
GlobalKey _keyRed = GlobalKey();
var name = "Adellena Jacksonnnnnnnnnnnnnnnnnnnnnnnnnnnn";
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0.0,
backgroundColor: greenColor,
title: const Text('Inbox'),
actions: <Widget>[
new IconButton(
icon: new Icon(Icons.edit),
onPressed: () => Navigator.of(context).pop(null),
),
],
),
body: SizedBox(
width: MediaQuery.of(context).size.width,
child: ListView.builder(
shrinkWrap: true,
itemCount: 10,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.all(10.0),
child: new Row(
children: <Widget>[
SizedBox(
width: 30,
height: 30,
child: CircleAvatar(
backgroundColor: Colors.brown.shade800),
),
Expanded(
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
flex: 4,
child: Container(
child: new Text(
name,
overflow: TextOverflow.ellipsis,
softWrap: false,
style: TextStyle(fontSize: 14),
),
),
),
new Expanded(
flex: 3,
child: new Text(
"&14215",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 12),
),
),
new Expanded(
flex: 3,
child: new Text(
"1000 min ago",
textAlign: TextAlign.end,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 14),
),
),
],
),
),
],
),
);
}),
));
}
}
Screenshot 1
When we remove overflow: TextOverflow.ellipsis in the text widget look like this [Screenshot 2]
Screenshot 2
In above image i didn't get the full text "AdellenaJacksonnnnnnnnn
", but expanded restrict the widget
how many flex can be shown in it. Problem is ellipsis not working as
expected
Note : When i remove the space in the string var name = "AdellenaJacksonnnnnnnnn"; like this ellipsis working fine
The simplest way:
var name = 'Adellena Jacksonnnnnnnnn';
name = name.replaceAll('', '\u200B');
For simpler to use, you can write an extension:
extension StringExtension on String {
String useCorrectEllipsis() {
return replaceAll('', '\u200B');
}
}
usage:
final name = 'Adellena Jacksonnnnnnnnn'.useCorrectEllipsis();
You could make use of this stupid hack, by splitting the name into, you could modify and actually make use of it if you set any max length for first name.
I have clipped the first name so it won't look like it's overflowing get along with the ui, assume there is no maxlength
Flexible(
child: Text(
tempname[0],
overflow: TextOverflow.clip,
maxLines: 1,
),
),
The last name is set ellipsis to give a hit the name is overflowing
Flexible(
child: Text(
tempname[0],
overflow: TextOverflow.ellipsis,
),
),
ListView.builder(
shrinkWrap: true,
itemCount: 10,
itemBuilder: (BuildContext context, int index) {
var tempname = name.split(' ');
return Padding(
padding: const EdgeInsets.all(10.0),
child: new Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
SizedBox(
width: 30,
height: 30,
child: CircleAvatar(
backgroundColor: Colors.brown.shade800),
),
Expanded(
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
flex: 4,
// width: 100,
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Flexible(
child: Text(
tempname[0],
overflow: TextOverflow.clip,
maxLines: 1,
),
),
Text(' '),
Flexible(
child: Text(
tempname[1],
overflow: TextOverflow.ellipsis,
),
)
],
),
),
new Expanded(
flex: 3,
child: new Text(
"&14215",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 12),
),
),
new Expanded(
flex: 3,
child: new Text(
"1000 min ago",
textAlign: TextAlign.end,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 14),
),
),
],
),
),
],
),
);
}),
name = 'Adellenaddddddddddddd Jacksoonnnnnnnnnn';
name = 'Nadeem Jacksoonnnnnnnnnn';
overflow: TextOverflow.fade did the trick for me.
Try with flexible instead of Expanded because. Official Documentation
Using a Flexible widget gives a child of a Row, Column, or Flex the flexibility to expand to fill the available space in the main axis (e.g., horizontally for a Row or vertically for a Column), but, unlike Expanded, Flexible does not require the child to fill the available space.
try to type the surname seperated like that jackson nn nn nnn nnn that will work better