Align top widget of column to bottom in flutter-CodePudding

I'm trying to align the top widget from the end. So the bottom portion of the top widget should be aligned.

return Container(
  height: 100,
  padding: const EdgeInsets.all(8.0),
  child: Column(
    children: [
      Container(
        width: getWidth(),
        height: getHeight(),
        decoration: BoxDecoration(
          color: getColor(),
          borderRadius: BorderRadius.circular(8),
        ),
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: getIcon(),
        ),
      ),
      Spacer(),
      Text(
        getText(),
        style: TextStyle(
          color: Colors.black,
          fontSize: 18,
          fontWeight: FontWeight.bold,
        ),
      ),
    ],
  ),
);

But I'm getting this:

I've tried expanded and align widget but doesn't work.

CodePudding user response：

children of the column widget can be aligned using Main or Cross axis alignment. The main axis is for vertical alignment and the cross axis is for horizontal alignment.

Column(
  mainAxisAlignment: MainAxisAlignment.end, // this aligns widget
  children: [ ... ],
),

I have added the alignment property in your code : -

return Container(
  height: 100,
  padding: const EdgeInsets.all(8.0),
  child: Column(
    mainAxisAlignment: MainAxisAlignment.end, // It will align widgets from end(bottom)
    children: [
      Container(
        width: getWidth(),
        height: getHeight(),
        decoration: BoxDecoration(
          color: getColor(),
          borderRadius: BorderRadius.circular(8),
        ),
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: getIcon(),
        ),
      ),
      Spacer(),
      Text(
        getText(),
        style: TextStyle(
          color: Colors.black,
          fontSize: 18,
          fontWeight: FontWeight.bold,
        ),
      ),
    ],
  ),
);

CodePudding user response：

You have to change the approach.

Your present approach.

Row
  |_ Container
      |_ Column
          | Image
          | Spacer
          | Text
  |_ Container
      |_ Column
          | Image
          | Spacer
          | Text
  |_ Container
      |_ Column
          | Image
          | Spacer
          | Text
  |_ Container
      |_ Column
          | Image
          | Spacer
          | Text

Change it to :

Column
  |_ Row