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.

CodePudding user response：

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,
        ),
      )),
    ],
  ),

CodePudding user response：

Here's an example of how you might align a center container with three input fields and a button, and a box above it:`

Column(
    children: [
        Expanded(
            child: FractionallySizedBox(
                widthFactor: 0.8,
                child: Center(
                    child: Container(
                        child: Column(
                            children: [
                                // Three input fields
                                // Button
                            ],
                        ),
                    ),
                ),
            ),
        ),
        // Box above
    ],
)