Box Layout Model

SafeArea pads its child by the MediaQuery padding so system UI such as the status bar, notch and home indicator does not cover it. Per-side booleans switch sides off, minimum sets a floor, and maintainBottomViewPadding keeps the bottom inset while the keyboard is open.

Each parent passes BoxConstraints (min and max width and height) down, each child picks a size inside them and reports it up, and the parent then places the child. A widget cannot choose its position or a size outside its constraints.

A Stack sizes itself to its largest non-positioned child, within its constraints, and aligns those children (default top-start). Positioned children don't affect its size; they are pinned by their insets afterwards, and later children paint on top.

Expanded is Flexible with FlexFit.tight: the child must fill its share of the leftover main-axis space. Flexible defaults to FlexFit.loose: the child may be smaller than its share, and the unused space stays free instead of going to siblings.

MediaQuery.sizeOf returns the app window's size in logical pixels; LayoutBuilder gives its builder the constraints the parent passes at that exact spot. Use sizeOf for app-level layout decisions and LayoutBuilder for a reusable widget that adapts to its own slot.

The root receives tight constraints equal to the screen, and SizedBox clamps its own 100 by 100 request into them, so it has to be screen-sized. Putting Center or Align in between loosens the constraints so the request fits.

They ask the whole subtree for its intrinsic size before real layout, a speculative pass that walks the subtree again and can become O(N²) in tree depth when nested. They are fine for a small, shallow subtree, such as one row of equal-height cards.

widthFactor multiplies the maximum incoming width and gives the child that exact width. As a plain Row child the maximum width is infinite, so the child gets an infinite tight width and layout throws 'BoxConstraints forces an infinite width'.

AspectRatio takes the largest width allowed, derives the height from the ratio, then adjusts to fit the constraints. Under tight constraints, such as a GridView tile, it must take the forced size and the ratio is ignored.

FittedBox lays its child out with unbounded constraints, then scales and aligns it at paint time to fit its own size. contain (the default) fits the whole child, cover fills the box and may overflow, and scaleDown shrinks like contain but never enlarges.

Row.spacing puts a fixed gap between adjacent children; a SizedBox is a fixed gap you place yourself; Spacer is an Expanded that absorbs leftover space. Use Wrap when children should flow onto new lines instead of overflowing.

stretch gives every child tight cross-axis constraints equal to the Row's incoming max height, so it needs a bounded height. baseline lines up children's text baselines, and throws unless textBaseline is set; in a Column it acts like start.

viewPadding is the area partly covered by system UI such as a notch or home indicator; viewInsets is the area fully covered, typically by the keyboard; padding is max(0, viewPadding - viewInsets). Opening the keyboard raises viewInsets.bottom and can drop padding.bottom to zero.

OrientationBuilder compares its parent's maxWidth with maxHeight: wider is landscape, anything else portrait. Orientation says nothing about how much room exists — a landscape phone can be narrower than a portrait tablet — so layouts should branch on width with breakpoints.

Tight constraints have min equal to max, so one size is legal; loose ones have a zero minimum; unbounded ones have an infinite maximum. The root is tight, Center and Align loosen, and a Row or scroll view leaves its main axis unbounded.

fit sets the constraints non-positioned children get: loosened (default), tightened to the biggest size, or passed through. clipBehavior defaults to Clip.hardEdge, so a Positioned badge with a negative inset that overflows the Stack is clipped; Clip.none lets it spill.

IndexedStack keeps every child mounted and laid out but paints, hit-tests and exposes semantics only for the child at index, so hidden children keep their state. It sizes to the largest child and suits a few state-keeping views.

An OverlayEntry is inserted into an Overlay by hand, built under the Overlay's context, and lives until removed. OverlayPortal builds its floating child inside its own subtree, so it shares that subtree's inherited widgets and cannot outlive it.

The Row sits where its width is unbounded, such as a horizontal scroll view or a non-flexible slot of another Row, so an Expanded child has no finite leftover width to fill. Bound the Row's width, typically by making the Row itself flexible in its parent.

Measure the window with MediaQuery.sizeOf or widthOf at the shell, branch on a width breakpoint such as 600, and render either a Row of list and detail or a single pane. Keep the selected note above the branch so resizing preserves it.

The overflow report names the RenderFlex, its constraints and size: non-flexible children, measured under the Row's unbounded main axis, took 42 pixels more than the Row's width. Release builds draw no stripe and paint past the edge.

Hit testing starts at the root and each RenderBox rejects points outside its own size before asking its children, so taps outside the Stack never reach the button. Clip.none only affects painting. Enlarge the Stack so the button lies inside it.

ConstrainedBox adds limits clamped inside the parent's range; UnconstrainedBox removes the parent's constraints so the child takes its natural size, overflowing with a debug warning if too big; LimitedBox caps an axis only when the incoming maximum is infinite.

Use them when a child's constraints or position depend on measured sizes that Row, Column, Stack and Align cannot express. performLayout must call layoutChild exactly once for every child, identified by its LayoutId, and position each with positionChild.

MediaQuery.displayFeaturesOf returns DisplayFeature objects with logical-pixel bounds, a type (fold, hinge, cutout) and a posture state; the list is populated only on Android. Split panes at a hinge's bounds, or wrap content in DisplayFeatureSubScreen to confine it to one side.