Easy everything in Flutter & Dart, page 4
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.
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.
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.
Flutter's Stack: Layering Widgets on Top of Each Other
Flutter's Stack widget lets you overlap children, like layering papers. The first child is at the bottom, the last is on top. Use it for text over images or gradient overlays. The footgun: you can only position children relative to the stack's edges.
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…
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.
runApp(): The Entry Point to Your Flutter UI
runApp() is the starting gun for your Flutter UI, taking your root widget and painting it to the screen. It's the first function called in main(). A common misconception is that calling it again is a slow restart; it actually just updates the UI efficiently.
Declarative UI: Describe the 'What', Not the 'How'
Declarative UI means you describe your desired UI for a given state, and the framework figures out how to display it. It's the core of modern frameworks like Flutter. The footgun is manually changing UI instead of updating the state that drives it.
Dart Futures: Chaining Async Work with .then()
A Dart Future is a promise for a value that isn't ready yet. Chain actions onto it with .then() for success and .catchError() for failure. This is key for network requests or file I/O. The footgun is forgetting .catchError(), causing silent failures.
The Dart Event Loop: Your App's Task Manager
The event loop is Dart's single-threaded task manager. It processes one event at a time from a queue (like user taps or network responses), preventing the UI from freezing. Use async/await to avoid blocking it with long operations.
Static Members: Belong to the Class, Not the Instance
A static member is shared across all instances of a class, belonging to the class itself. Use it for constants or utility functions that don't depend on an instance's state, like a global counter. The footgun: you cannot use this inside a static context.
Dart Function Syntax: Block Body vs. Arrow Notation
Dart functions use a block body {} for multiple statements or arrow syntax => for a single expression. Use => for simple one-liners like bool isEven(int n) => n % 2 == 0;. The footgun is using => for multi-step logic; it only works for.
Dart's Control Flow: Telling Your Code What to Do Next
Control flow statements are the road signs for your code, directing execution beyond a simple top-to-bottom path. Use if/else for decisions, for/while for loops, and try/catch to handle errors. The footgun is forgetting break in a switch case.
Dart's Core Data Types: Everything is an Object
In Dart, everything is an object, from numbers to functions. This means even a simple int or String has methods and properties, unlike primitive types in other languages. The main footgun is forgetting that null itself is a type, Null.
Dart Variables: var, final, and const
In Dart, var creates a mutable variable, while final and const are for single-assignment. Use var for changing state, final for runtime values set once, and const for compile-time constants. The footgun is confusing final with const.
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