Flutter - Space Evenly in Column does not work as expected
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 "),
],
),
],
)))
],
)),
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 ofExpanded
is determined by child's size (which is almost half the image size).