Intermediate concepts in Flutter & Dart, page 3
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.
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.
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.
Flutter Platform Channels: Talking to Native Code
Platform Channels are a telephone line between your Dart code and native device APIs. Use them to access features like battery level or integrate a native SDK not available in Dart.
Platform Views: Embedding Native UI in Flutter
Platform Views cut a hole in your Flutter UI to show a native component. Use them to embed UI that can't be rebuilt in Dart, like Google Maps or a native WebView. Be warned: they are resource-heavy and can hurt performance if overused.
Pigeon: Type-Safe Platform Channels in Flutter
Pigeon acts like a contract for your app's native code, generating type-safe platform channels from a single definition. This replaces manual, error-prone MethodChannel code. The footgun: Swift types default to structs; use @SwiftClass for class features.
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.
WidgetTester: Programmatically Drive Your Flutter UI
WidgetTester is a robot user for your app, programmatically tapping, dragging, and entering text. Use it in testWidgets to simulate user flows and verify UI state. The footgun is forgetting tester.pump() after an action; you'll assert against a stale UI.
Golden File Testing: Visual Regression for Widgets
Golden file testing is a 'spot the difference' game for your UI, catching visual regressions by comparing a widget's rendering to a master image. Use it to lock down critical widget appearances.
Android App Signing: Your App's Digital Seal
Think of app signing as a digital seal for your Android app. It proves you are the author and the code hasn't been tampered with, a mandatory step for Google Play release. The biggest footgun is losing your private key, which locks you out of.
iOS Code Signing: Apple's Digital Notary for Apps
iOS code signing is like a digital notary stamp for your app. It proves to Apple you're a trusted developer and the code hasn't been tampered with. It's mandatory for running on physical devices or submitting to the App Store.
Flutter Flavors: One Codebase, Multiple App Versions
Flutter Flavors let you build multiple app versions from one codebase, like a kitchen making different dishes from the same ingredients. Use them to manage separate API endpoints and branding for dev, staging, and prod.
CI/CD for Flutter: Automate Your Builds and Releases
CI/CD for Flutter is a safety net that automatically builds, tests, and deploys your app. Use it to catch bugs early and ship updates to app stores without manual steps.
Flutter Web Renderers: HTML vs. CanvasKit
Flutter on the web draws your UI using one of two engines: HTML or CanvasKit. The HTML renderer uses standard web elements for compatibility, while CanvasKit uses a high-performance canvas for graphical fidelity.
Flutter Desktop App Packaging: From Code to Executable
Flutter desktop packaging bundles your Dart code into a native executable for users. Instead of just running flutter run, you use platform-specific build commands to create a distributable file, like a .app on macOS or an .exe on Windows.
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.
Find Jank with Flutter's CPU Flame Charts
A flame chart visualizes CPU usage, showing which function calls are slowest. Use it to diagnose jank in Flutter. The footgun is misreading the x-axis: it's for sorting calls alphabetically, not showing execution order.
Find Flutter Memory Leaks with DevTools
Think of the DevTools Memory view as an MRI for your app's RAM. It helps you find objects that aren't being garbage collected, diagnose bloat, and fix crashes.
Flutter's Draggable and DragTarget: The Drag-and-Drop Pair
Build drag-and-drop UI in Flutter with the Draggable and DragTarget widget pair. A Draggable carries data, and a DragTarget acts as a mailbox that accepts it. Use them for reordering lists. The footgun: drops fail silently if the data types don't match.
NavigatorObserver: Listening to Route Changes in Flutter
A NavigatorObserver acts like a flight traffic controller for your app's screens, letting you react to navigation events like push and pop. It's used for analytics or updating UI based on the current route.
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