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