Positioning children widgets at the center and at the end of a Column parent widget - flutter

Question

I have to position 2 children widgets inside a Column parent widget. I want one of them to be positioned in the center and the other at the end of the column. What is the best way to do that?
import 'package:flutter/material.dart';
class Screen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Screen'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center, // this is wrong, it positions both the widgets in the center
children: <Widget>[
Text('This text should be at the center of the column'),
Text('This text should be at the end of the column'),
],
),
);
}
}

Answer 1

you can use the Spacer widget like this:
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Spacer(),
Text('This text should be at the center of the column'),
Spacer(),
Text('This text should be at the end of the column'),
],
),
);

Answer 2

(EDIT: I changed the code and added grey to mine in order to show a comparison, so you can see what I mean when I say it will be offset by half. You have to increase the font size to see the difference.)
It's not quite as easy as the other answers because the first text has to be centered and if you only use two elements in your Column then no matter what you do it's either going to make the top item be off-center by half the height of the bottom text (as in using only two Expandeds) or the design will be rigid and therefore may not display correctly on different sized devices.
So, the trick is to use three Flexibles (2 Expandeds and a Spacer). Put the Spacer on top. It and the bottom Expanded must have the same flex value in order to center the middle Expanded.
Only then will using "alignment: Alignment.center" give the needed result for the top text.
import 'package:flutter/material.dart';
class CenteringOneItemWithAnotherItemInTheColumn extends StatelessWidget {
const CenteringOneItemWithAnotherItemInTheColumn({
Key key,
}) : super(
key: key,
);
/// Adjust these values as needed
final int sameFlexValueTopAndBottom = 40; // 40%
final int middleFlexValue = 20; // 20%
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Column Alignment Question'),
),
body: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Spacer(),
const Text(
'Cent',
style: TextStyle(
fontSize: 64,
),
),
const Spacer(),
const Text(
'Bot',
style: TextStyle(
fontSize: 64,
),
),
],
),
Column(
children: <Widget>[
/// The key is to have the Spacer and the bottom Expanded
/// use the same value for flex. That will cause the middle
/// child of the Column to be centered vertically.
Expanded(
flex: sameFlexValueTopAndBottom,
child: Container(
width: 100,
color: Colors.grey[300],
),
),
Expanded(
flex: middleFlexValue,
child: const Align(
alignment: Alignment.center,
child: Text(
'Cent',
style: TextStyle(
fontSize: 64,
),
),
),
),
Expanded(
flex: sameFlexValueTopAndBottom,
child: Container(
color: Colors.grey[300],
child: const Align(
alignment: Alignment.bottomCenter,
child: Text(
'Bot',
style: TextStyle(
fontSize: 64,
),
),
),
),
),
],
),
],
),
);
}
}

Answer 3

Another way is to use an empty SizedBox at the start and the mainAxisAlignment: MainAxisAlignment.spaceBetween,
class Screen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Screen'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
SizedBox(
height: 0.0,
width: 0.0,
),
Text('This text should be at the center of the column'),
Text('This text should be at the end of the column'),
],
),
);
}
}

Answer 4

One of the way could be using Expanded widget along with alignment as for the need
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Screen'),
),
body: Column(
// mainAxisAlignment: MainAxisAlignment.center, // this is wrong, it positions both the widgets in the center
children: <Widget>[
Expanded(child: Container(alignment:Alignment.bottomLeft,child: Text('This text should be at the center of the column'))),
Expanded(child: Container(alignment: Alignment.bottomLeft, child: Text('This text should be at the end of the column'))),
],
),
);
}