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,
),
],
)
),
],
),
],
);
Related
Is there a way to achieve this layout with flutter? With one Column expanded, and the other Column shrink to fit the texts inside, within a Row.
I'm from a web background, I know I can do it with Flex-grow and Flex-shring along with whitespace:nowrap.
I would like to achieve this layout
But in flutter I tried:
This will give me two equal width columns:
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: [Text('Monthly Membership'), Text('Subscription')],
),
),
Flexible(
fit: FlexFit.tight,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: [
Text(
'+100',
maxLines: 1,
softWrap: false,
overflow: TextOverflow.fade,
),
Text(
'18 Sept 2021',
maxLines: 1,
softWrap: false,
overflow: TextOverflow.fade,
),
],
),
),
],
);
This will give an error.
RenderBox was not laid out: RenderFlex#3024f relayoutBoundary=up1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: [Text('Monthly Membership'), Text('Subscription')],
),
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: [
Text(
'+100',
maxLines: 1,
softWrap: false,
overflow: TextOverflow.fade,
),
Text(
'18 Sept 2021',
maxLines: 1,
softWrap: false,
overflow: TextOverflow.fade,
),
],
),
],
);
Your code-snippet just works fine, just missing alignment.
About your desire UI, you just need to set alignment.
Card(
color: Colors.grey,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: const [
Text('Monthly Membership'),
SizedBox(height: 10),
Text('Subscription'),
],
),
),
),
Flexible(
fit: FlexFit.tight,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisSize: MainAxisSize.min,
children: const [
Text(
'+100',
maxLines: 1,
softWrap: false,
overflow: TextOverflow.fade,
),
SizedBox(height: 10),
Text(
'18 Sept 2021',
maxLines: 1,
softWrap: false,
overflow: TextOverflow.fade,
),
],
),
),
),
],
),
),
Your second attempt fails because CrossAxisAlignment.stretch takes all of the horizontal space available, but a Row gives its children an unbounded width constraint. This forces the column to have infinite width, which is impossible. There are two options to fix this:
Use a different crossAxisAlignment
This will make each child of the Column take as much space as it's going to take. Based on your image, you probably want CrossAxisAlignment.center, which will center the column's children. The column will take its width from the larger of the two Text widgets.
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
// ...
Use IntrinsicWidth
IntrinsicWidth will measure the width that the Column wants to be, then give it that width. This will give the Column a tight width constraint in a second layout pass, which will make CrossAxisAlignment.stretch work as intended.
IntrinsicWidth(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
// ...
Both options will layout the second column with unbounded width, which means that if you have very long text, it might make the first column very small. If you want to bound the width of the column, you can add a ConstrainedBox to either solution.
I Have wrapped two expanded view inside a row but couldn't manage to
wrap. its going out of my screen layout.
as a new comer in flutter technology, i appreciate someones help.
Row(
mainAxisSize: MainAxisSize.max,
children: [
Expanded(
flex: 1,
child: Row(
mainAxisSize: MainAxisSize.max,
children: [
Image.asset('assets/images/checked.png',height: 24,width: 24,),
SizedBox(width: 5,),
Text('Gated Security',style: Constant.infoTextStyle,)
],
),
),
Expanded(
flex: 1,
child: Row(
children: [
Image.asset('assets/images/checked.png',height: 24,width: 24,),
SizedBox(width: 5,),
Column(
children: [
Text('Individual slips and along-side docking',style: Constant.infoTextStyle,textAlign: TextAlign.start,),
],
)
],
),
),
],
),
Add maxLines: null to your Text widget
Also Wrap your Column widget with Expanded
I'm trying to make a widget on the very bottom of the screen (above the bottomnavbar).
I added MainAxisAlignment.spaceBetween to the column, but it seems like the Column in the SingleChildScrollView is shrinking to fit. How can I make _BottomOne all the way on the bottom?
Column(children: [
_StayOnTopWidget(),
Expanded(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
_FirstOne(),
_BottomOne(),
],
),
),
)
]),
Expanded widget should be the parent of _BottomOne, which will take remaining space will align itself at the bottom
Column(children: [
_StayOnTopWidget(),
SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
_FirstOne(),
Expanded(
child:
_BottomOne(),
),
],
),
)
]),
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.
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