I am getting Error when try to run below script. I am using Expanded widget for showing user followers.
Expanded(
flex: 1,
child: Column(
children: <Widget>[
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
buildCountColumn("posts", postCount),
buildCountColumn("followers", followerCount),
buildCountColumn("following", followingCount),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
buildProfileButton(),
],
),
],
),
),
Remove the Expanded parentWidget and get an Expanded Widget for every Widget
Column(
children: <Widget>[
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Expanded(
child: Container(
color: Colors.blue,
child: Text("Hello"),
),
),
Expanded(
child: Container(
color: Colors.red,
child: Text("Hello"),
),
),
Expanded(
child: Container(
color: Colors.yellow,
child: Text("Hello"),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
child: Container(
color: Colors.green,
child: Text("Hello"),
),
),
],
),
],
),
your **buildProfileButton() or row ** is creating more size widgets then the space available in screen;
Two solutions:
you can put your row in listview to make it scrollable
put each one in Expanded like:
Expanded(
child:buildCountColumn("posts", postCount),
)
to take limited available size in screen -> divided equally within all childs
:: always use expanded/listview/scrollable/widget size less than total screen width
you can get it by mediaQuery.of(context).size.width for flexible row
Related
How to make a rectangles in this order at flutter ?
Look here
Column(
children: [
Expanded(
child: Container(
color: Colors.blue,
),
),
Expanded(
child: Row(
children: [
Expanded(
child: Container(
color: Colors.green,
),
),
Expanded(
child: Container(
color: Colors.red,
),
),
],
),
),
Expanded(
child: Row(
children: [
Expanded(
child: Container(
color: Colors.yellow,
),
),
Expanded(
child: Container(
color: Colors.purple,
),
),
],
),
),
],
);
The correct approach is to wrap a container and two rows in a column.
Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Container(
color: Colors.blue,
),
),
Expanded(
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Container(
color: Colors.red
),
),
Expanded(
child: Container(
color: Colors.green
),
),
],
),
),
Expanded(
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Container(
color: Colors.yellow
),
),
Expanded(
child: Container(
color: Colors.orange
),
),
],
),
),
],
)
It can be something like this:
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Text('Top Rectangle'),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(child: Text('Row 1 - Col 1'),),
Expanded(child: Text('Row 1 - Col 2'),),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(child: Text('Row 2 - Col 1'),),
Expanded(child: Text('Row 2 - Col 2'),),
],
)
],
),
Or this:
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Text('Top Rectangle'),
),
Container(
height: 400,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(
child: Text('Row 1 - Col 1'),
),
Expanded(
child: Text('Row 1 - Col 2'),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(
child: Text('Row 2 - Col 1'),
),
Expanded(
child: Text('Row 2 - Col 2'),
),
],
)
],
),
),
],
),
It's not a good idea to have a bunch of Expanded widgets in a parent widget, you should have Containers or similar widgets and give them fixed or dynamically calculated heights, then you can have an Expanded which gets all remaining space
I am trying to make a screen like this:
For this I'm using ListView with custom item.
Here is my code of item:
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(10),
child: Card(
elevation: 5,
color: Colors.greenAccent,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(6)),
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
width: 65,
height: 65,
child: ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Image.asset(
"assets/images/temp.png",
alignment: Alignment.center,
)),
),
const SizedBox(width: 18),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text(
"Test title",
textAlign: TextAlign.left,
style: TextStyle(
color: Colors.red,
fontSize: 17,
fontWeight: FontWeight.w500),
),
Text(
"TestDescription",
style: TextStyle(
color: Colors.deepOrangeAccent,
fontSize: 15,
fontWeight: FontWeight.w700),
),
],
),
Spacer(),
CustomButton(
onPressed: () {},
)
],
),
),
],
),
],
),
),
));
}
I need align title and description to top, and custom bottom at the bottom. For this I'm using Spacer() inside Column and I wrapped my Column with Expanded widget. But when I wrap my widget with Expanded I get error like this:
RenderFlex children have non-zero flex but incoming height constraints
are unbounded.
When a column is in a parent that does not provide a finite height
constraint, for example if it is in a vertical scrollable, it will try
to shrink-wrap its children along the vertical axis. Setting a flex on
a child (e.g. using Expanded) indicates that the child is to expand to
fill the remaining space in the vertical direction. These two
directives are mutually exclusive. If a parent is to shrink-wrap its
child, the child cannot simultaneously expand to fit its parent.
Consider setting mainAxisSize to MainAxisSize.min and using
FlexFit.loose fits for the flexible children (using Flexible rather
than Expanded). This will allow the flexible children to size
themselves to less than the infinite remaining space they would
otherwise be forced to take, and then will cause the RenderFlex to
shrink-wrap the children rather than expanding to fit the maximum
constraints provided by the parent.
When I remove Expanded() and Spacer() the error no. But I get wrong view. See at the picture:
Please, help me what I'm doing wrong(
You can use IntrinsicHeight as parent of Row to get the desire result with crossAxisAlignment: CrossAxisAlignment.stretch,, then for Rows's children can wrap with Flexible or Exapnded widget.
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(10),
child: Card(
elevation: 5,
color: Colors.greenAccent,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(6)),
child: Padding(
padding: const EdgeInsets.all(12.0),
child: IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(
// or exapnded
// fit: FlexFit.tight,
flex: 1,
child: Container(
height: 65,
width: 64,
color: Colors.amber,
child: Text("Image"),
),
),
Flexible(
flex: 1,
fit: FlexFit.tight,
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text("Item 1"),
Text("Item 2"),
],
),
Text("Item b x"),
],
),
),
Flexible(
flex: 1,
// fit: FlexFit.tight,
child: Container(
color: Colors.cyanAccent,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: const [
Text("lT"),
Text("lBsssssssssssss"),
],
),
),
),
],
),
),
),
),
);
}
The length of the texts on right is not fixed. I want to make the height of the line on left same as the texts area height.
Is there a way to align a widget to another widget like Android's RelativeLayout or ConstraintLayout in Flutter?
my code:
Container(
padding: EdgeInsets.fromLTRB(100, 0, 100, 0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
color: Color(0xFFEEEEEE),
width: 4,
height: 80,
margin: EdgeInsets.only(right: 10),
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
_content,
style: Theme.of(context).textTheme.headline4,
),
],
),
)
],
),
);
Wrap your row into IntrinsicHeight and get rid of the height property
IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
color: Color(0xFFEEEEEE),
width: 4,
margin: EdgeInsets.only(right: 10),
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'a loong loong text with a lot of letters and characters',
style: Theme.of(context).textTheme.headline4,
),
],
),
)
],
),
),
Goal: Achieving Auto-size widgets based on the parent widget's constraints
Use Case: Placing two buttons on the same Row but being adaptive to multiple screen sizes (Responsive)
Problem: I have two buttons (each of them wrapped inside a column widget) that is wrapped inside a Row widget.
To sum: (Parent->child): Row > [Column - Column]
As shown in the screenshot below.
Tried-solutions: I tried placing the widgets inside of an Expanded widget, that is placed inside of a Flex Widget
Padding > Flex > Expanded > Row > [Widgets]
The code is as follows:
Padding( //Main Padding
padding: EdgeInsets.only(top: 14, bottom: 14),
child: Flex(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.max,
direction: Axis.horizontal,
children: <Widget>[
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
ChipButton(text: 'Main Size', withIcon: false),
ChipButton(text: 'Others', withIcon: false),
],
),
),
],
),
),
Padding(
padding: EdgeInsets.only(top: 14, bottom: 14),
child: Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
ChipButton(text: 'trademark', withIcon: false),
],
),
),
),
Padding(
padding: EdgeInsets.only(top: 14, bottom: 14),
child: Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
ChipButton(text: 'Price', withIcon: false),
ChipButton(text: 'Color', withIcon: false),
],
),
),
),
Try modifying the code below to your app:
Padding(
padding: EdgeInsets.only(top: 14, bottom: 14),
child: Column(children: <Widget>[
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Expanded(
child:
Container(color: Colors.amberAccent, child: Text("A"))),
Expanded(
child:
Container(color: Colors.blueAccent, child: Text("B"))),
]),
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Expanded(
child: Container(color: Colors.grey, child: Text("C")),
),
]),
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Expanded(
child:
Container(color: Colors.redAccent, child: Text("D"))),
Expanded(
child: Container(
color: Colors.orangeAccent, child: Text("E"))),
]),
]),
),
It produces something like this:
You can also view the DartPad code I worked on here, in case you want to check if it works on different widths :D
P.S. I really like the way you've asked your question.
This is my code and here I just want to know how to add text below the images.
Just let me know, please?
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(
child: Image.asset('assets/cat.jpg',
),
),
Expanded(
child: Image.asset('assets/cat.jpg'),
),
Expanded(
child: Image.asset('assets/cat.jpg'),
),
],
),
Card(
elevation: 5,
child: Column(
children: <Widget>[
Expanded(
child: Image.asset('assets/img.jpg'),
),
Text('My Image'),
],
),
),
You can put this code row or as you want. You can also put some padding to arrange the text image. If you want constant height and weight put this into a Container Widget and specify the height and weight. Thanks.
child: Column(children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(
child: Column(
children: <Widget>[
Image.asset(
'assets/cat.jpg',
),
Text('cat')
],
),
),
Expanded(
child: Column(
children: <Widget>[
Image.asset('assets/cat.jpg'),
Text('cat')
],
),
),
Expanded(
child: Column(
children: <Widget>[
Image.asset('assets/cat.jpg'),
Text('cat')
],
),
),
],
)
]);
},
)
If you want to add a line of text below the images at once
Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(
child: Image.asset('assets/cat.jpg',
),
),
Expanded(
child: Image.asset('assets/cat.jpg'),
),
Expanded(
child: Image.asset('assets/cat.jpg'),
),
],
),
Text("Your text here"),
]), // column widget ends here
If you want to add text below each image then
change your Expanded widget with this.
Expanded(
child: Column(
children : <Widget>[
Image.asset('assets/cat.jpg'),
Text("your text here")
]
)
),
else create a function to return a widget as it seems you have plenty of widgets of that kind
Widget getWidget(imagePath, text){
return Expanded(
child: Column(
children : <Widget>[
Image.asset(imagePath),
Text(text)
]
)
)
}
and then use this
Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
getWidget('assets/cat.jpg','your text here'),
getWidget('assets/cat.jpg','your text here'),
getWidget('assets/cat.jpg','your text here'),
],
),
]),
You just need to wrap the image in a Column/Stack
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(
child: Column(children: <Widget>[
Image.asset('assets/cat.jpg'),
Text('Some text')
],)
),
Expanded(
child: Column(children: <Widget>[
Image.asset('assets/cat.jpg'),
Text('Some text')
],)
),
Expanded(
child: Column(children: <Widget>[
Image.asset('assets/cat.jpg'),
Text('Some text')
],)
),
],
),