Dart
199 bites tagged Dart — interview questions with model answers, and 60-second explainers.
MaterialPageRoute: The Page in Your Navigator Stack
Think of Navigator as a stack of screens. MaterialPageRoute wraps your new screen widget, defining its platform-specific transition (slide on iOS, zoom on Android). You use it with `Navigator.push` to show a new screen.
RawKeyboardListener: Deprecated Hardware Key Events in Flutter
This is a deprecated Flutter widget for capturing raw hardware keyboard events, bypassing text input systems. It was for games or custom shortcuts, but the biggest mistake is using it now. Use KeyboardListener instead.
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…
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.
TextEditingController: Syncing UI and Code for Text Fields
A TextEditingController is the two-way link between your code and a text field's state. Use it to read user input, set initial text, or move the cursor. A common footgun is forgetting to call `dispose()` on the controller, which leads to memory leaks.
Flutter's TextField: Capturing User Input
Flutter's TextField is the standard widget for user text input. Use it for search bars or login forms, and manage its state with a TextEditingController for full control. The biggest footgun is forgetting to dispose its controller, causing memory leaks.
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.
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.
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.
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.
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.
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…
Flutter's Three Trees: Widget, Element, and RenderObject
Flutter separates UI into three trees. Widgets are cheap blueprints. Elements are the stateful managers that persist across frames. RenderObjects do the expensive layout and painting. Understanding this separation is key to mastering Flutter's performance.
InheritedWidget: Propagate Data Down the Tree
InheritedWidget provides data to any descendant that asks, avoiding prop drilling. It's the basis for Theme.of(context) and other ambient state. The common footgun is calling .of(context) from a context that's an ancestor, not a descendant, of the widget.
Flutter's State Lifecycle: From Creation to Disposal
A Flutter State object outlives its widget configuration. The framework manages its journey from creation (`initState`) to permanent removal (`dispose`), calling methods like `build` along the way. This governs all `StatefulWidget`s.
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.
StatefulWidget and State: Two Parts of a Whole
A StatefulWidget is an immutable blueprint, while its separate State object holds the mutable data. The widget is disposable; the state persists across rebuilds. Use this for interactive UI like forms or counters.
BuildContext: Your Widget's Address in the Tree
A BuildContext is a widget's address in the Flutter tree, letting it find ancestors like themes or navigators. It's used for `Theme.of(context)` or `Scaffold.of(context)`. The key footgun: a widget's context can't find its own children, only its parents.
Flutter's build(): Why It Lives on State, Not the Widget
Flutter's build() method turns state into UI. It's on the State object, not the StatefulWidget, to ensure it always paints with the latest data. The framework calls it on init, after setState(), or when dependencies change.
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.
Get Dart bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.