Why the text is not align center in flutter - flutter

Question

Hi All I am learning flutter and I want the text to be align-center inside the column but the property crossAlignmentCenter is not working can anyone look and told what i am doing wrong here
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("hello"),
),
body: Padding(
padding: const EdgeInsets.only(left: 32,right: 32,top: 32),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
child: Text("Log In", style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.w400,
color: Colors.black,
),),
)
],
),
),
backgroundColor: Colors.teal,
);
}
}```

Answer 1

You need to wrap the Column widget with a SizedBox or a Container with the width of double.infinity. This allows Column to extend as much as the parent allows.
Replace Padding widget with this,
Container(
width: double.infinity,
padding: const EdgeInsets.only(left: 32, right: 32, top: 32),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
"Log In",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.w400,
color: Colors.black,
),
)
],
),
),

Answer 2

The reason is that by default columns do not take all available space on the cross axis. So in your example, the column is only as thick as the child it holds. Therefore centering it does not change anything. If you are looking for a solution go to Why CrossAxisAligment not Working in Flex,Row and Column?

Answer 3

If you are expecting to make it the vertical center of the column add mainAxisAlignment for your column widget.
mainAxisAlignment: MainAxisAlignment.center,
If want to have it horizontal center replace your column widget to row and make sure to set mainAxisAlignment and crossAxisAlignnment to center

Answer 4

you can wrap your Text widget inside an Align widget to do this. this is your fixed code:
import 'package:flutter/cupertino.dart';
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("hello"),
),
body: Padding(
padding: const EdgeInsets.only(left: 32,right: 32,top: 32),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
child: Align(
alignment: Alignment.center,
child:Text("Log In", style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.w400,
color: Colors.black,
),)
) ,
)
],
),
),
backgroundColor: Colors.teal,
);
}
}