title: Flutter - Detect content overflow and clip it
body: <p>I'm trying to use <a href="https://docs.flutter.io/flutter/widgets/ClipRect-class.html" rel="noreferrer">ClipRect</a> with a <a href="https://docs.flutter.io/flutter/widgets/Column-class.html" rel="noreferrer">Column</a> inside it, but it doesn't seem to work well.</p>
  
  <p>What I'd like to achieve is to clip the column's content and to show a text message if there is an overflow (if the column's content cannot be displayed within the available space).</p>
  
  <p>Do you have any suggestions how I can make it happen?</p>
  
  <pre><code>import 'package:flutter/material.dart';
  
  void main() =&gt; runApp(ContentOverflowDetectionApp());
  
  class ContentOverflowDetectionApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text("Overflow detection"),
          ),
          body: Stack(
            fit: StackFit.expand,
            children: [
              ClipRect(
                child: Column(
                  children: [
                    Container(
                      width: 300,
                      height: 400,
                      color: Colors.green[200],
                      child: Text('first widget'),
                    ),
                    Container(
                      width: 350,
                      height: 350,
                      color: Colors.yellow[200],
                      child: Text('overflowed widget'),
                    ),
                  ],
                ),
              ),
              Positioned(
                child: Align(
                  alignment: FractionalOffset.bottomCenter,
                  child: Text("SHOW THIS TEXT ONLY IF CONTENT HAS OVERFLOWED."),
                ),
              ),
            ],
          ),
        ),
      );
    }
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/Ls8Bj.png" width="300" /></p>