Flutter web overflow bug | multiline text measuring | repro

main.dart

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  String _errorMessage;
  
  // This tree reproduces an overflow problem that I don't understand.
  // Upon initial run everything is fine. Then, press the button that
  // causes the error message to appear. Notice that suddenly there is
  // an overflow error on the Column.
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: double.infinity,
      color: Colors.yellow,
      child: _buildExpandOrScroll(
        child: Center(
          child: _buildCard(
            child: _buildContent(),
          ),
        ),
      ),
    );
  }
  
  // Builds a series of widgets that accomplish the concept of scrolling
  // if the content exceeds the available space, or, if there is sufficient
  // space to display the content then the content is given all available
  // space to occupy. My use-case is the desire to vertically center my
  // content when it does not overflow the available space.
  Widget _buildExpandOrScroll({Widget child}) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        return SingleChildScrollView(
          child: ConstrainedBox(
            constraints: BoxConstraints(
              minHeight: constraints.maxHeight,
            ),
            child: IntrinsicHeight(
              child: child,
            ),
          ),
        );
      },
    );
  }
  
  // Builds a white card with rounded corners. Padding is applied outside
  // the card, and inside the card. The content of the card is the provided
  // "child"
  Widget _buildCard({Widget child}) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 72),
      child: ConstrainedBox(
        constraints: BoxConstraints.loose(Size(400, double.infinity)),
        child: Material(
          color: Colors.white,
          borderRadius: BorderRadius.circular(32),
          elevation: 24,
          child: Padding(
            padding: const EdgeInsets.symmetric(
                    horizontal: 40, vertical: 20),
            child: child,
          ),
        ),
      ),
    );
  }
  
  // Builds the content of the card. Includes a title, a bunch of vertical
  // space, an error message that may or may not be displayed, and a button
  // that causes the error message to display.
  Widget _buildContent() {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Text(
          'Some Title',
          style: TextStyle(
            fontSize: 30,
            fontWeight: FontWeight.bold,
          ),
        ),
        SizedBox(height: 600),
        if (_errorMessage != null) ...[
          Text(
            _errorMessage,
            style: TextStyle(
              color: Colors.red,
              fontSize: 14,
              fontWeight: FontWeight.bold,
            ),
          ),
          SizedBox(height: 24),
        ],
        SizedBox(
          width: double.infinity,
          child: RaisedButton(
            color: Colors.grey.shade900,
            padding: const EdgeInsets.all(24),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(16),
            ),
            child: Text(
              'Do Something',
              style: TextStyle(
                color: Colors.white,
              ),
            ),
            onPressed: () {
              setState(() {
                _errorMessage = "This is an error message that adds some height to this thing.";
              });
            },
          ),
        ),
        SizedBox(height: 16),
      ],
    );
  }
}