Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 817
GianMS Avatar asked Dec 21 '18 20:12

GianMS


People also ask

How do you align in Flutter?

Align Widget is the widget that is used to align its child within itself and optionally sizes itself based on the child's size. Align Widget is quite flexible and can change its size according to the size of its child. Properties of Align Widget: alignment: It sets the alignment.


1 Answers

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(...),
    ),
  ],
)
like image 143
Vahid Avatar answered Sep 18 '22 08:09

Vahid