How to vertically or horizontally center a Widget in a Stack?

Question

The Center widget centers a widget horizontally and vertically in the center of a Stack. How can one center a widget ONLY horizontally or vertically?

Centering a widget in a Stack is possible with a Row or Column widget. Can it be done without using those widgets?

Conditions:

Cannot use Row / Column.
The size of the Stack is not known before layout (cannot use hardcoded Positioned values).

Center widget:

Container(
      decoration:
          BoxDecoration(border: Border.all(color: Colors.black87, width: 10)),
      child: Stack(
        children: [
          Center(
            child: Container(color: Colors.amber, width: 50, height: 50),
          ),
        ],
      ),
    );

Center horizontally w/Row:

Row(mainAxisAlignment: MainAxisAlignment.center)

Center vertically w/Column:

Column(mainAxisAlignment: MainAxisAlignment.center)

The alignment above is the desired result. Can those results be achieved with other Flutter widgets?

Jitesh Mohite Jitesh Mohite · Accepted Answer · 2020-07-17T18:12:44

Use Align Widget

 Align(
        alignment: Alignment.topCenter, // This will horizontally center from the top
        child: Container(
          decoration: BoxDecoration(
              border: Border.all(color: Colors.black87, width: 10)),
          child: Stack(
            children: [
              Container(color: Colors.amber, width: 50, height: 50),
            ],
          ),
        ),
      )

1. For Top Center use alignment: Alignment.topCenter

2. For Center Left use alignment: Alignment.centerLeft

3. For Center right use alignment: Alignment.centerRight

3. For Bottom center use alignment: Alignment.bottomCenter

How to vertically or horizontally center a Widget in a Stack?

1 Answers