Intermediate concepts in Flutter & Dart, page 2
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.
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.
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.
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 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.
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.
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…
GoRouter: URL-Based Navigation for Flutter Apps
GoRouter treats your app's screens like web pages with URLs. This declarative approach simplifies deep linking and passing data via paths like /users/123. The footgun is forgetting its declarative nature and trying to manage state imperatively.
Flutter's Router API: Declarative Navigation
The Router API treats navigation as state. You declare the page stack based on app state, giving you full control over URLs and the back button. This is vital for web/desktop apps but introduces significant boilerplate compared to simple push/pop navigation.
Flutter Hero Animations: Guiding the User's Eye
A Hero animation makes a widget appear to fly from one screen to another, connecting two UIs. It's perfect for transitioning a thumbnail to a detail page, guiding the user's focus. The main footgun is using non-unique tags, which causes animations to fail.
Cubit: Simple State Management in Flutter
A Cubit is a simple state manager that exposes functions to directly trigger state changes. It's ideal for managing local UI state, like a counter or form data, without the complexity of events. The footgun is expecting state to update synchronously.
Riverpod: Compile-Safe, Reactive State Management
Riverpod treats app state like a reactive formula. Define a piece of data once, and Riverpod automatically updates any UI that depends on it. It's ideal for network requests and shared state. Footgun: Watching a provider rebuilds the UI on every change.
GetX State Management: Simplicity Over Boilerplate
GetX simplifies Flutter state management by removing boilerplate and avoiding code generators. It offers both simple manual updates and a reactive style. Use it for rapid development where minimal setup is key.
json_serializable: Automating JSON in Dart
json_serializable is a boilerplate-writing robot for Dart, automatically generating code to convert classes to and from JSON. It's essential for data models in network requests or local storage.
sqflite: Local SQL Databases in Flutter
sqflite gives your Flutter app a private, on-device SQL database by wrapping the native SQLite engine. Use it for storing structured local data, like to-do lists or settings. The footgun: all database operations are async, so you must await every call.
Hive: A Fast, Local Key-Value Store for Dart
Hive is a lightweight key-value database for Dart, acting like a persistent, super-fast Map. Use it to store simple data like user settings or cache API responses locally.
flutter_secure_storage: Secure Key-Value Pairs
flutter_secure_storage is your go-to for saving sensitive data like API tokens. Think of it as an encrypted, cross-platform key-value store that uses native Keychain on iOS and strong ciphers on Android. The footgun: it's slower and meant only for secrets.
Drift Schema Migrations: Evolving Your Database Safely
Think of schema migrations as a recipe for upgrading your app's database from an old version to a new one. You'll use them whenever you add a table or column in Drift. The footgun is forgetting to bump schemaVersion; your migration won't run.
AnimationController: The Conductor of Your Animation
An AnimationController is the conductor for your animation's timing. It produces values from 0.0 to 1.0 over a duration, letting you play, reverse, or stop animations. Use it to drive widgets like SlideTransition.
Flutter's Tween: The Recipe for Animation
A Tween is a recipe for animation, not the animation itself. It maps a 0.0-1.0 progress value to a concrete value, like a color or position. Use it with an AnimationController to smoothly transition a widget's properties.
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