Why does MainAxisAlignment of a Column have different outputs in flutter? - flutter

Question

I used mainAxisAlignment: MainAxisAlignment.end, in my "Column" to place some content on the bottom of the screen. This works fine.
I needed to add a picture, this picture was also shown at the bottom of the screen, align and positioned didn't change it. So I put the Column as a child in another column, this allows me, to put the picture in a row, and place it in the right top corner. But now the content of the original column is centered in the screen. What should I do?
Should look like this:
Here my code:
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/Images/backgroundhomescreen.png'),
fit: BoxFit.cover,
),
),
child:Column(
children: [
Row( //Logo
children: [
Image(
image: AssetImage('assets/Images/logo.png'),
width: 120,
),
]
),
Column(
//crossAxisAlignment: CrossAxisAlignment.center,
// mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[...

Answer 1

You can either set the crossAxisAlignment to CrossAxisAlignment.end to align all the children to the right or wrap the TopBox widget in Align.
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container( //Outer Container
height: 900,
width: 400,
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
// Align(
// alignment: Alignment.centerRight,
// child: TopBox()
// ,),
TopBox(),
Spacer(),
BottomBox(),
],
),
);
}
}
class BottomBox extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
color: Colors.blue,
height: 200,
);
}
}
class TopBox extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.all(15),
color: Colors.blue,
height: 100,
width: 175,
);
}
}

Answer 2

You could simply achieve custom spacing in flutter using the spacer widget