dartflutterflutter-layout

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


Solution

  • 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(...),
    ),