Flutter Chapter 3 of 16

Layout

Arrange widgets on screen with rows, columns, stacks, lists and grids, and understand how Flutter decides sizes.

Layout in Flutter is done by nesting widgets. Once you understand a handful of them, and the one rule behind how sizes are decided, you can build any screen.

Lessons in this chapter

1. How Layout Works in Flutter: Constraints ExplainedUnderstand Flutter layout: constraints go down, sizes go up, parent sets position. Learn to fix overflow and unbounded size errors.
2. Row and Column in FlutterLearn Row and Column in Flutter: arrange widgets horizontally and vertically with mainAxisAlignment, crossAxisAlignment and spacing.
3. Expanded, Flexible and Spacer in FlutterLearn how Expanded, Flexible and Spacer share space inside a Row or Column in Flutter, how flex works and how they prevent overflow.
4. Padding, Align, Center and SizedBox in FlutterAdd space and position widgets in Flutter with Padding, SizedBox, Center, Align, Spacer and SafeArea, and choose consistent spacing.
5. Stack and Positioned in FlutterLearn Stack in Flutter: overlap widgets, place them with Positioned and Align, and build badges, banners and image overlays.
6. ListView in Flutter: Scrolling ListsLearn ListView in Flutter: ListView.builder for long lists, separators, ListTile, horizontal lists, and fixing common list errors.
7. GridView and Wrap in FlutterLearn GridView in Flutter: fixed column counts, responsive grids with max extent, GridView.builder, aspect ratios, and Wrap for chips.
8. Scrolling, SingleChildScrollView and Slivers in FlutterMake screens scroll in Flutter with SingleChildScrollView and CustomScrollView. Learn slivers, collapsing app bars and pull to refresh.