Ignore column alignment in flutter

Asked

Viewed 166 times

1

I’m trying to put a column inside another column, but I wonder if there’s any way to ignore the first alignment, as in the code below:

class Login extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                Text("Create an account")
              ],
            )
          ],
        ));
  }
}

As my Text Widget is inside a centralized main Column, I cannot apply Mainaxisalignment.end.

I would like to force the Widget to the bottom position.

flutter dart

  • Puts the two as end, but if there’s nothing else inside the second Column uses only one and puts as end.

  • 1

    What’s happening is that it must be aligned at the end but as the other is at the center it is filling. Put the crossAxisAlignment: Crossaxisalignment.stretch, from the inside.

  • Puts Text inside a Container and aligns right.

1 answer

1


Your problem is your size-less column, so it fits your kids' content (childrens).

In this case, you must set a size, or expand dynamically.

Solving

One option would be Expanded, see in the example in your code:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[Text("Create an account")],
            ),
          ),
        ],
      ),
    );
  }
}

Useful links

Official documentation: Expanded

This video is really good: Flutter Layouts Walkthrough: Row, Column, Stack, Expanded, Padding

Browser other questions tagged flutter dart

You are not signed in. Login or sign up in order to post.