How to push row at bottom of column - Flutter

ChristianGiupponi
April 14, 2023
184 views
3 votes
4 Answers

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:

This is what I want:

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?

Tags: flutter

Answers

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

Try this :

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,
              children: [
                Expanded(
                  flex: 3,
                  child: Column(
                    children: [
                      Text(category),
                      const SizedBox(height: 8),
                      _newsTitle(title),
                    ],
                  ),
                ),
                Spacer(),
                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,
        ),
      ),
    );
  }
}

Wrap your widget with SizedBox and set height same as your image height and add Spacer() between author name and news title. See below code

 SizedBox(
                  height: 150,
                  child: 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: [
                              Text(category),
                              const SizedBox(height: 8),
                              _newsTitle(title),
                              Spacer(),
                              Row(
                                children: [
                                  CircleAvatar(
                                    child: Text('A'),
                                    radius: 10,
                                  ),
                                  SizedBox(width: 5),
                                  Text('Dolores'),
                                ],
                              ),
                            ],
                          ),
                        ),
                      ),
                    ],
                  )),

- RamGupta
- April 15, 2023 at 6:29 pm
- 0 votes
0
Try using
```
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
```
in your column
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.

How to push row at bottom of column – Flutter

Answers