Positioning in flutter columns

Question

I have the following code on the flutter:

import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final TextEditingController emailController = new TextEditingController();
  final TextEditingController passwordController = new TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: Container(
            height: MediaQuery.of(context).size.height - 40,
            child: Column(
              children: <Widget>[
                Container(
                  color: Colors.blue,
                  alignment: Alignment.topCenter,
                  child: Text("A"),
                ),
                Container(
                  color: Colors.green,
                  alignment: Alignment.center,
                  child: Text("B"),
                ),
                Container(
                  color: Colors.red,
                  alignment: Alignment.bottomCenter,
                  child: Text("C"),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

I’m having a problem positioning the widgets in the column. Therefore, all are in the same position in sequence. For example, "center" or "start" I wanted A to be at the top, B at the center, and C at the bottom. Can anyone tell if it is possible to do this with the columns? Or would I have to use another widget? If so, which one? pq the stack "solves" the problem but it gets responsive little and I wanted a more responsive solution to the problem, well that’s it.

Answer 1

The properties that allow to position the elements in the column are the mainAxisAlignment (alignment in the main direction of the widget, which in this case is vertical because it is a column) and the crossAxisAligment (alignment in the "cross" direction of widget, which in this case is horizontal since a column grows vertically). For your problem, you can use Enum MainAxisAlignment and select the spaceBetween. It divides the empty space equally between column elements.

Example:

Column(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    Container(
      color: Colors.blue,
      alignment: Alignment.topCenter,
      child: Text("A"),
    ),
    Container(
      color: Colors.green,
      alignment: Alignment.center,
      child: Text("B"),
    ),
    Container(
      color: Colors.red,
      alignment: Alignment.bottomCenter,
      child: Text("C"),
    )
  ],
)

Class documentation Column: https://api.flutter.dev/flutter/widgets/Column-class.html

Enum documentation MainAxisAlignment: https://api.flutter.dev/flutter/rendering/MainAxisAlignment-class.html

Answer 2

It also has the Stack method that you can position each element where you want Here are some examples: Source: Medium.com

Stack(
  children: <Widget>[
    BottomWidget(),
    MiddleWidget(),
    TopWidget(),
  ],
),

You can position and scale each element:

Stack(
  children: <Widget>[
    // Max Size
    Container(
      color: Colors.green,
    ),
    Container(
      color: Colors.blue,
      height: 300.0,
      width: 300.0,
    ),
    Container(
      color: Colors.pink,
      height: 150.0,
      width: 150.0,
    )
  ],
),