Center-Align one flutter widget in column and position the rest around it

Question

How do I align one widget of a column in the center and put the rest around it?

If I had a Container or so that holds the three input fields and the button and another one that is the box above. How do I align the Container in the middle and put the box in the remaining space without moving the center container?

I tried using Expanded or Flexible but couldnt figure out how to align the widgets in that kind of way.

Answer 1

You can use Column like this:

Column(
    children: [
      Expanded(
          child: Align(
        alignment: Alignment.bottomCenter,
        child: Container(
          height: 40,
          width: 40,
          color: Colors.yellow,
        ),
      )),
      Container(
        color: Colors.red,
        height: 100,
        width: double.infinity,
      ),
      Expanded(
          child: Align(
        alignment: Alignment.topCenter,
        child: Container(
          height: 40,
          width: 40,
          color: Colors.green,
        ),
      )),
    ],
  ),