skip to Main Content

I’m new to flutter, While practising the row and column widget I encountered this problem. It’s said that setting mainAxisAlignment to center in a flutter column will center the children vertically, Why when I added a row as a children, the column also centers horizontally while the row children does not?

Does anyone know why?

Here is the code

  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Text("Exercise row & column"),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text("Text 1"),
          Text("Text 2"),
          Text("Text 3"),
          Row(children: <Widget>[
            Text("Text 4"),
            Text("Text 5"),
            Text("Text 6"),
          ])
        ],
      ),
    ));
  }

Here is the result

enter image description here

2

Answers


  1. This is because the Row widget takes up the entire width and its children are aligned horizontally.

    In order to center align the Row Widget‘s children, added a mainAxisAlignment: MainAxisAlignment.center property to the row widget.

    Login or Signup to reply.
  2. your code seems to be good. I tested it and it worked fine, sometimes flutter just holds cache and do not do changes that are clearly visible. try flutter clean then re-run the project. it will solve your problem 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search