Arnob
Arnob

Reputation: 527

Align top widget of column to bottom in flutter

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:

Result

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

Upvotes: 1

Views: 237

Answers (1)

krishnaacharyaa
krishnaacharyaa

Reputation: 24912

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         👈 In this row use property of crossAxisAlignment: CrossAxixsAlignment.end
     | Image
     | Image
     | Image
     | Image
  |_ Row 
     | Text
     | Text
     | Text
     | Text

Upvotes: 1

Related Questions