Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading