'Flutter - How to align icons and text in a row or in the row of columns?

How to place icons and text along the cross axis such that their baselines match? I've tried put crossAxisAlignment: CrossAxisAlignment.baseline and textBaseline: TextBaseline.alphabetic in the Row, but it does not work. Here are my snippets that shows the situation. Please would you resolve the problem?

//...
 Row(
   children: [
     RatingBar(
       rating: 5.0,
       itemSize: 12.0,
     ),
     Text(
       ' nice',
       style: TextStyle(
         fontSize: 12.0,
         color: Colors.grey,
       ),
      ),
     ],
    ),
//...
//...
Container(
        margin: containerMargin,
        padding: containerPadding,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                RatingBar(
                  rating: 5.0,
                  itemSize: 14.0,
                ),
                RatingBar(
                  rating: 4.0,
                  itemSize: 14.0,
                ),
                RatingBar(
                  rating: 3.0,
                  itemSize: 14.0,
                ),
                RatingBar(
                  rating: 2.0,
                  itemSize: 14.0,
                ),
                RatingBar(
                  rating: 1.0,
                  itemSize: 14.0,
                ),
              ],
            ),
            Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                Text(
                  '100%',
                  style: TextStyle(
                    fontSize: 14.0,
                  ),
                ),
                Text(
                  '0%',
                  style: TextStyle(
                    fontSize: 14.0,
                  ),
                ),
                Text(
                  '0%',
                  style: TextStyle(
                    fontSize: 14.0,
                  ),
                ),
                Text(
                  '0%',
                  style: TextStyle(
                    fontSize: 14.0,
                  ),
                ),
                Text(
                  '0%',
                  style: TextStyle(
                    fontSize: 14.0,
                  ),
                ),
              ],
            ),
            Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  '5 reviews',
                  style: TextStyle(
                    fontSize: 14.0,
                  ),
                ),
                Text(
                  '0 reviews',
                  style: TextStyle(
                    fontSize: 14.0,
                  ),
                ),
                Text(
                  '0 reviews',
                  style: TextStyle(
                    fontSize: 14.0,
                  ),
                ),
                Text(
                  '0 reviews',
                  style: TextStyle(
                    fontSize: 14.0,
                  ),
                ),
                Text(
                  '0 reviews',
                  style: TextStyle(
                    fontSize: 14.0,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
//...


Solution 1:[1]

First of all, try to wrap your Columns with fixed size Container/SizedBox, if it will not help, try to wrap your Icons or Text widgets with fixed size Container/SizedBox. It will help you

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Muhammet