layout-debuggerlisted

# Flutter Layout Debugger Diagnoses and fixes the most common layout constraint errors in Flutter applications. ## 1. "A RenderFlex overflowed by N pixels" ### Cause A `Column` (vertical) or `Row` (horizontal) contains children whose combined size exceeds the available space on screen (yellow-and-black striped bars). ### Fix 1: Make Scrollable If the content naturally exceeds screen size (e.g., forms, long pages): ```dart // ❌ OVERFLOWS on small screens Column( children: [Header(), FormFields(), SubmitButton()], ) // ✅ FIXED: Wrap in SingleChildScrollView SingleChildScrollView( child: Padding( padding: const EdgeInsets.all(16.0), child: Column( children: [Header(), FormFields(), SubmitButton()], ), ), ) ``` ### Fix 2: Constrain Child with `Expanded` or `Flexible` If inside a `Row` or `Column` and an inner child (like `Text`) expands too far: ```dart // ❌ OVERFLOWS if text is long Row( children: [ Icon(Icons.warning), Text('Very long description that will easily overflow the screen horizontally...'), ], ) // ✅ FIXED: Wrap Text in Expanded Row( children: [ const Icon(Icons.warning), Expanded( child: Text('Very long description that will wrap cleanly...'), ), ], ) ``` --- ## 2. "Vertical viewport was given unbounded height" ### Cause A scrollable widget (`ListView`, `GridView`) was placed inside another vertically unconstrained widget (like a `Column` or another `ListView`) without explicit height. ### Fix 1: W