Text not centered using crossaxisalignment - layout

Question

I am using crossAxisAlignment: CrossAxisAlignment.center, but somehow the text 'Logo' is just not centered. Really not too sure what is causing it and am I missing something here.
class LoginPage extends StatefulWidget {
#override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: false,
appBar: AppBar(
title: Text('Login'),
),
body: GestureDetector(
child: Container(
padding: EdgeInsets.only(
top: 100.0, right: 20.0, left: 20.0, bottom: 20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(
'Logo',
style: TextStyle(fontSize: 50.0),
),
],
),
),
),
);
}
}

Answer 1

From Flutter docs about Container:
Containers with no children try to be as big as possible unless the incoming constraints are unbounded, in which case they try to be as small as possible. Containers with children size themselves to their children. The width, height, and constraints arguments to the constructor override this.
https://api.flutter.dev/flutter/widgets/Container-class.html
Your Column and Text('Logo') aren't big enough to use all screen width, so Container doesn't use all screen width as you can see in the image (taken with Dart DevTools, which is very useful for debug)
You can add more widgets to your Column and the width will grow as they use it, or just add width: MediaQuery.of(context).size.width to your Container to take up all the available width of the parent.
class LoginPage extends StatefulWidget {
#override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: false,
appBar: AppBar(
title: Text('Login'),
),
body: GestureDetector(
child: Container(
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.only(
top: 100.0, right: 20.0, left: 20.0, bottom: 20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(
'Logo',
style: TextStyle(fontSize: 50.0),
),
],
),
),
),
);
}
}