Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why CrossAxisAligment not Working in Flex,Row and Column?

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Flutter Demo'
        ),
      ),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Text(
            'Hell World!'
          )
        ],
      )
    );
  }
}

Why the text Hell World only centering horizontally and not vertically as I have also specified CrossAxisAligment.

Is it because of this : Issue

like image 228
Shubhamhackz Avatar asked Jan 07 '19 11:01

Shubhamhackz


People also ask

How does the crossAxisAlignment for row widget go?

crossAxisAlignment: The crossAxisAlignment takes in CrossAxisAlignment enum as the object to how the children's widgets should be places in crossAxisAlignment. For Row it is vertical and for Column it is horizontal. direction: This property holds as the Axis enum object to decide the direction used in the main axis.

How do you use mainAxisAlignment in flutter?

Using mainAxisAlignment in a Row lets you align the row's children horizontally (e.g. left, right). 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.


1 Answers

Row don't take all the vertical space available by default. It takes only the needed space (but it takes all the horizontal space).

Forcing the row to expend vertically should do the trick:

body: SizedBox.expand(
  child: Row(...),
),
like image 142
Rémi Rousselet Avatar answered Nov 02 '22 21:11

Rémi Rousselet