Chapter 46 — Layouts: Row, Column, Stack, and Constraints

Level: beginner / intermediate Estimated time: 10 h Prerequisites: Chapter 45 — StatelessWidget and StatefulWidget What you will be able to do by the end: place any widget exactly where you want it on the screen, understand and fix Flutter layout errors, and reproduce a complete mockup without trial and error.

46.0 — Chapter Objectives

By the end of this chapter, you will be able to:

• state Flutter's layout rule in one sentence;
• explain what a constraint is and why it flows down the tree;
• use Container while knowing its pitfalls;
• write an EdgeInsets in its four forms;
• decorate a box with BoxDecoration: color, border, rounded corners, shadow;
• choose between Padding, SizedBox, Center, and Align;
• stack widgets vertically with Column;
• align widgets horizontally with Row;
• distinguish the main axis from the cross axis;
• use the six values of MainAxisAlignment;
• use the values of CrossAxisAlignment;
• set mainAxisSize and know why;
• read a RenderFlex overflowed error and fix it in three different ways;
• distribute space with Expanded, Flexible, and Spacer;
• explain the exact difference between Expanded and Flexible;
• wrap content onto new lines automatically with Wrap;
• layer widgets with Stack and position them with Positioned;
• keep several pages in memory with IndexedStack;
• enforce an aspect ratio with AspectRatio;
• size widgets as a percentage with FractionallySizedBox;
• force constraints with ConstrainedBox and BoxConstraints;
• understand the cost of IntrinsicHeight;
• make a page scrollable with SingleChildScrollView;
• avoid the notch and the system bar with SafeArea;
• debug a layout visually;
• rebuild a mockup from top to bottom using a repeatable method.