Widgets
26 bites tagged Widgets — interview questions with model answers, and 60-second explainers.
Explain 'constraints go down, sizes go up, parent sets position.'
Tests Flutter layout protocol and unbounded width errors. Strong answers trace how a child gets infinite width from a scrolling parent and fix it with a bounded wrapper. Red flag: blaming the child without tracing parent constraints.
Walk me through Flutter's rendering pipeline and its phases.
Tests your understanding of the three-tree separation and how changes become pixels. Outline: setState marks objects dirty; Build updates elements, Layout computes sizes bottom-up via constraints, and Paint records commands top-down into layers.
Flutter's Widget, Element, and RenderObject trees: roles and relationships
Tests your mental model of Flutter's rendering layers. Strong answer: Widget is immutable configuration; Element is the mutable lifecycle manager owning the RenderObject; RenderObject is the concrete layout and paint entity.
Why use const for Flutter widgets and how does it improve performance?
Tests widget canonicalization and rebuild short-circuiting. Strong answer: const enables instance reuse and skips subtree rebuilds on parent updates, reducing allocations.
Implicit vs explicit animations: AnimatedContainer or AnimationController?
Knowledge of Flutter's implicit versus explicit animation paradigms. Implicit widgets auto-animate property changes on rebuild; explicit controllers manage playback manually. Red flag: saying explicit is always superior or that implicit animations cannot stop.
What problem does IntrinsicWidth solve and what are its performance costs?
This tests Flutter constraints and intrinsic sizing. A great answer covers: capping width to the child's max intrinsic width, aligning Column children, and the speculative pass that costs O(N²) in tree depth. A red flag is omitting performance cost.
Explain Flutter's 'constraints down, sizes up' rule and unbounded height error
Parents constrain down, children size up. ListView in Column throws unbounded height as Column gives infinite maxHeight; fix with Expanded or shrinkWrap. Flutter's constraint protocol.
Fix RenderFlex overflow in Row with long truncating text
Wrap Text in Expanded; set overflow to TextOverflow.ellipsis and maxLines: 1; leave siblings unwrapped. Flutter Row constraints and bounding Text width for ellipsis without affecting sibling sizes.
How do Flexible and Expanded differ in a Row or Column?
Tests Flutter main-axis flex constraints. Key point: Flexible uses FlexFit.loose so the child may be smaller than its space share; Expanded uses FlexFit.tight so the child must fill its share.
How does const on a widget constructor impact build and reconciliation?
Tests widget canonicalization and reconciliation. Strong answers: const creates identical widget instances; Element.updateChild skips subtree rebuild when oldWidget == newWidget, saving elements and GC.
Relationship between Widget, Element, and RenderObject trees and their benefits
Widget configures, Element owns state, RenderObject paints; Element.update reuses the RenderObject, so rebuilds stay cheap. Your understanding of Flutter's three-tree separation of concerns.
Explain StatelessWidget vs StatefulWidget and when to choose each
This tests immutable UI versus persistent state. StatelessWidget rebuilds when config changes; StatefulWidget owns State surviving rebuilds. Use StatelessWidget for static UI and StatefulWidget for interactive elements.
Figma Widgets: Live Apps on Your Canvas
Figma Widgets are like mini-apps living on your canvas that everyone interacts with at once, unlike single-user plugins. Use them for collaborative tools like live polls or data tables.
Building Custom Figma Widgets with the Widget API
Build interactive objects on the Figma canvas using a React-like API. The Widget API uses components, functions, and hooks to create tools like polls or timers. The footgun is forgetting `useSyncedState`, which breaks your widget in multiplayer sessions.
RepaintBoundary: Isolate and Optimize Flutter Painting
RepaintBoundary acts like painter's tape for your UI, isolating a widget's paint job from its parent to prevent unnecessary repaints. Use it on complex, static widgets inside an animating view. The footgun is overuse: each boundary adds memory overhead.
Finding Widgets with Flutter's Finder Class
Finder is your magnifying glass for widget tests, letting you locate specific widgets in the tree. It describes what to find, while the WidgetTester does the actual finding. The footgun is assuming a finder returns only one widget when it might match several.
AnimatedBuilder: Isolate Animation Rebuilds for Performance
Flutter's AnimatedBuilder rebuilds only the widgets that change during an animation, not the entire screen. Use it to embed a moving part within a larger static widget, like a spinning icon on a button, to maximize performance.
Build Custom Inputs with Flutter's FormField Widget
FormField is a state wrapper, not a UI widget, that turns any widget into a validatable form input. Use it for custom inputs like sliders or star ratings that must integrate with a Form. The footgun is forgetting to supply the UI via its `builder`.
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…
FocusNode: Programmatically Managing Widget Focus
A FocusNode is your handle to a widget's focus state, letting you programmatically request focus or listen for changes. It's essential for forms, like moving focus from one TextField to the next.
Flutter's Form Widget: Grouping and Validating Input
A Flutter `Form` acts as a supervisor for multiple input fields, letting you validate and save them all at once. Use it for login screens or user profiles. The footgun is forgetting the `GlobalKey`, which makes it impossible to trigger validation.
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.
Flutter's setState(): Triggering UI Updates
setState() tells Flutter "my data changed, so rebuild the UI." It's not the change itself, but the notification that a change happened. Use it in a StatefulWidget's State class when events modify data your build() method uses.
Get Widgets bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.