flutteralignmentchildren

Column's children widget alignment not working in Flutter

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.

enter image description here

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'),
                  ],

enter image description here

Solution

  • You have to use crossAxisAlignment: CrossAxisAlignment.stretch on your Column to stretch your column to your maximum parent width.

    Here a working example : I just add a textAlign: TextAlign.center on your title.

    EDIT: I just reapply your Row to handle image on the right.

    Widget build(BuildContext context) {
return  const Scaffold(
  body: Padding(
    padding: EdgeInsets.symmetric(horizontal: 20),
    child: Row(children: [
      Flexible(child:
        Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Text(
              'Strawberry Palova',
              style: TextStyle(
                fontSize: 25,
                fontWeight: FontWeight.w700,
                letterSpacing: 2,
               
              ),
              textAlign: TextAlign.center,
            ),
            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'),
                  ],
                ),
              ],
            ),
          ],
        ),
      ),
      Expanded(child:
        Placeholder(), //here your image
      ),
    ],
  ),
),
);
}