How to align Column's children in different positions in Flutter?

user_7154308 0
Viewed 14276

How to achieve the following design in Flutter?

I'm trying to position a Card and a Button within a Column.

The Card must be positioned centered in the Column wihtout taking into consideration the height of the Button.

And the Button must be positioned at the bottom of the Column.

Design

flutter-layout flutter
2 Answers

This is how you can do it using Stack 

  Stack(
        children: <Widget>[
          Center(
            child: SizedBox(
              height: 200.0,
              width: 200.0,
              child: Card(
                elevation: 10.0,
              ),
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: MaterialButton(
                child: Text("Button"),
                color: Colors.grey,
                minWidth: MediaQuery.of(context).size.width,
                onPressed: () => null,
              ),
            ),
          )
        ],
      )
user_6662210

To answer the question's title (aligning items in a "Column" widget), you can do it with the Align widget:

Column(
  children: <Widget>[
    Align(
      alignment: Alignment.center,
      child: Container(...),
    ),
    Align(
      alignment: Alignment.bottomCenter,
      child: Container(...),
    ),
  ],
)
user_18896070
Related