Box Constraints Visualization

BoxConstraintsVisualizationDemo.dart

// Question from https://stackoverflow.com/questions/41727553/

//Box Constraints Visualization - no text clipping issues/errors
// to be visualized in Flutter Wiget inspector


import 'package:flutter/material.dart';

class TextClippingError extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        scaffoldBackgroundColor: const Color(0xFF442F43),
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: Text("Box Constraints Demo")),
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Card(
            child: Container(
              decoration: BoxDecoration(
                border: Border.all(width: 10, color: Colors.cyan),
                color: Colors.limeAccent,
                borderRadius: const BorderRadius.all(const Radius.circular(1)),
              ),
              child: Padding(
                padding:
                    EdgeInsets.only(right: 20, left: 20, top: 25, bottom: 35),
                child: Text(
                  "The Center widget tries to be as big as possible.",
                  style: TextStyle(
                    fontSize: 12,
                    fontFamily: 'Sans',
                    fontWeight: FontWeight.w800,
                    color: Colors.black,
                  ),
                ),
              ),
            ),
          ),
          Card(
            child: Container(
              decoration: BoxDecoration(
                border: Border.all(width: 10, color: Colors.cyan),
                color: Colors.limeAccent,
                borderRadius: const BorderRadius.all(const Radius.circular(3)),
              ),
              child: Padding(
                padding:
                    EdgeInsets.only(right: 20, left: 20, top: 25, bottom: 15),
                child: Text(
                  "The Column widget tries to be as tall as possible but as wide as its widest child.",
                  style: TextStyle(
                    fontSize: 12,
                    color: Colors.black,
                    fontFamily: 'Sans',
                    fontWeight: FontWeight.w700,
                  ),
                ),
              ),
            ),
          ),
          Card(
            child: Container(
              decoration: BoxDecoration(
                border: Border.all(width: 10, color: Colors.cyan),
                color: Colors.limeAccent,
                borderRadius: const BorderRadius.all(const Radius.circular(3)),
              ),
              child: Padding(
                padding:
                    EdgeInsets.only(right: 20, left: 20, top: 25, bottom: 15),
                child: Text(
                  "The Card widget tries to be just large enough to accomodate its child.",
                  style: TextStyle(
                    fontSize: 14,
                    color: Colors.black,
                    fontFamily: 'Sans',
                    fontWeight: FontWeight.w500,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}