Layout is defined as follows:
var cardLayout = Flexible(
child: new Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
child: Row(children: <Widget>[
Text(categoryIcon,style: TextStyle(color: Colors.lightBlue, fontFamily: 'Fontawesome', fontWeight: FontWeight.normal)),
Text(" " + categoryName, maxLines: 3, style: TextStyle(color: Colors.lightBlue, fontWeight: FontWeight.normal)) //Overflow!!
]),
padding: EdgeInsets.only(bottom: 10.0,left: 10.0, top: 10.0),
),
Padding(
child: Text(title, maxLines: 3, overflow: TextOverflow.ellipsis, style: TextStyle(fontWeight: FontWeight.normal, fontSize: 16)),
padding: EdgeInsets.only(bottom: 10.0,left: 10.0, top: 10.0),
),
Padding(
child: new Text(address, style: TextStyle(fontStyle: FontStyle.normal)),
padding: EdgeInsets.only(bottom: 15.0,left: 10.0, top: 10.0),
),
Visibility(
child: Padding(
child: new Text("⬤ " + statusName, style: TextStyle(fontStyle: FontStyle.normal,color:HexColor(statusColor))),
padding: EdgeInsets.only(bottom: 15.0,left: 10.0, top: 10.0),
),
visible: type == ResponseMessageType.MESSAGE_TYPE_EVENT|| type == ResponseMessageType.MESSAGE_TYPE_MY_EVENT,
)
],
),
)
);
I don't understand why category label is not multiline. It overflows (I added comment in pasted code to show wchich label I mean). It seems problem is Row. How to keep Row, but make label multiline?
Simpy Wrap Text widget with - Flexible to make it Multi-line.
Flexible(
child: Text(" " + categoryName,
maxLines: 3,
style: TextStyle(
color: Colors.lightBlue,
fontWeight: FontWeight.normal)),
),
Related
I'm having an issue aligning a Row at the end of a card within a ListView.Builder. When I apply a
mainAxisAlignment: MainAxisAlignment.end it doesn't go to right side of the card like I want. The distance right it goes varies on how long the data before it is. What Am I doing wrong? Any advice is welcome! Thanks!
This is what it looks like. I want the dollar amounts to be all the way to the right.
Here is the code for the ListView.Builder
return ListView.builder(
itemCount: transaction.length,
shrinkWrap: true,
itemBuilder: (context, index) {
return Padding(
padding: EdgeInsets.symmetric(vertical: 1.0, horizontal: 4.0),
child: Card(
color: (index % 2 == 0) ? greycolor : Colors.white,
child: Container(
height: 60,
child: Row(
children: <Widget>[
Expanded(
flex: 1,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
margin: EdgeInsets.only(left: 5, top: 13),
child: AutoSizeText(transaction[index].date,
maxLines: 1,
style: TextStyle(
fontSize: 14, color: Colors.black),
textAlign: TextAlign.left),
),
],
),),
Flexible(
flex: 3,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.only(top: 13, left: 10),
child: AutoSizeText(transaction[index].tester,
maxLines: 1,
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontFamily: 'Montserrat'),)
),
Padding(
padding: EdgeInsets.only(left: 10),
child:
AutoSizeText(
'${transaction[index].test}',
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Colors.black,
fontStyle: FontStyle.italic),
),
),
],
),),
Flexible(
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Padding(
padding:
EdgeInsets.only(top: 13),
child: Container(
child: Text(
'\$${transaction[index].amount}',
style: TextStyle(
fontSize: 16,
color: Colors.black),
textAlign: TextAlign.right),
),
),
],
),)
],
)),
),
);
},
);
just replace Flexible with Expanded
Flexible takes only the needed space, and Expanded takes all available space
see this To clarify more
I hope this is helpful
I am trying to implement simple one-two line text.
Text will have a starting text then icon and ending text.Due to different styles i am using row with text,icon and text widgets.
I am getting A RenderFlex overflowed by 16 pixels on the right. error.
i enclose the row in flexible and expanded but still not working. i just want the text to drop at the end of line to next line.
Container(
padding: EdgeInsets.only(
left: 20,
right: 20,
),
width: mdq.size.width,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'Tap ',
style: TextStyle(
fontSize: 17,
),
),
Icon(Icons.add),
Text(
'on the right hand corner to start a new chat.',
style: TextStyle(
fontSize: 17,
),
),
],
),
),
Container(
margin: EdgeInsets.symmetric(
vertical: 15,
),
child: Text(
'You can communicate with the user who have installed Just Meetups and Deals app',
style: TextStyle(
color: Colors.grey,
fontSize: 16,
),
),
),
Container(
margin: EdgeInsets.symmetric(
vertical: 15,
),
child: InkWell(
onTap: () {},
child: Text(
'Start communicating',
textAlign: TextAlign.left,
style: TextStyle(
color: Colors.blue,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
),
),
],
),
);
Use the Expanded widget
Container(
padding: EdgeInsets.only(
left: 20,
right: 20,
),
width: MediaQuery.of(context).size.width,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'Tap ',
style: TextStyle(
fontSize: 17,
),
),
Icon(Icons.add),
Expanded(
child: Text(
'on the right hand corner to start a new chat.',
style: TextStyle(
fontSize: 17,
),
),
)
],
),
Container(
margin: EdgeInsets.symmetric(
vertical: 15,
),
child: Text(
'You can communicate with the user who have installed Just Meetups and Deals app',
style: TextStyle(
color: Colors.grey,
fontSize: 16,
),
),
),
Container(
margin: EdgeInsets.symmetric(
vertical: 15,
),
child: InkWell(
onTap: () {},
child: Text(
'Start communicating',
textAlign: TextAlign.left,
style: TextStyle(
color: Colors.blue,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
),
),
],
),
),
Here's a codepen of it working
You need not use any flex like [Expanded, Flexible, etc] for rows in the column because rows default takes max-width available by column
You are getting an error because your row child width is more than available screen size
you can use Expanded for the children of large width of rows in Expanded to wrap the child in available width inside a row.
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 have a list of object. There is a name that can be long and according to design it should end with three dots if it can't fit
Container(
height: 72,
constraints: BoxConstraints(minWidth: double.infinity),
child: Row(
children: <Widget>[
Container(
margin: const EdgeInsets.only(left: 16.0, right: 16.0),
child: CircleAvatar(
radius: 20.0,
backgroundImage: NetworkImage(_model._organizerLogo),
backgroundColor: Colors.transparent,
),
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: EdgeInsets.only(right: 8.0),
child: Text(
_model._eventName,
style: TextStyle(
fontSize: 15,
color: Colors.black,
fontWeight: FontWeight.w500),
textAlign: TextAlign.start,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
...
])
],
),
)
Wrapping Container in Flexible or Expandable didn't work.
How to make oversized text ellipsis? Thanks!
Add Expanded to your Column to give it a fixed width based on the remaining space.
Container(
height: 72,
constraints: BoxConstraints(minWidth: double.infinity),
child: Row(
children: <Widget>[
Container(
margin: const EdgeInsets.only(left: 16.0, right: 16.0),
child: CircleAvatar(
radius: 20.0,
backgroundImage: NetworkImage(_model._organizerLogo),
backgroundColor: Colors.transparent,
),
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: EdgeInsets.only(right: 8.0),
child: Text(
_model._eventName,
style: TextStyle(
fontSize: 15,
color: Colors.black,
fontWeight: FontWeight.w500),
textAlign: TextAlign.start,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
...
])
),
],
),
)
Here is the working solution:
Container(
height: 72,
constraints: BoxConstraints(minWidth: double.infinity),
child: Row(
children: <Widget>[
Container(
margin: const EdgeInsets.only(left: 16.0, right: 16.0),
child: CircleAvatar(
radius: 20.0,
backgroundImage: NetworkImage(poolImageUrl),
backgroundColor: Colors.transparent,
),
),
Expanded(
child: Container(
padding: EdgeInsets.only(right: 8.0),
child: Text(
"This will not overflow now, because we have put it in Expanded, you can try any long string here for test",
style: TextStyle(fontSize: 15, color: Colors.black, fontWeight: FontWeight.w500),
textAlign: TextAlign.start,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
),
],
),
),
As the picture shows:
There is a solid line between the two Text(Pokémon, 11.25 AM). What I want is the length of the line equaling to the longest Text length. But the line behaved like match_parent.
In Android Native we can use a vertical LinearLayout, and set android:layout_width="wrap_content" limit in horizontal.
In Flutter we can only set Column mainAxisSize: MainAxisSize.min limit in vertical.
I guess the problem is due to Divider. When Divider is gone, the Column's width is wrap_content.
Experiment is as follows:
Container(
color: Colors.red,
margin: EdgeInsets.symmetric(horizontal: 8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
margin: EdgeInsets.symmetric(vertical: 8.0),
padding: EdgeInsets.all(4.0),
child: Text(
'Pokémon',
style: TextStyle(
color: Colors.white,
fontSize: 18.0,
fontWeight: FontWeight.bold),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
Divider(
height: 2.0,
color: Colors.white,
),
Container(
margin: EdgeInsets.only(top: 8.0),
child: Text(
'11.25 AM',
style: TextStyle(
color: Colors.white,
fontSize: 12.0,
fontWeight: FontWeight.bold),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
],
),
),
You can use - IntrinsicWidth widget. Wrap Column with it.
Container(
color: Colors.red,
margin: EdgeInsets.symmetric(horizontal: 8.0),
child: IntrinsicWidth(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.symmetric(vertical: 8.0),
padding: EdgeInsets.all(4.0),
child: Text(
'Pokémon',
style: TextStyle(
color: Colors.white,
fontSize: 18.0,
fontWeight: FontWeight.bold),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
Divider(
height: 2.0,
color: Colors.white,
),
Container(
margin: EdgeInsets.only(top: 8.0),
child: Text(
'11.25 AM',
style: TextStyle(
color: Colors.white,
fontSize: 12.0,
fontWeight: FontWeight.bold),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
],
),
),
),