title: Center certain elements vertically in a Row widget
body: <p>I have the following Widget tree of a ListView item:</p>
  <pre class="lang-dart prettyprint-override"><code>Row(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Expanded(
        child: Align(
          child: Assets.images.select.image(height: 20, width: 20),
        ),
      ),
      Expanded(
        flex: 4,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Padding(
              padding: const EdgeInsets.only(right: 16),
              child: Text(
                food.name,
                style: GoogleFonts.cabin(
                    color: Theme.of(context).primaryColor,
                    fontSize: FontSize.medium.size,
                    fontWeight: FontWeight.w700),
              ),
            ),
            Container(
              margin: EdgeInsets.only(top: 4),
              child: Text(
                &quot;100 g&quot;,
                style: GoogleFonts.cabin(
                    color: Color(0xFF777777),
                    fontSize: FontSize.small.size,
                    fontWeight: FontWeight.w500),
              ),
            ),
          ],
        ),
      ),
      Expanded(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Align(
              alignment: Alignment.centerRight,
              child: Text(
                &quot;${food.carbohydratesPerGram} g / HC&quot;,
                style: GoogleFonts.cabin(
                    color: Theme.of(context).primaryColor,
                    fontSize: FontSize.medium.size,
                    fontWeight: FontWeight.w400),
              ),
            ),
          ],
        ),
      )
    ],
  )
  </code></pre>
  <p>But it turns out like this:
  <a href="https://i.stack.imgur.com/WAKyf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WAKyf.png" alt="result image" /></a></p>
  <p>I tried putting the ball in a column with &quot;mainAxisAlignment&quot; set to &quot;mainAxisAlignment.center&quot;</p>
  <p>How can I get the ball on the left vertically centered in the row?</p>