title: Flutter scrollable layout with dynamic child
body: <p>I want to create a generic Layout which accepts a child Widget as a parameter, that lays out the content as follows:</p>
  <p>I have an AppBar at the Top, a Title (headline), and below that the Content (could be anything). At the bottom, I have a Column with a few buttons. If the content is too big for the screen, all those widgets, except the AppBar, are scrollable. If the content fits the screen, the title and content should be aligned at the top, and the buttons at the bottom.
  To showcase what I mean, I created a drawing:</p>
  <p><a href="https://i.stack.imgur.com/Ys8tq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ys8tq.png" alt="" /></a></p>
  <p>It is easy to create to scrollable content functionality. But I struggle with laying out the content so that the buttons are aligned at the bottom, if the content does NOT need to be scrollable.
  It is important to say that I don't know the height of the content widget or the buttons. They are dynamic and can change their height. Also, the title is optional and can have two different sizes.</p>
  <p>What I tried is the following:</p>
  <p>import 'package:flutter/material.dart';</p>
  <pre><code>class BaseScreen extends StatelessWidget {
    final String? title;
    final bool bigHeader;
    final Widget child;
    final Widget bottomButtons;
  
    const BaseScreen({
      Key? key,
      required this.child,
      required this.bottomButtons,
      this.bigHeader = true,
      this.title,
    }) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      final AppBar appBar = AppBar(
        title: Text(&quot;AppBar&quot;),
      );
      double minChildHeight = MediaQuery.of(context).size.height -
          MediaQuery.of(context).viewInsets.bottom -
          MediaQuery.of(context).viewInsets.top -
          MediaQuery.of(context).viewPadding.bottom -
          MediaQuery.of(context).viewPadding.top -
          appBar.preferredSize.height;
  
      if (title != null) {
        minChildHeight -= 20;
        if (bigHeader) {
          minChildHeight -= bigHeaderStyle.fontSize!;
        } else {
          minChildHeight -= smallHeaderStyle.fontSize!;
        }
      }
      final Widget content = Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          if (title != null)
            Text(
              title!,
              style: bigHeader ? bigHeaderStyle : smallHeaderStyle,
              textAlign: TextAlign.center,
            ),
          if (title != null)
            const SizedBox(
              height: 20,
            ),
          ConstrainedBox(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                child,
                bottomButtons,
              ],
            ),
            constraints: BoxConstraints(
              minHeight: minChildHeight,
            ),
          ),
        ],
      );
      return Scaffold(
        appBar: appBar,
        body: SingleChildScrollView(
          child: content,
        ),
      );
    }
  
    TextStyle get bigHeaderStyle {
      return TextStyle(fontSize: 20);
    }
  
    TextStyle get smallHeaderStyle {
      return TextStyle(fontSize: 16);
    }
  }
  </code></pre>
  <p>The scrolling effects work perfectly, but the Buttons are not aligned at the bottom. Instead, they are aligned directly below the content. Does anyone know how I can fix this?</p>