CODEWITHSUNDEEP
flutterdart
softshipper
softshipper

Reputation: 34099

Why the sibling applies the cross mainAxisAlignment?

I am pretty new in Flutter and I have created the following widget:

class Registration extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Expanded(
          child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[Text("Hello1")]),
        ),
        Expanded(child: Text("Hello2")),
      ],
    );
  }
}

it looks:

enter image description here

I would like to know, why the text Hello2 is also placed in the middle of screen. I did not tell it explicitly.

What I am trying to achieve is

enter image description here

Upvotes: 0

Views: 35

Answers (2)

yellowgray
yellowgray

Reputation: 4509

Row and Column all have default alignment even you didn't assign any value. Here is the source of Column:

...
Column({
  Key? key,
  MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
  MainAxisSize mainAxisSize = MainAxisSize.max,
  CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
  TextDirection? textDirection,
  VerticalDirection verticalDirection = VerticalDirection.down,
  TextBaseline? textBaseline,
  List<Widget> children = const <Widget>[],
}) : super(
...

To your question:

why the text Hello2 is also placed in the middle of screen. I did not tell it explicitly.

It is because crossAxisAlignment is default CrossAxisAlignment.center.

You can get more reference about flutter layout/constraint here: Flutter Layout Cheat Sheet and Understanding constraints

Upvotes: 1

bouraine
bouraine

Reputation: 61

You can align Hello2 with Align Widget. By default Hello2 is placed at the beginning of the second Expanded which takes half the screen.

class Registration extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Expanded(
          child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[Text("Hello1")]),
        ),
        Expanded(child: Align(alignment: Alignment.bottomRight,child:Text("Hello2"))),
      ],
    );
  }
}

You can achieve the same with a Container in place of Align.

To understand wrap you zones with containers and add colors:

class Registration extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
          Expanded(
            child: Container(color: Colors.green,child:Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[Text("Hello1")]),
          ),
        ),
        Expanded(
            child:
                Container(color: Colors.red, child: Text("Hello2"))),
      ],
    );
  }
}

enter image description here

The Expanded widget takes all the space available. if you put 2 or more Expanded widgets in a column, they will share equally the available space unless you specify a different flex property for one of them. By default flex = 1 for an Expanded widget.

Flutter widget of the week (Expanded): https://www.youtube.com/watch?v=_rnZaagadyo

Upvotes: 1

Related Questions