Unit 02 of 02
Layout and Components
Column, row and box layouts, order-dependent modifiers, constraint-based layout, lazy lists, prebuilt UI components, scaffold structure, navigation and routes, theme and typography, animations, accessibility and interoperating with the classic view system.
Published Updated
Lessons
- 01 Basic Layouts Measuring which direction constraints, sizes and positions travel in the UI tree for column, row and box layouts. 13 min read
- 02 Modifiers Measuring how the order of a modifier chain changes the final width, the area a background covers and the direction the constraint travels. 11 min read
- 03 Constraint-Based Layout Measuring that the position of items anchored to a sibling is computed through the parent and that a direct move from sibling to sibling cannot be set up. 11 min read
- 04 Lazy Lists Measuring how only visible rows enter the UI tree, how the scroll position travels up to its owner, and how data sent to a row that is not in the tree stays outside. 11 min read
- 05 Prebuilt UI Components Measuring which direction the color a prebuilt component such as a button gives its content travels in the tree, and how wrapping the content in a layout changes that direction. 8 min read
- 06 Scaffold Structure Measuring how the padding a screen scaffold gives its content travels down the tree, while content written into the scaffold's slot but reading the screen's state is fed along a deep path. 8 min read
- 07 Navigation and Routes Measuring that a destination chosen by a route is not in the UI tree until navigation finishes, so the argument sent to it goes outside first and then down, and the result returned goes outside. 8 min read
- 08 Theme and Typography Measuring how a theme provided at the root descends to the deep text in the tree, how the closest provider changes when a subtree provides its own theme, and how the direction changes with it. 7 min read
- 09 Animations Measuring that an animation carries two moves: the target value goes down from the owner of the state, while the per-frame intermediate value comes from the frame clock outside the tree and reaches the node with an outside move. 8 min read
- 10 Accessibility Measuring that the labels of children in the semantics tree go up to the merging ancestor, that the same direction holds for direct and indirect children, and that the merged label reaches the screen reader with an outside move. 8 min read
- 11 The Classic View System Measuring the comparison of the classic view hierarchy with the declarative tree, the outside direction of data going to a wrapped view, and the move crossing the boundary of the two trees; the closing table of the course's seventeen lessons. 12 min read