Advanced everything in Flutter & Dart, page 3
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.
Isar: A Modern NoSQL Database for Flutter Apps
Isar is a fast, local NoSQL database for Flutter, offering static typing and ACID guarantees. Use it for on-device persistence in iOS, Android, and desktop apps. Don't mistake it for a remote database; Isar is for local storage, not cloud sync.
Drift: Type-Safe SQL in Dart & Flutter
Drift gives your raw SQL queries compile-time safety. Instead of parsing maps, its build-time analyzer validates your SQL and generates typed Dart objects for results. Use it to write complex queries without risking runtime errors from typos or schema changes.
Cross-Platform WebSockets with `web_socket_channel`
The web_socket_channel package abstracts away platform differences for WebSockets, giving you a single API for web, mobile, and server. Use it for real-time features like chat or live data feeds. The footgun: always await channel.ready before sending data.
graphql_flutter: Client Setup and Querying
graphql_flutter connects your app to a GraphQL API via a client-provider-widget pattern. You provide a configured GraphQLClient to a GraphQLProvider, then use Query widgets to fetch data declaratively.
dio Interceptors: Middleware for Network Requests
dio Interceptors are middleware for network requests, letting you inspect and modify them before they're sent or after a response is received. Use them to globally add auth tokens, log activity, or handle token refreshes.
Freezed: Immutable State Without Boilerplate
Freezed is a Dart code generator that writes your immutable data classes for you. You define the shape, and it generates constructors, copyWith, and equality checks. Use it for model classes and to represent distinct states.
MobX: Automatic UI Updates with Reactive State
MobX automatically wires your reactive data to your Flutter UI, so widgets update when data changes. It's used for state management from simple counters to complex forms. The main footgun is forgetting to wrap all state mutations inside an Action.
Redux: Predictable State via a Single Source of Truth
Redux treats app state like a transaction log. All changes are explicit actions processed by pure functions, creating a new, predictable state. It's ideal for complex apps with shared state. The main footgun: putting side effects like API calls in reducers.
PopScope: Guarding Your Flutter Routes
PopScope acts as a gatekeeper for back navigation in Flutter, letting you intercept and block attempts to leave a screen. Use it to show a confirmation dialog for unsaved changes. Its behavior differs on iOS; the swipe-back gesture won't trigger its callback.
PageRouteBuilder: Custom Routes Without the Boilerplate
PageRouteBuilder creates a custom page route on the fly, skipping the boilerplate of a full subclass. Just provide a pageBuilder for the screen's content and a transitionsBuilder for a unique animation.
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.
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.
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.
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.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles