I am a complete newbie in Flutter, but I already like it.
The question is:
why is the column not expanding to the full height?
code is on gist.github
Using CrossAxisAlignment.stretch works for me:
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text("Some title"),
Text("Address"),
Text("Description")
],
),
A Column widget is flexible - it will try to take up as much space as it needs but no more. If you want it to take up all availible space, then wrap it in an Expanded widget.
createChildren() {
return [
Image.network(
testImg,
height: imageSize,
width: imageSize,
),
Padding(padding: EdgeInsets.only(left: 16.0)),
Expanded(child:
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
boldText("Some title"),
Text("Address"),
Text("Description")
],
),
),
];
}
Wrapping the column with a row with MainAxisSize.max
Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Column(
children: <Widget>[
_someWidget(),
_someWidget(),
_someWidget(),
],
),
],
)
Don't use flex=1 inside Column, here you can see example
children: [
MyWidget(),
Expanded(
child: MyWidget(),
),
MyWidget(),
],
Based on your layout I assume that your Column is nested inside a Row. Wrap your Row with IntrinsicHeight and your Column will automatically expand its height to be the same as the Row's tallest child:
IntrinsicHeight(
child: Row(
children: [
Container(width: 40, height: 40, color: Colors.blue),
// tallest child
Container(width: 40, height: 60, color: Colors.blue),
// height will be 60
Column(
...
),
],
),
)
You can wrap the Column inside an infinite width SizedBox.
SizedBox(
width: double.infinity,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [ ... ]
)
)
The above code snippet will place the children at the center of the SizedBox. It'll work especially well if you want to use a Column as the body of your Scaffold. In that case children will show up at the center of the screen.
The code linked in the question is no longer available, so I can't give you a full working example for your case. However, one thing that will likely work is using mainAxisAlignment as follows:
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: [
Text("Some title"),
Text("Address"),
Text("Description")
],
),
(mainAxisSize: MainAxisSize.max is actually the default value, butthis only works if you do not set it to MainAxisSize.min, so I included it here.)
Setting mainAxisAlignment to MainAxisAlignment.spaceAround or MainAxisAlignment.spaceEvenly will also expand the column, but spacing between/around children will be handled differently. Try it out and see which you like best!
This will cause the column to take all the space it can - if it still doesn't expand then that is due to its parent widget, and we can no longer access the code so I can't speak to that.
Related
This is my cardview code:
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
TitleText(text: "Item name mmmmmmmmm $index"),
SizedBox(height: 20.0),
Body1Text(text: "Discount mmmmmmmm",color: Colors.red,),
SizedBox(height: 5.0),
SubHeadText(text: "Price ,mmmmmmmmmmmmmmmmmm",color: Colors.red,)
],
),
Just Wrap you - Card with -Flexible Widget.
Row(
children: <Widget>[
Flexible(
child: Card(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("Item name mmmasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaammmmmm"),
SizedBox(height: 15.0,),
Text(
"Discount mmmmmmmm",
),
SizedBox(height: 5.0,),
Text(
"Price ,mmmmmmmmmdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfmmmmmmmmm",
)
],
),
),
),
],
),
You can use Wrap instead of Column.
For ex..
new Wrap(
spacing: 5.0,
runSpacing: 5.0,
direction: Axis.vertical, // main axis (rows or columns)
children: <Widget>[
TitleText(text: "Item name mmmmmmmmm $index"),
Body1Text(text: "Discount mmmmmmmm",color: Colors.red,),
SubHeadText(text: "Price ,mmmmmmmmmmmmmmmmmm",color: Colors.red,)
],
)
Simply use
isExpanded: true,
on DropdownButton.
Example
DropdownButton(
isExpanded: true,
items: data.map((item) {
return new DropdownMenuItem(
child: Text(item['name']),
value: item['id'].toString(),
);
}).toList(),
onChanged: (newVal) {
setState(() {
_mySelection = newVal;
});
},
value: _mySelection,
),
isExpanded: true, inside DropdownButtonFormField
You can use SizedBox instead of columns.
SizedBox(
child:new Wrap(
spacing: 5.0,
runSpacing: 5.0,
direction: Axis.vertical, // main axis (rows or columns)
children: <Widget>[
TitleText(text: "Item name mmmmmmmmm $index"),
Body1Text(text: "Discount mmmmmmmm",color: Colors.red,),
SubHeadText(text: "Price ,mmmmmmmmmmmmmmmmmm",color: Colors.red,)
],
),
),
Try this, it works for me:
Flex(
direction: Axis.horizontal,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child:Text('')
),
],
),
looks like your using static padding and sizing. This can be a problem when it comes to rendering your project on other devices aside from this one. I'd strongly recommend using one of the following:
SingleChildScrollView under a LayoutBuilder.
Instead of a column, try using a container including a custom height and width
In case you decided to set custom padding, alternatively, you can use MediaQueryData.
I'd recommend using the first one for starters, I would be easier. The second method is for calculating the width and height of the screen and adjusting.
I think there are other useful answers too. I am sharing my experience on this issue for those who are new and are trying to find multiple ways to fix this issue.
In my case Text() was inside Column() and I fix this issue by setting textDirection property as below:
textDirection: TextDirection.ltr
You can set the value depending on your needs.
In this directory your_project/android/src/main there is AndroidManifest.xml file, delete it and the error will be solved.
I want to center a Text vertically in the bottom: Sektion of my AppBar.
Some things I allready tried are:
1. wrap the Text in a Center(...) Widget
2. wrap the Text in a Column(...) and use crossAxisAlignment: CrossAxisAlignment.center
The bottom: Sektion is a PreferredSizeWidget and does not provide anything to format a Widget.
appBar: new AppBar(
actions: <Widget>[
IconButton(
icon: Icon(Icons.settings),
onPressed: () {
print("Settings Icon");
},
),
],
bottom: PreferredSize(
preferredSize: Size(130.0, 130.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new Text(
'N/A',
),
],
),
),
),
I have have found this issue here: https://github.com/flutter/flutter/issues/16262 where the Text was centered but the reproduce code did not worked out for me.
The Text should me somewhere like the red line is (see Image)
Thank you!
PreferredSizeWidget does not impose a size constraint on its child, so you must wrap the Column in a widget with defined height in order to add alignment.
Also, mainAxisAlignment should be used, since this is the vertical alignment in a Column.
bottom: PreferredSize(
preferredSize: Size(130.0, 130.0),
child: Container(
height: 130,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'N/A',
),
],
),
),
)
I want to align two pieces of text differently, where each piece of text is in a different row but in the same column.
Here's a crudely illustrated structure for this widget
As you can see "info text" is next to "video duration", but I want it at the top, and I want to keep "video duration" at the bottom at all times.
I tried using alignment settings but I don't know why one doesn't seem to be working (I commented it in the code below)
class MiniVideoCell extends StatelessWidget {
final lesson;
MiniVideoCell(this.lesson);
#override
Widget build(BuildContext context) {
return new Column(
children: <Widget>[
new Container(
padding: new EdgeInsets.all(12.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
new Column(
children: <Widget>[
new Image.network(
lesson.imageUrl,
width: 150.0,
),
],
),
new Column(
crossAxisAlignment: CrossAxisAlignment.start, //meant to align elements to the left - seems to be working
children: <Widget>[
new Row(
mainAxisAlignment: MainAxisAlignment.start, //trying to bring this text up, not working
children: <Widget>[
new Text("info text"),
],
),
new Row(
children: <Widget>[
new Text("video duration"),
],
),
],
),
],
),
),
new Divider(),
],
);
}
}
You can try to set your mainAxisAlignment property of your Column widget to MainAxisAlignment.spaceBetween. This would put all available space between your Row widgets.
new Column(
crossAxisAlignment: CrossAxisAlignment.start, //meant to align elements to the left - seems to be working
mainAxisAlignment: MainAxisAlignment.spaceBetween, // Add this line
children: <Widget>[
new Row(
mainAxisAlignment: MainAxisAlignment.start, //trying to bring this text up, not working
children: <Widget>[
new Text("info text"),
],
),
new Row(
children: <Widget>[
new Text("video duration"),
],
),
],
)
And also we need to specify the height and width of our Container widget like this:
Container(
padding: EdgeInsets.all(12.0),
width: double.infinity, // Added width
height: 124.0, // Set your preferred height
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
...
Output would look like this:
Here is the partial code:
Column(
children: [
Container(
padding: EdgeInsets.all(12.0),
width: double.infinity, // Added this
height: 124.0, // Set your preferred height
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Column(
children:[
Container(
color: Colors.blue,
width: 150.0,
height: 100.0, // Assuming that the height of the thumbnail is 100 pixels
)
]
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween, // Place all available space between the children
children:[
Row(
mainAxisAlignment: MainAxisAlignment.start, //trying to bring this text up, not working
children: <Widget>[
new Text("info text"),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.start, //trying to bring this text up, not working
children: <Widget>[
new Text("video duration"),
],
),
]
)
]
),
),
Divider(),
Screenshot of the problem
I am trying to put elements in the red box by having even spaces between each other. (Like giving weight 1 to each of them). To do so, I put "mainAxisAlignment: MainAxisAlignment.spaceEvenly" in parent Column but it is not working.
Container(
margin: EdgeInsets.only(bottom: 8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
CachedNetworkImage(
imageUrl:
"https://image.tmdb.org/t/p/w500/${movieDetails
.posterPath}",
height: 120.0,
fit: BoxFit.fill),
Expanded(
child: Container(
margin: EdgeInsets.only(left: 8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, //NOT WORKING!
children: <Widget>[
generateRow(
Strings.released, movieDetails.releaseDate),
generateRow(Strings.runtime,
movieDetails.runtime.toString()),
generateRow(Strings.budget,
movieDetails.budget.toString())
],
)))
],
)),
This is the code for movie image and the red box. I have created a Row which has 2 elements. First one is that image, second one is for red box.
Row generateRow(String key, String value) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[Text(key), Text(value)],
); }
My generateRow method
How can i solve this problem?
As you have given the height to the image is 120.0, can you do the same for the other Container child. By giving this, I was able to achieve what you want.
Code snippet:
Container(
margin: EdgeInsets.only(bottom: 8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
CachedNetworkImage(
imageUrl:
"https://image.tmdb.org/t/p/w500/${movieDetails
.posterPath}",
height: 120.0,
fit: BoxFit.fill),
Expanded(
child: Container(
height: 120.0 //added to fix
margin: EdgeInsets.only(left: 8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, //NOT WORKING!
children: <Widget>[
generateRow(
Strings.released, movieDetails.releaseDate),
generateRow(Strings.runtime,
movieDetails.runtime.toString()),
generateRow(Strings.budget,
movieDetails.budget.toString())
],
)))
],
)),
Tips to debug:
I used Flutter Inspector to find the problem. Refer
Refer the image below. Even though we gave Expanded, it occupied just half the size of image. Here the size of Expanded is determined by child's size (which is almost half the image size).
try this :
new Container(
margin: EdgeInsets.only(bottom: 8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
CachedNetworkImage(
imageUrl:
"https://image.tmdb.org/t/p/w500/${movieDetails
.posterPath}",
height: 120.0,
fit: BoxFit.fill),
Expanded(
child: Container(
margin: EdgeInsets.only(left: 8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, //NOT WORKING!
children: <Widget>[
new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
new Text("Released : "),
new Text("25-07-2018 "),
],
),
new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
new Text("Released : "),
new Text("25-07-2018 "),
],
),
new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
new Text("Released : "),
new Text("25-07-2018 "),
],
),
],
)))
],
)),
Another way to achieve the result:
Expanded(
child: Center(
child: // your widget here,
),
)
This one should be the child of the Column, then it will work.
Try looking at this post:
Flutter Layout Row / Column - share width, expand height
Essentially, the image element in the Row makes the row expand in cross axis, but row's actual constraints are not modified. This is why Column's mainAxisAlignment: MainAxisAlignment.spaceEvenly is not working. It needs a parent constraint. And this is achieved with help of IntrinsicHeight. Wrapping Row widget with it will set row's constraints to the largest child's size (which is the image).
I have a Stack widget with some children. One of those children is an Align which has a Container child which has a Column child. This Column has some children. Now, in my Stack, the Column is way bigger than it should be (it fills the complete screen) although a third of that space would be enough. I'd like to know how I can use something like Flexible so I can use the fit property to tighten up the space. Is this possible?
Here is a representation of my code:
new Stack(
children: <Widget>[
new Container(...),
new Align( // This takes up way more space than needed!
alignment: new Alignment(1.0, 1.0) // This widget should be displayed at the bottom
child: new Container(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget> [
new Container(child: new Center(child: new Text("text"))),
new Row(children: [...]),
new Row(children: [...]),
new Row(children: [...]),
new Row(children: [...]),
]
)
)
)
]
)
I tried playing around with the fit property but without any luck.
By default, Column has mainAxisSize defaulting to MainAxisSize.max.
Which means that Column will take all the available height.
In your case, you don't want that. So you can set that value to MainAxisSize.min, which will do the opposite : fit it's children.
The end result is :
child: new Stack(
children: <Widget>[
new Container(...),
new Align(
alignment: Alignment.bottomCenter,
child: new Container(
color: Colors.purple,
child: new Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[new Text("foo"), new Text("hello world")],
),
),
)
],
),