Flutter — Cheat Sheet
Tags: flutter, dart, mobile, widgets, state-management, cross-platform
Level: intermediate
TL;DR: Complete reference for Flutter architecture, widget lifecycles, rendering pipeline, and state management. Ready-to-use patterns and key interview answers for technical screening.
Key concepts
Everything is a widget; UI is declared as a function of state: UI = f(state).
Three parallel trees exist: Widget Tree (configuration), Element Tree (lifecycle/context), RenderObject Tree (layout/paint).
StatelessWidgets are immutable blueprints rebuilt whenever parent configuration changes.
StatefulWidgets separate immutable configuration from mutable state persisted across builds.
Keys control widget identity across rebuilds, essential for collections and stateful element reuse.
BuildContext represents the location of a widget in the Element Tree.
Flutter bypasses native platform OEM widgets, painting directly via Impeller or Skia.
InheritedWidget efficiently propagates data down the widget tree without manual prop drilling.
Async operations rely on Dart's single-threaded event loop via microtasks and event queues.
Platform channels (MethodChannel, EventChannel) enable bidirectional communication with host OS code.
Typical questions and ready answers
Q: What is the difference between Widget, Element, and RenderObject?R: Widgets are lightweight, immutable configurations rebuilt frequently. Elements manage the lifecycle, holding references to widgets and RenderObjects. RenderObjects handle actual sizing, layout, and painting on screen.
Q: When should you use a GlobalKey versus a ValueKey or ObjectKey?R: I use ValueKey or ObjectKey to preserve local state in dynamic collections when reordering. I reserve GlobalKey for accessing widget state or render boxes across different subtrees, keeping in mind its performance overhead.
Q: How does setState() work under the hood?R: Calling setState() marks the associated element dirty and schedules a frame rebuild. During the next frame, Flutter executes build() on dirty elements, diffing widget configurations to update the RenderObject tree.
Q: How do you optimize build performance and prevent unnecessary rebuilds?R: I mark constructors with const to reuse existing widget instances, push state down to leaf widgets, extract subtrees into standalone widgets, and use targeted listeners like Selector or ValueListenableBuilder.
Pitfalls and common mistakes
Calling BuildContext dependent operations inside initState() before inherited widgets are ready; use didChangeDependencies() instead.
Rebuilding heavy widget subtrees because of high-level setState() calls at the page root.
Missing mounted check before executing setState() across asynchronous gaps.
Omitting dispose() on controllers (TextEditingController, AnimationController, ScrollController), leaking memory.
Creating new object instances directly in build(), preventing const caching and triggering redundant re-renders.
Performing synchronous heavy computation on the UI thread instead of offloading to compute() or a dedicated Isolate.
Snippets and commands
CLI commandsBash
```flutter doctor -v
flutter pub get
flutter run --profile
flutter build apk --split-per-abi
flutter analyze
flutter test
### Safe async state patternDartFuture<void> fetchData() async {
final result = await apiService.getData();
if (!mounted) return;
setState(() {
_data = result;
});
}
### MethodChannel platform integrationdart
// Dart side
static const platform = MethodChannel('com.example.app/battery');
Future<int?> getBatteryLevel() async {
try {
final int level = await platform.invokeMethod('getBatteryLevel');
return level;
} on PlatformException catch (e) {
debugPrint("Failed to get battery level: '${e.message}'.");
return null;
}
}
```
To review
[ ] RenderObject layout constraints protocol (Constraints go down, Sizes go up, Parent sets position)
[ ] Impeller rendering engine architecture vs legacy Skia
[ ] Dart memory management and garbage collection phases (Young Space vs Old Space)
[ ] Isolate spawn and bidirectional ReceivePort/SendPort communication
[x] StatefulWidget lifecycle stages (createState, initState, didChangeDependencies, build, dispose)
[x] State management patterns (Riverpod, BLoC/Cubit, Provider)
References
Flutter Official Documentation (docs.flutter.dev)
Flutter Architectural Overview (docs.flutter.dev/resources/architectural-overview)
Dart Language & Event Loop Specifications (dart.dev)
