How to push row at bottom of column

I have a column that need to show a news category, news title and at the bottom should add the author name.

This is what I have now:

enter image description here

This is what I want:

enter image description here

I need to push the author info at the bottom, this is my widget:

import 'package:flutter/material.dart';

class NewsCardHorizontal extends StatelessWidget {
  final String title;
  final String image;
  final String category;

  const NewsCardHorizontal({
    super.key,
    required this.title,
    required this.category,
    required this.image,
  });

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        _image(image),
        const SizedBox(width: 8),
        Expanded(
          flex: 1,
          child: SizedBox(
            // width: 150, // Imposta una larghezza fissa
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: [
                Expanded(
                  flex: 3,
                  child: Column(
                    children: [
                      Text(category),
                      const SizedBox(height: 8),
                      _newsTitle(title),
                    ],
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: Row(
                    children: [
                      CircleAvatar(
                        child: Text('A'),
                        radius: 10,
                      ),
                      SizedBox(width: 5),
                      Text('Dolores'),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }

  Widget _newsTitle(String title) {
    return Flexible(
      fit: FlexFit.loose,
      child: Text(
        title,
        maxLines: 3,
        style: const TextStyle(
          fontWeight: FontWeight.w700,
          fontSize: 18,
        ),
      ),
    );
  }

  Widget _image(String image) {
    return SizedBox(
      width: 150,
      height: 150,
      child: ClipRRect(
        borderRadius: const BorderRadius.all(Radius.circular(20)),
        child: Image.network(
          image,
          fit: BoxFit.fitHeight,
        ),
      ),
    );
  }
}

I have also tried to remove the Expanded and add a Spacer between but I get errors. How can I push the latest row at the bottom of the column?

>Solution :

enter image description here

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Example(),
      ),
    );
  }
}

class Example extends StatelessWidget {
  const Example({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 120,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            decoration: BoxDecoration(
              color: Colors.blueAccent,
              borderRadius: BorderRadius.circular(10),
            ),
            height: 120,
            width: 120,
          ),
          const SizedBox(width: 8),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: [
                const Text('Living'),
                const SizedBox(height: 8),
                const Text(
                  'Duere fuga ab dolores? \nfdsfdsfds',
                  maxLines: 3,
                  style: TextStyle(
                    fontWeight: FontWeight.w700,
                    fontSize: 18,
                  ),
                ),
                Spacer(),
                Row(
                  children: [
                    CircleAvatar(
                      child: Text('A'),
                      radius: 10,
                    ),
                    SizedBox(width: 5),
                    Text('Dolores'),
                  ],
                ),
                const SizedBox(height: 8),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Leave a Reply