I have a Row inside that 4 other Rows and inside of the rows one icon and text.
but when the text increases. I got the overflow problem.
I tried FittedBox and Flexible with fit property equal to FlexFit.loose not worked.
this is my code
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(Icons.star, color: Color(0xFFf0b649)),
Text(
"4.2",
style: TextStyle(fontSize: 20),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(Icons.remove_red_eye),
Text(
"145",
style: TextStyle(fontSize: 20),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(Icons.people),
Text(
"14766768675",
style: TextStyle(fontSize: 20),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(Icons.favorite_border),
Text(
"دنبال کردن",
style: TextStyle(fontSize: 15),
)
],
),
]),
I had the same problem.
Try wrapping the text widget with a column.
If that doesn't work check this discussion enter link description here.
I am quite sure that you find your answer there if the column wrap doesn't help. GL :)
try Wrap() widget
A Wrap lays out each child and attempts to place the child adjacent to the previous child in the main axis, given by direction, leaving spacing space in between. If there is not enough space to fit the child, Wrap creates a new run adjacent to the existing children in the cross axis.
Related
I can't get this to layout properly.
I'm trying to achieve
This is what I tried so far that gets me the closest to it but isn't exactly right.
Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
Flexible(
child: Row(children: [
PrefixIcon(),
Flexible(
child: DefaultTextStyle(
overflow: TextOverflow.ellipsis,
child: TextGoesHere(),
),
),
SuffixIcon(),
]),
),
TrailingIcon(),
]),
But Flexible with FlexFit.loose acts like Expanded so the SuffixIcon gets pushed to the end even though TextGoesHere is a short text.
I got so far
Please help.
If you consider ..from TextOverflow.ellipsis, this I've got so far with row.
color container just for visual
Widget
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("Prefix"),
Expanded(
child: Container(
color: Colors.deepOrange,
child: Row(
children: [
Flexible(
child: Text(
"Very LongggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggText",
maxLines: 1,
),
),
Icon(
Icons.tag_sharp,
)
],
),
),
),
Text("TrailingIcon"),
],
),
Else, we can use LayoutBuilder if we know the prefix and Icons size.
I have a ConstrainedBox which has a listView and its children has the following widget:
(I need all the column and rows. removed everything that wasn't necessary to reproduce the issue.)
return Column(
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'this is some longggggggggggggggggggggggg texttttttttt that gets overflown',
style: textStyle,
overflow: TextOverflow.ellipsis,
maxLines: 5,
),
],
)
],
),
],
);
The issue is, the text doesn't go to the next line. I tried adding Expand widget to the text widget, to the column widget and row widget, and when i do that it gives me an error.
You need to wrap the whole inner Column in an Expanded widget. You need to constrain the Text widget horizontally. Using Expanded in a Column will constrain it vertically, while constraining using it in a Row will constrain it horizontally and tell Text where to wrap.
return Column(
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'this is some longggggggggggggggggggggggg texttttttttt that gets overflown',
style: textStyle,
overflow: TextOverflow.ellipsis,
maxLines: 5,
),
],
)
),
],
),
],
);
I'm having trouble aligning widgets. I have seen questions on here asking about similar things, however, none of them seem to work for my specific task. I'm trying to create a widget containing an icon and two text widgets. The icon is supposed to be centered over the first text widget, and the other text widget is supposed to be aligned with the baseline of the first.
The way I have gone about doing this is to place the icon and the first text widget in a column, and then place that column in a row together with the second text widget. I'm using crossAxisAlignment: CrossAxisAlignment.baseline and textBaseline: TextBaseline.ideographic in the row widget but for some reason the second text aligns with the icon. It looks like this:
If I instead use crossAxisAlignment: CrossAxisAlignment.end the text widgets do not align properly:
I have tried to put the text widgets in a row and place them in a column together with the icon, but then the icon is no longer centered over the first text widget:
Here's the code used for the first image, the other images are just rearrangements of the same code.
return Row(
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.ideographic,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(
widget.icon,
color: color_text_highlight,
size: 20,
),
Text(
widget.data,
style: TextStyle(
fontSize: 28,
fontFamily: 'Quicksand',
color: color_text_highlight,
),
),
],
),
SizedBox(width: 5),
Text(
widget.label,
style: TextStyle(
fontSize: 12,
fontFamily: 'Roboto',
color: color_text_dark,
)
),
],
);
Any help is appreciated!
Column defines its own baseline as a baseline of its first child*. That's why the label at right gets aligned to the bottom of icon:
A simple fix is to make "17:59" the first child of the Column (the icon will go below now) and then use VerticalDirection.up to swap them back:
Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
children: [
Column(
mainAxisSize: MainAxisSize.min,
verticalDirection: VerticalDirection.up, // <-- reverse direction
children: [
Text('17:59', style: TextStyle(fontSize: 32)), // <-- first child
Icon(Icons.timer),
],
),
Text('mm:ss'),
],
)
* actually, of first child that has a baseline itself, anyway Icon does have it
There may be a solution like this, but the solution may cause problems because it depends on the font size. You will need to change the padding value accordingly.
Column(
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Column(
children: [
Icon(
Icons.timer,
color: Colors.lightGreen,
size: 20,
),
Text(
"17:59",
style: TextStyle(
fontSize: 28,
fontFamily: 'Quicksand',
color: Colors.lightGreen,
),
),
],
),
SizedBox(width: 5),
Padding(
padding: EdgeInsets.only(bottom: 4),
child: Text("mm:ss",
style: TextStyle(
fontSize: 12,
fontFamily: 'Roboto',
color: Colors.white70,
)),
),
],
),
],
)
Google Nexus 9 Tablet
Google Pixel 3a XL
Google Pixel 2
Row allows for a crossAxisAlignment of baseline, set the text baseline too or it will throw an error
Row(
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
Im trying to wrap some content in flutter without success.
I found i can't Wrap Rows like i do with Chips or Text widgets.
Anybody knows why?
These are three sets of Rows , each one with an Icon and a Text, that sits side by side. But in smaller screens it overflows, because there is not enough space (width).
I'd like that the last set of rows (one icon and a label) jumps to next line when the space in current line is over.
Thank you
I have tried to Wrap the Rows with Container, but didn't work.
Row(
children: <Widget>[
Wrap(
children: <Widget>[
Row(
children: <Widget>[
Text('long text 1'),
Text('an icon here'),
],
),
Row(
children: <Widget>[
Text('Anoter Label'),
Text('Anoter icon'),
],
),
// I want this row to jump to next line when there is not space in
// current line
Row(
children: <Widget>[
Text('More Text'),
Text('Moire icon'),
],
),
],
)
],
),
Flutter layout ok large screen
Overflow on smaller screens
When i'm on smaller screens, the image with caption resizes and fits well. But the labels and icons above the image overflow. So id like that the last set of icon/ label the one with $ simbol e price, jumps to a new row. I can wrap when using only text widgets and it works, but then i loose the alignment i have on rows like mainAxisAlignment: MainAxisAlignment.spaceAround
Updated: this is somehow a solution
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Expanded(
child: Wrap(
children: <Widget>[
Icon(Icons.alarm),
Text('60 Minutes'),
],
),
),
Expanded(
child: Wrap(
children: <Widget>[
Icon(Icons.shop),
Text('Lorem ipsumssssssssssssssssssssssssssssssss'),
],
),
),
Expanded(
child: Wrap(
children: <Widget>[
Icon(Icons.attach_money),
Text('Very expensive'),
],
),
)
],
);
...
You can do this
Row(
children: <Widget>[
Expanded(
child: Wrap(
children: <Widget>[
Text('long text 1'),
Text('an icon here'),
Text('Anoter Label'),
Text('Anoter icon'),
// I want this row to jump to next line when there is not space in
// current line
Text('More Text'),
Text('Moire icon'),
],
),
)
],
),
or this
Row(
children: <Widget>[
Expanded(
child: Wrap(
children: <Widget>[
Row(
children: <Widget>[
Text('long text 1'),
Text('an icon here'),
],
),
Row(
children: <Widget>[
Text('Anoter Label'),
Text('Anoter icon'),
],
),
// I want this row to jump to next line when there is not space in
// current line
Row(
children: <Widget>[
Text('More Text'),
Text('Moire icon'),
],
),
],
),
)
],
),
The width of the Row is determined by the mainAxisSize property. If
the mainAxisSize property is MainAxisSize.max, then the width of the
Row is the max width of the incoming constraints. If the mainAxisSize
property is MainAxisSize.min, then the width of the Row is the sum
of widths of the children subject to the incoming constraints.
To resolve your problem just set the mainAxisSize property to MainAxisSize.min on your Row Widget
In my layout I have two Widgets in a row, one text and the an icon.
As shown below, assume that * refers to the icon, and using "-" to represent the row:
----------------------------
Text *
----------------------------
How do I make my text centered in the entire row, and the icon to the right end ?
The main thing you need to notice is that if you don't want to use Stack you should provide same width-consuming widgets both on left and right.
I would do this with either Expanded and Padding
Row(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 32.0),
child: Text(
"Text",
textAlign: TextAlign.center,
),
),
),
Icon(Icons.add, size: 32.0,)
],
)
or with Row's mainAxisAlignment and a SizedBox
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
const SizedBox(width: 32.0),
Text("Text"),
Icon(Icons.add, size: 32.0)
],
)
or with Expanded and a SizedBox on the left instead of the padding :). The padding or extra container on the left is so that the textAlign will truly center the text in the row taking into account the space taken up by the Icon.
Simply use Expanded and Spacer widgets on left/right side and put your widget inside the Expanded:
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Spacer(),
Text('Text'),
Expanded(
child: Text('*'),
),
),
],
),
Result:
1. Using Row (not very flexible though)
Row(
children: <Widget>[
Expanded(child: Center(child: Text('Center'))),
Text("#"),
],
)
2. Using Stack (flexible)
IntrinsicHeight(
child: Stack(
children: [
Align(child: Text('Center')),
Positioned(right: 0, child: Text('#')),
],
),
)
I found it necessary to use a Stack to get Text to be truly centered:
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Stack(
alignment: Alignment.center,
children: [
Align(
alignment: Alignment.center,
child: Text('Text'),
),
Align(
alignment: Alignment.centerRight,
child: Text('*'),
)
],
),
],
);
For flexibility reasons I recommend to use Expanded widgets:
Row(
children: [
Expanded(flex: 1, child: Container()),
Expanded(
flex: 8,
child: Text('Your Text',
textAlign: TextAlign.center,
),
),
Expanded(flex: 1, child: IconButton(...))
],
)
For my case, I solved my centering problem by adjusting the flex property of the Spacer widget -
Row(children: [
Spacer(flex: 3),//3 was for my case, It might be changed for your widgets
Text('Center'),
Spacer(flex: 1),//1 was also for my case, It might be changed on for your widgets
Text("*")]);
Add another icon in the start and set the opacity to zero.
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
CloseButton(
onPressed: () => Navigator.of(context).pop(),
),
Text('text',),
Opacity(
opacity: 0,
child: Icon(Icons.close),
),
],
)
This worked for me without Stack. But it is the other way around. "Text" goes to left "*" goes to center:
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Text("text",
style: Theme.of(context).textTheme.caption),
),
Text("*"),
Spacer(),
],
)