CODEWITHSUNDEEP
flutterdartflutter-layout
Jocko
Jocko

Reputation: 49

Center a column of containers in flutter, crossAxis doesnt work

I'm trying to center a column of containers that start vertically from the bottom, however i cant get them to horizontally center.

mainAxisAlignment works fine for putting them at the bottom, however crossAxis doesnt react at all.

enter image description here

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(

        mainAxisAlignment: MainAxisAlignment.end, 
        crossAxisAlignment: CrossAxisAlignment.center,


        children: <Widget>[

        SizedBox(height: 25,),
        Container(color: Colors.red, width: 150, height: 80,),
        SizedBox(height: 10,),
        Container(color: Colors.red, width: 150, height: 80,),
        SizedBox(height: 10,),
        Container(color: Colors.red, width: 150, height: 80,),
        SizedBox(height: 10,),
        Container(color: Colors.red, width: 150, height: 80,),
        SizedBox(height: 10,),
        Container(color: Colors.red, width: 150, height: 80,),
        SizedBox(height: 10,),
        Container(color: Colors.red, width: 150, height: 80,),

        ]
    ),
      
    );
  }
}

Ive also tried wrapping in Align with no luck.

(I'm using SizedBox to space them , don't know if thats the optimal way to do it.)

Upvotes: 1

Views: 224

Answers (3)

Lang Minh Nguy&#234;n
Lang Minh Nguy&#234;n

Reputation: 5555

Because your column width doesn't cover the whole screen.

enter image description here

You should wrap the Column with a Container having width: double.infinity. Like this :

     Scaffold(
        body: Container(
      width: double.infinity,
      child: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[....]
             )
          )
       )

Upvotes: 1

Tirth Patel
Tirth Patel

Reputation: 5746

Wrap Column with Center widget.

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            SizedBox(
              height: 25,
            ),
            Container(
              color: Colors.red,
              width: 150,
              height: 80,
            ),
            SizedBox(
              height: 10,
            ),
            Container(
              color: Colors.red,
              width: 150,
              height: 80,
            ),
            SizedBox(
              height: 10,
            ),
            Container(
              color: Colors.red,
              width: 150,
              height: 80,
            ),
            SizedBox(
              height: 10,
            ),
            Container(
              color: Colors.red,
              width: 150,
              height: 80,
            ),
            SizedBox(
              height: 10,
            ),
            Container(
              color: Colors.red,
              width: 150,
              height: 80,
            ),
            SizedBox(
              height: 10,
            ),
            Container(
              color: Colors.red,
              width: 150,
              height: 80,
            ),
          ],
        ),
      ),
    );
  }
}

Upvotes: 1

Afridi Kayal
Afridi Kayal

Reputation: 2295

Wrap the Column with a Container having width: double.infinity

 Scaffold(
    body: Container(
  width: double.infinity,
  child: Column(
      mainAxisAlignment: MainAxisAlignment.end,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[....

Upvotes: 0

Related Questions