More in Flutter & Dart — page 13
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`.
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…
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.
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.
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.
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.