Like the image, I want to align each of the rows in the column.
But the alignment does not work in the row.
When I align in the column, it is normally aligned.
Where did I make a mistake.
modified the code, including the build method.
Widget build(BuildContext context) {
return const Scaffold(
body: Padding(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Row(
children: [
Column(
// crossAxisAlignment: CrossAxisAlignment.start, // working
children: [
Text(
'Strawberry Palova',
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.w700,
letterSpacing: 2,
),
),
Row(
mainAxisAlignment: MainAxisAlignment.start, // not working
children: [
Icon(Icons.star),
Text('170 Reviews'),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.end, // not working
children: [
Column(
children: [
Icon(Icons.food_bank),
Text('PREP:'),
Text('25 min'),
],
),
Column(
children: [
Icon(Icons.alarm),
Text('COOK:'),
Text('1 hr'),
],
),
Column(
children: [
Icon(Icons.fastfood),
Text('FEDS:'),
Text('4-6'),
],


You have to use
crossAxisAlignment: CrossAxisAlignment.stretchon yourColumnto stretch your column to your maximum parent width.Here a working example : I just add a
textAlign: TextAlign.centeron your title.EDIT: I just reapply your
Rowto handle image on the right.