UI
189 bites tagged UI — interview questions with model answers, and 60-second explainers.
Flutter's Path Class: Drawing Custom Shapes
Flutter's Path is a digital pen for drawing any custom shape. Use it for complex icons, charts, or clipping widgets into non-rectangular forms. The footgun: forgetting `moveTo` will connect separate parts of your drawing with an unwanted line.
Staggered Animations: Choreographing UI Changes
A staggered animation is a domino effect for your UI. Instead of animating everything at once, you sequence animations with slight delays for a more fluid, polished feel. Use it for list items appearing one by one. The footgun is timing: too long feels slow.
ClipPath: Clip Widgets to Custom Shapes
ClipPath is a stencil for your widgets. It cuts a child widget to a custom-defined shape, hiding anything outside the lines. Use it for complex shapes like waves or stars, but avoid it for simple rectangles or circles—it's expensive.
CustomPaint: Drawing Your Own Widgets in Flutter
CustomPaint is your blank canvas widget; CustomPainter is the artist that draws on it. Use them for custom charts or unique UI. The footgun: shared canvases can cause blend modes to erase other widgets, so use `saveLayer` sparingly.
CurvedAnimation: Animate with Easing and Personality
CurvedAnimation makes animations feel natural by applying a timing curve to another animation. Instead of linear motion, widgets can ease-in or bounce. Footgun: Elastic curves can overshoot the standard 0.0-1.0 range, causing unexpected UI behavior.
AnimatedContainer: Simple UI Animations Without Controllers
AnimatedContainer is a 'fire-and-forget' animation widget. It automatically animates its own properties like size and color when they change. Use it for simple UI state changes, like a button that grows when tapped. It only animates itself, not its child.
Flutter Hero Animations: Guiding the User's Eye
A Hero animation makes a widget appear to fly from one screen to another, connecting two UIs. It's perfect for transitioning a thumbnail to a detail page, guiding the user's focus. The main footgun is using non-unique tags, which causes animations to fail.
Flutter's Gesture Arena: Who Wins the Touch Event?
The Gesture Arena is a contest where multiple gesture detectors compete for one touch event. This happens when a tappable button is inside a scrollable list. The biggest footgun is a gesture not firing because an unexpected detector won the competition.
Dismissible: The Swipe-to-Remove Widget in Flutter
A `Dismissible` widget lets you swipe away list items, like clearing notifications. Use it for to-do lists or email inboxes. The key footgun: you MUST provide a unique `Key` and remove the item from your data source in `onDismissed`, or it will reappear on…
InkWell: Adding Material Splash Effects
InkWell adds a Material Design 'splash' effect to any widget on tap. Think of it as ink spreading inside the surface you touch. Use it to make non-interactive widgets like images respond to taps. The splash won't appear if an opaque widget is between it.
Flutter's Three Main Material Buttons
Flutter's Material buttons signal emphasis. Use ElevatedButton for primary actions (Save), OutlinedButton for secondary (Next), and TextButton for tertiary (Cancel). The footgun is choosing a button for its looks, not its place in the action hierarchy.
GestureDetector: Making Any Widget Interactive
GestureDetector is an invisible wrapper that makes any widget interactive. Use it to add an `onTap` to a `Container` or custom widget. The biggest footgun: when nested, only the innermost detector's callback for a given gesture will fire.
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.
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.
StatelessWidget: Flutter's Immutable UI Blueprint
A StatelessWidget is a 'frozen' UI blueprint, built once with its configuration and never changing its own state. Use it for static UI like icons or text labels. The footgun is using it for UI that must react to internal data changes.
Flutter Widgets: Everything is a Widget
Think of Flutter UIs as LEGOs. Every element, from a button to the padding around it, is a self-contained 'widget' you compose to build your screen. This applies to layout, text, and even alignment.
Declarative UI: Describe the 'What', Not the 'How'
Declarative UI means you describe your desired UI for a given state, and the framework figures out how to display it. It's the core of modern frameworks like Flutter. The footgun is manually changing UI instead of updating the state that drives it.
Form Layout Best Practices
Guide users with a clear visual path, not a maze. A single-column layout with consistent spacing creates a streamlined data entry experience. Use it for everything from contact forms to complex UIs.
Component Naming: A Shared Language for UI
Think of naming conventions as a shared dictionary for your team. A name like `ButtonPrimary` should mean the same thing in Figma and in code, ensuring consistency.
Empty State Pattern: More Than Just a Blank Page
An empty state turns a blank screen into a helpful guide, showing users what's possible and how to get there. It's crucial for first-time use, 'no results' searches, or after data deletion. The footgun is treating it as an afterthought, leaving users stuck.
Semantic Colors: Naming a Color's Job, Not Its Value
Semantic colors name a color's purpose (e.g., `color-background-interactive`) instead of its value (`#007BFF`). This simplifies theming, like light/dark mode, by mapping roles to specific primitive colors, ensuring a consistent UI across an application.
Spatial UI Design Systems
Spatial UI design systems define how interfaces behave in 3D space on devices like Vision Pro: depth-based hierarchy, distance-aware scale, and gaze-and-pinch interaction, replacing the flat, pointer-driven rules of traditional 2D design systems.
Get UI bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.