Menu
I am new to flutter and I have been trying to center my column widgets just to grasp an understanding of the layouts but the CrossAxisAlignment property of the Column doesn't seem to work.
I have tried enclosing the column into several other widgets like container but the solutions I have found so far just overwrite the core functionality of CrossAxisAlignment property. If I wrap the entire the Column in a Center widget then it is centered on the horizontal axis by default and CrossAxisAlignment property wouldn't work.
The only solution I found was to wrap the column in a container and setting its width property to take up entire width of the screen but that seems like brute forcing the layout instead of using the dynamic behaviour of Flutter.
Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
elevation: 0.0,
leading: Icon(
Icons.arrow_back_ios,
color: Colors.black,
),
),
body: Container(
color: Colors.grey[500],
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
color: Colors.orange,
child: FlutterLogo(
size: 60.0,
),
),
Container(
color: Colors.blue,
child: FlutterLogo(
size: 60.0,
),
),
Container(
color: Colors.purple,
child: FlutterLogo(
size: 60.0,
),
),
],
),
)
);
Output:
Only by hard setting the width property does it center properly
Container(
width: MediaQuery.of(context).size.width,
Output:
My question is is there a better way to use CrossAxisAlignment property without manually fixing the width? And in what use cases does it actually work without any wrapper code?
268
In Flutter, to vertically center a child widget inside a Container, you can wrap the child widget with Column and add mainAxisAlignment: MainAxisAlignment. center to it.
Main Axis is vertical and the Cross Axis is horizontal. MainAxisAlignment aligns its children vertically and CrossAxisAlignment aligns horizontally in that Column.
The cross axis to a Row's main axis is vertical. So using crossAxisAlignment in a Row lets you define, how its children are aligned vertically. In a Column, it's the opposite. The children of a column are laid out vertically, from top to bottom (per default).
Layout each child a null or zero flex factor (e.g., those that are not Expanded) with unbounded vertical constraints and the incoming horizontal constraints. If the crossAxisAlignment is CrossAxisAlignment.stretch, instead use tight horizontal constraints that match the incoming max width.
Alignment Properties: We can align content as per our choice by using mainAxisAlignment and crossAxisAlignment. Row’s mainAxis is horizontal and cross Axis to Row’s main Axis is vertical. We can align children horizontally using MainAxisAlignment and vertically using CrossAxisAlignment in that row.
In the following example, the crossAxisAlignment is set to CrossAxisAlignment.start, so that the children are left-aligned. The mainAxisSize is set to MainAxisSize.min, so that the column shrinks to fit the children.
The thing is: the CrossAxisAlignment works, but your column is only as wide as it shows on the image. This way it looks like nothing is happening.
To get your items in the center of the screen, you have to move your entire Column to the center. You can achieve this by wrapping your column inside an Align widget and setting alignment: Alignment.center.
173
Add alignment
body: Container(
alignment: Alignment.topCenter, ...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
