Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Box Constraints Visualization
// 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,
),
),
),
),
),
],
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.