title: Flutter Align not working inside row contained in column
body: <p>I have a row with 3 items: an <code>IconButton</code>, a <code>Text</code>, and a <code>SizedBo</code>x with a width set. The row is inside a <code>Column</code> with anther child which is <code>Expanded</code>.</p>
  <p>I'm trying to get the <code>IconButton</code> to align to the TOP of the row. I thought that wrapping this inside an <code>Align</code> with alignment topCenter would work, but it doesnt:</p>
  <p><a href="https://i.stack.imgur.com/IEkPH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IEkPH.png" alt="enter image description here" /></a></p>
  <p>I can't figure out why. Here's the code:</p>
  <pre><code>import 'package:flutter/material.dart';
  
  void main() {
    runApp(const MyApp());
  }
  
  class MyApp extends StatelessWidget {
    const MyApp({Key? key}) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          body: SafeArea(
            child: Column(
              children: [
                Row(
                  children: [
                    Align(
                      alignment: Alignment.topCenter,
                      child: IconButton(onPressed: () {}, icon: Icon(Icons.arrow_back)),
                    ),
                    const Expanded(child: Text(&quot;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat&quot;)),
                    SizedBox(
                      width: 80,
                      child: AspectRatio(
                        aspectRatio: 0.7,
                        child: Placeholder(),
                      ),
                    )
                  ],
                ),
                const Expanded(
                  child: Placeholder(),
                )
              ],
            ),
          ),
        ),
      );
    }
  }
  </code></pre>
  <p>Interestingly, if I remove the outer <code>Column</code>, the <code>Align</code> works:</p>
  <p><a href="https://i.stack.imgur.com/KH8iR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KH8iR.png" alt="enter image description here" /></a></p>
  <p>I'd like to understand why, and how to resolve this layout issue. Note that <strong>I don't want to set the <code>Row</code> crossAxisAlignment to start, because this would then misalign the <code>SizedBox</code> containing the <code>Placeholder</code> to the top instead of the center of the row</strong>.</p>