flutter sizing and positioning

1. Sizing & Positioning in Flutter
How Flutter Lays Out Widgets
Core UI Fundamentals

2. Flutter Layout Basics
• • Everything is a widget
• • Layout is constraint-based
• • Parent sets constraints
• • Child chooses size
• • Parent positions the child

3. The Constraint Rule
• • Constraints flow down
• • Sizes flow up
• • Positions flow down
• This rule explains most layout issues

4. Box Constraints
• • minWidth / maxWidth
• • minHeight / maxHeight
• • Widget must pick size within limits

5. SizedBox
• • Forces a fixed size
• • Commonly used for spacing
• Example:
• SizedBox(width: 100, height: 50)

6. Container
• • Combines multiple layout features
• • padding, margin, alignment
• • constraints, decoration
• Container is not magic — it uses other widgets

7. Padding & Margin
• • Padding = inner spacing
• • Margin = outer spacing (via Container)
• • Padding affects child size

8. Alignment
• • Align widget
• • alignment property in Container
• • Common values: center, topLeft,
bottomRight

9. Expanded
• • Used inside Row/Column/Flex
• • Takes remaining space
• • Flex factor controls proportion

10. Flexible
• • Similar to Expanded
• • Child can be smaller than available space
• • More relaxed than Expanded

11. Row & Column Sizing
• • mainAxisSize
• • MainAxisAlignment
• • CrossAxisAlignment
• • Affects positioning and spacing

12. Stack & Positioned
• • Allows overlapping widgets
• • Positioned controls exact placement
• • Useful for badges, overlays

13. Intrinsic Widgets (Avoid)
• • IntrinsicHeight / IntrinsicWidth
• • Expensive performance-wise
• • Use only when absolutely needed

14. Common Layout Mistakes
• • Unbounded height/width errors
• • Expanded inside ScrollView
• • Forgetting constraints

15. Debugging Layout
• • Use Flutter Inspector
• • Debug paint (debugPaintSizeEnabled)
• • Read error messages carefully

16. Mental Model
• • Parent controls limits
• • Child chooses size
• • Parent positions child
• • Constraints explain everything

17. Summary
• • Learn constraints deeply
• • Prefer simple widgets
• • Avoid Intrinsic widgets
• • Layout mastery = Flutter mastery