Layout
128 bites tagged Layout — interview questions with model answers, and 60-second explainers.
SwiftUI Stacks: Arrange Views Vertically, Horizontally, and in Layers
SwiftUI stacks are your core layout tools for arranging views. Use VStack for vertical columns, HStack for horizontal rows, and ZStack for layering. They're essential for any UI, from simple rows to complex overlays.
IntrinsicHeight/Width: Sizing by 'Natural' Dimensions
IntrinsicHeight/Width tells a child widget to size itself to its "natural" dimensions, rather than expanding to fill available space. It's useful for making all items in a Row match the tallest item's height, but it's expensive and should be avoided.
CustomMultiChildLayout: A Delegate for Complex Layouts
CustomMultiChildLayout gives a delegate total control to size and position multiple children. It's for complex layouts where widgets relate to each other, like a radial menu. The key footgun: the parent's size cannot depend on the sizes of its children.
CustomSingleChildLayout: Parent-Driven Layout
CustomSingleChildLayout lets a parent widget dictate its child's size and position, ignoring the child's intrinsic size. Use it for layouts where the parent's dimensions are independent, like a custom overlay.
AspectRatio: Forcing a Widget's Proportions
AspectRatio forces a child widget to maintain a specific width-to-height ratio, like a 16:9 video player. Use it for image placeholders or video frames. The footgun: it fails in unconstrained parents like FittedBox; use SizedBox there instead.
Flutter's FittedBox: Scale Any Widget to Fit
FittedBox scales its single child to fit an allocated space, like CSS's `object-fit` but for any widget. It's perfect for making an icon fill a button or ensuring text fits a container. The footgun: it fails in unconstrained parents like a `Row` or `Column`.
Flutter's Wrap Widget: The Row That Won't Overflow
Flutter's Wrap widget is like text-wrapping for your UI. It arranges children in a row or column, automatically flowing them onto a new line when space runs out. It's perfect for dynamic lists of tags or chips.
LayoutBuilder: Build Widgets Based on Parent Size
LayoutBuilder lets your widget ask its parent "how much space do I have?" before deciding what to build. Use it for responsive layouts, like showing a Row on wide screens and a Column on narrow ones.
MediaQuery: Reading Device Properties Efficiently
MediaQuery is your widget's window to the device, providing screen size, orientation, and safe areas. Use it to build responsive UIs that avoid system elements like notches or the keyboard. The footgun: `MediaQuery.of(context)` rebuilds on any change.
Flutter's Box Constraint System: Parents Rule
In Flutter, parents tell children their size limits, not their size. A widget must obey its parent's constraints (min/max width/height), but it chooses its own size within those bounds. The footgun is trying to size a child widget against its parent's rules.
SingleChildScrollView: When One Widget Needs to Scroll
SingleChildScrollView is an emergency scrollbar for one widget that usually fits on screen. Use it when a layout might overflow on small devices. The footgun: it renders its entire child at once, so never use it for long lists—use ListView instead.
Expanded & Flexible: Claiming Space in Flutter Layouts
Expanded and Flexible widgets manage space in a Row or Column. Expanded is greedy, forcing its child to fill all available space. Flexible is polite, allowing its child to grow but not requiring it. Use them to prevent overflow errors.
Flutter's Container: The Ultimate Box Widget
Think of Container as a customizable box for your UI. It's Flutter's multi-tool for combining layout, styling, and positioning in a single widget. Use it to add padding, margins, borders, or background colors.
Flutter's Stack: Layering Widgets on Top of Each Other
Flutter's Stack widget lets you overlap children, like layering papers. The first child is at the bottom, the last is on top. Use it for text over images or gradient overlays. The footgun: you can only position children relative to the stack's edges.
Row and Column: Arranging Widgets Without Scrolling
Think of Row and Column as rigid containers for laying out widgets horizontally or vertically. Use them for simple, fixed layouts like button bars. The footgun: unbounded children like Text will overflow; wrap them in an Expanded widget to fill remaining…
Footer Layout Patterns
A footer is a safety net for users who reach the bottom of a page without finding what they need. Use a "Big" footer for complex sites, "Medium" for standard ones, and "Slim" for simple pages.
Vertical Rhythm: A Formula for Consistent Spacing
Vertical rhythm is a system for consistent spacing derived from your body text's line height. Use this calculated unit between all elements—paragraphs, lists, and after headings—to create harmony.
Spacing Scales: Using Multiples for Consistent UI
A spacing scale builds consistent UI layouts from a limited set of values, usually multiples of a base unit like 8px. It's used for everything from button padding to page gaps. The footgun is using arbitrary pixel values, which breaks the system's rhythm.
CSS Combinators: Targeting by Relationship
CSS combinators target elements by their DOM relationship, not just class or ID. They let you select an element inside another (`div p`) or right next to one (`h2 + p`). This is key for styling nested menus or spacing adjacent items.
CSS Anchor Positioning: Beyond the Containing Block
CSS Anchor Positioning lets you tether an element to any other element, not just its parent. Use it for popovers or tooltips that automatically reposition to stay in view. The footgun is forgetting to explicitly name your anchor with `anchor-name`.
CSS Masking: Using Stencils for Web Elements
CSS masking is like a stencil for your elements. You provide a shape, and only the parts of the element under the stencil's cutout are visible. Use it for non-rectangular shapes, like text cutouts.
CSS Scroll Snap: Guiding User Scrolling
CSS Scroll Snap turns a free-scrolling container into a slideshow, guiding users to land perfectly on predefined points. It's ideal for image carousels or full-page sections where partially visible elements look sloppy.
Fix Ragged Text Lines with `text-wrap: balance`
Fix awkward text wrapping in headings. `text-wrap: balance` tells the browser to make each line roughly the same length, improving readability. Use it for short text blocks like titles, but know it's limited to a few lines due to performance costs.
CSS transform-style: Let Children Live in 3D Space
The `transform-style` property decides if an element's children are flattened onto its 2D plane or share a 3D space. Use `preserve-3d` to create nested 3D objects. Beware: properties like `opacity < 1` or `overflow` will break the 3D context and flatten it.
Get Layout bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.