How to center Column widget horizontally in Flutter - flutter

Question

I was learning Flutter and wanted to learn to how structure layout. Thus, I decided to use column widget and wanted to ask how to center horizontally column widget having this code: import
'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
child: MaterialApp(
home: Scaffold(
backgroundColor: Colors.teal,
body: SafeArea(
child: Column(
children: <Widget>[
CircleAvatar(
radius: 50.0,
backgroundImage: AssetImage('images/avatar.jpeg'),
),
Text('SAM',
style: TextStyle(
fontFamily: 'Pacifico',
fontSize: 50.0,
color: Colors.white,
fontWeight: FontWeight.bold)),
Text('Flutter developer',
style: TextStyle(
// fontFamily: 'Pacifico',
fontSize: 30.0,
color: Colors.white,
fontWeight: FontWeight.bold))
],
))),
),
);
}
}

Answer 1

You can do this by setting the Column crossAxisAlignment property to CrossAxisAlignment.center
Try wrapping your Column in a Container widget and give it a width property.
Check the code below:
It works perfectly:
'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
child: MaterialApp(
home: Scaffold(
backgroundColor: Colors.teal,
body: SafeArea(
Container(
// set the height property to take the screen width
width: MediaQuery.of(context).size.width,
child: Column(
// set the crossAxisAlignment property to center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
CircleAvatar(
radius: 50.0,
backgroundImage: AssetImage('images/avatar.jpeg'),
),
Text('SAM',
style: TextStyle(
fontFamily: 'Pacifico',
fontSize: 50.0,
color: Colors.white,
fontWeight: FontWeight.bold)),
Text('Flutter developer',
style: TextStyle(
// fontFamily: 'Pacifico',
fontSize: 30.0,
color: Colors.white,
fontWeight: FontWeight.bold))
],
))),
),
),
);
}
}
I hope this helps.

Answer 2

The problem is that your screen is not tacking whole width, so it is centre widget, whatever sized is used.
To used whole width you can provide container size to max size, which will force widget to use full width and it will centre widget.
MaterialApp(
home: Scaffold(
backgroundColor: Colors.teal,
body: SafeArea(
child: Container(
width: MediaQuery.of(context).size.width, // added
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
CircleAvatar(
radius: 50.0,
backgroundImage: AssetImage('assets/images/crown 1.png'),
),
Text('SAM',
style: TextStyle(
fontFamily: 'Pacifico',
fontSize: 50.0,
color: Colors.white,
fontWeight: FontWeight.bold)),
Text('Flutter developer',
style: TextStyle(
// fontFamily: 'Pacifico',
fontSize: 30.0,
color: Colors.white,
fontWeight: FontWeight.bold))
],
),
))),
);

Answer 3

Case 1: If you want Column to be center aligned:
//First Way: Use Column Widget inside Center Widget
Center(
child: Column(
children: <Widget>[]
)
//Second Way: Use Container Widget and set alignment to center
Container(
alignment: Alignment.center,
child: Column(
children: <Widget>[]
)
)
Case 2: If you want Column children to be center aligned
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[]
)

Answer 4

if you want to align widgets in center (vertically and horizontally), you can use
Center(
child: Column(
children: <Widget>[]
)
if you want to align horizontally but at the top of the screen then
Column(
crossAxisAlignment: CrossAxisAlignment.stretch, // to cover all the area
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [Text("test data")],
)
],
)
worked for me.
And if you want to center vertically and at the beginning of the screen then
Row(
crossAxisAlignment: CrossAxisAlignment.stretch, // to cover all the area
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [Text("test data")],
)
],
works as well.