Flutter

A BuildContext is the widget's Element, its handle to one position in the tree. Theme.of(context) finds the nearest Theme above that position and registers a dependency, so the widget rebuilds when that theme changes.

An InheritedWidget makes a value available to every descendant without passing it through each constructor. You subclass it with final fields, add static of/maybeOf methods that register a dependency, and override updateShouldNotify so only registered dependents rebuild when the value changes.

A key tells Flutter which old widget a new one replaces: an element is reused only when runtimeType and key match. Same-type stateful siblings that can be inserted, removed or reordered need one, or their state stays with the position.

createState, then the State is mounted, initState runs once, didChangeDependencies follows, then build. Later builds follow setState, didUpdateWidget or a dependency change; on removal deactivate runs, and dispose ends it unless the subtree is reinserted within that frame.

A StatelessWidget builds only from its final fields and inherited data; a StatefulWidget creates a long-lived State object that holds changing values and rebuilds via setState. Choose stateful when the widget itself owns data that changes while it is on screen.

Widgets are immutable, short-lived descriptions of UI. Elements are the long-lived instances that hold each widget's position in the tree, its children and any State. Render objects, created by RenderObjectWidgets, hold size and position and do layout, painting and hit testing.

shouldRepaint runs when a new painter instance replaces the old one, typically after a rebuild. Return true only if the new painter would draw something different, by comparing its fields with oldDelegate's. Always true wastes repaints; always false leaves stale drawings.

Keep the samples in a ChangeNotifier owned by the State and pass it to the painter's super(repaint: ...). Each notifyListeners makes RenderCustomPaint call markNeedsPaint, so only paint runs: no setState, no build, no layout.

Each frame, SchedulerBinding runs transient callbacks (animation ticks), then their microtasks, then persistent callbacks that rebuild dirty elements, lay out, paint into a layer tree and composite it, then post-frame callbacks. The raster thread draws the resulting scene.

The UI thread runs Dart (build, layout, paint) and produces a layer tree; the raster thread renders it through the GPU. Since Flutter 3.29 on iOS and Android, Dart runs on the platform main thread; rasterizing stays separate.

The main axis is the direction children are laid out: horizontal for Row, vertical for Column; the cross axis is perpendicular. mainAxisAlignment (default start) and mainAxisSize (default max) act on the main axis, crossAxisAlignment (default center) on the cross axis.

SafeArea pads its child by the MediaQuery padding so system UI such as the status bar, notch and home indicator does not cover it. Per-side booleans switch sides off, minimum sets a floor, and maintainBottomViewPadding keeps the bottom inset while the keyboard is open.

Each parent passes BoxConstraints (min and max width and height) down, each child picks a size inside them and reports it up, and the parent then places the child. A widget cannot choose its position or a size outside its constraints.

A Stack sizes itself to its largest non-positioned child, within its constraints, and aligns those children (default top-start). Positioned children don't affect its size; they are pinned by their insets afterwards, and later children paint on top.

Expanded is Flexible with FlexFit.tight: the child must fill its share of the leftover main-axis space. Flexible defaults to FlexFit.loose: the child may be smaller than its share, and the unused space stays free instead of going to siblings.

Create a ScrollController in a State, pass it to the ListView's controller parameter, and on tap call animateTo(0, duration:, curve:) or jumpTo(0). Guard with hasClients so nothing runs before the list is attached, and dispose the controller.

ListView(children: ...) needs every child widget constructed up front, which suits short, fixed lists. ListView.builder calls itemBuilder only for indexes near the viewport, so a 5,000-row list builds just the rows on screen plus a small cache area.

Give the horizontal list a fixed height, usually a SizedBox around a horizontal ListView.builder, and place it as one item of the vertical list. Its cross axis is then bounded, it stays lazy, and horizontal and vertical drags do not conflict.

Use ListView.builder with itemCount set to the loaded items plus one footer row while more pages exist, and request the next page when the scroll position's extentAfter drops below a threshold of roughly one screen.

The scroll listener fires on every offset change and extentAfter stays under the threshold while the request runs, so each event starts another fetch. Set an in-flight flag synchronously before the first await, and discard responses from before a refresh.

A Form keyed with a GlobalKey<FormState> tracks its TextFormField descendants. On submit, validate() runs every validator (null means valid, a string becomes the error), returns true only if all pass, and save() then calls each onSaved.

MaterialApp sets up app-wide services: the Navigator, the Theme, Material localizations and a root ScaffoldMessenger. Scaffold lays out one screen's Material slots. Scaffold.of fails when its context sits above the Scaffold, such as the widget that builds it.

Give the Text a bounded width, then limit it with maxLines and choose how the cut is drawn with overflow (clip, fade, ellipsis or visible). softWrap decides whether text may break onto new lines at all; it defaults to true.

Define one ThemeData, usually with a ColorScheme and a TextTheme, pass it to MaterialApp's theme, then read Theme.of(context).colorScheme and .textTheme in widgets instead of writing Colors.blue or a literal TextStyle.

Create a TextEditingController once per State, as a field initializer or in initState, and call its dispose() in dispose(). Created inside build(), every rebuild hands the field a fresh empty controller, losing the typed text, and the old ones are never disposed.

List the files or directories under flutter: assets: in pubspec.yaml, which copies them into the app's asset bundle, then read them by their declared path: rootBundle.loadString for text such as JSON, rootBundle.load for bytes such as sounds.

Copy the font files into the project, list them in pubspec.yaml under flutter: fonts: as a family with asset entries, then pass that family name as fontFamily to ThemeData for the whole app or to a TextStyle for one widget.

Icon draws one character of an icon font. Icons entries are const IconData code points in the MaterialIcons font, bundled only with uses-material-design: true; CupertinoIcons use the CupertinoIcons font from the cupertino_icons package, which must be a dependency.

Each constructor wraps a different ImageProvider: AssetImage for bundled files, NetworkImage for URLs, FileImage for device files and MemoryImage for bytes. All decode through the same in-memory ImageCache and accept cacheWidth, cacheHeight, the loading, frame and error builders, and gaplessPlayback.

Put higher-resolution copies in sibling folders such as 2.0x/ and 3.0x/ and declare only the main asset or its directory; Flutter bundles the variants, and AssetImage picks the one closest to the device pixel ratio, rendering it at the main asset's logical size.

FutureBuilder and StreamBuilder subscribe to a Future or Stream and rebuild with an AsyncSnapshot describing its latest state. The builder checks snapshot.hasError, then hasData, and otherwise shows a loading indicator.

Ephemeral state belongs to one widget — a visibility toggle, the selected tab — and lives in its State behind setState. App state is shared across screens or kept between sessions, like the signed-in user. The password toggle is ephemeral.

ChangeNotifier is a foundation class that holds mutable state outside widgets and calls its registered listeners when notifyListeners() runs. ListenableBuilder subscribes to it and calls setState internally, so only the builder's subtree rebuilds.

Each build() call runs fetchWeather() again and passes FutureBuilder a new Future, so it resubscribes, shows waiting and fires another request. Create the future once in a State field or initState and pass that field.

Provider scopes objects to the widget tree and looks them up by type through BuildContext. Riverpod keeps state in a ProviderContainer, readable without BuildContext and overridable in tests. BLoC turns events into a stream of states: most boilerplate, most explicit.

Constructor injection means a class receives its dependencies as constructor parameters instead of creating or looking them up. A test builds the class itself and passes a FakePaymentService where production passes the real one.

The Compass app groups lib/ui by feature, because each feature has one view and one view model, but groups lib/data by type, because repositories and services are shared across features. Domain models sit in lib/domain, used by both layers.

Flutter's architecture guide puts views (compositions of widgets) and view models (UI state and UI logic) in the UI layer, and repositories (the source of truth per data type) and services (stateless wrappers around external APIs) in the data layer.

Dart methods never declare what they throw, so callers forget to catch. A sealed Result<T> puts failure in the return type: the caller must unwrap Ok or Error, typically with a switch, before it can use the value.

registerSingleton stores an instance you already built, returned on every get; registerLazySingleton runs its factory on the first get and reuses that one object; registerFactory runs its factory on every get, returning a new object each time.

Navigator.push returns a Future<T?> that completes when the pushed route is popped. The picker calls Navigator.pop(context, address); the caller awaits push and gets that address, or null if the user went back without choosing.

The Router API derives the navigator's stack from app state: a URL is parsed into state, state builds Navigator.pages, and state is reported back as a URL. Apps need it for deep links that rebuild the stack and web history.

Push a PageRouteBuilder whose pageBuilder returns the screen and whose transitionsBuilder wraps the child in a transition driven by animation, which runs 0 to 1 on push and back on pop; secondaryAnimation runs when another route covers it.

On Android, add an intent filter with android:autoVerify="true" for the https host and serve /.well-known/assetlinks.json with the package name and signing fingerprint; on iOS, add the applinks: associated domain and serve apple-app-site-association; Flutter then passes the URL to the router.

Give GoRouter a top-level redirect that returns '/login' for a signed-out user and null otherwise, and pass the session ChangeNotifier as refreshListenable so the redirect runs again the moment the user signs in or out.

setState in a controller listener re-runs the State's whole build method every frame, rebuilding widgets that never change. AnimatedBuilder or a FooTransition widget scopes the rebuild to what depends on the animation, and FadeTransition avoids widget rebuilds altogether.

Mix a ticker provider into the State, create the controller in initState with vsync: this and a duration, call repeat(reverse: true) while recording, stop or animate it back when recording ends, and dispose it in dispose before super.dispose().

The app's HeroController pairs Hero widgets with equal tags on the outgoing and incoming PageRoutes. During the route transition, the destination hero's child flies in the Navigator's overlay between their bounds while placeholders fill both original slots.

AnimatedContainer's State keeps its own AnimationController; when a rebuild passes a new property value it tweens from the current value to it over duration and curve. Loops, on-demand playback, gestures and shared timelines need an explicit controller.

A Tween is an Animatable that maps a 0.0-to-1.0 animation value onto a begin-to-end range of sizes, colors or offsets. tween.animate(controller) and controller.drive(tween) are the same operation written from opposite ends.

Move focus off the text field with FocusManager.instance.primaryFocus?.unfocus(), called from TextField.onTapOutside or a background tap, and set keyboardDismissBehavior to onDrag on scroll views. On touch Android and iOS, Flutter's defaults do neither.

GestureDetector recognizes gestures and draws nothing; InkWell, from the Material library, wraps one and adds an ink splash painted on the nearest Material, focus with keyboard activation, hover and focus colours, and a disabled state when onTap is null.

Both recognizers join the pointer's arena on pointer down. If the finger moves past the touch slop, the drag declares victory and the tap is rejected; if not, the arena is swept on pointer up and its first member, the innermost tap, wins.

A FocusNode is a long-lived object owned by a State: create it once and call dispose() in State.dispose. Creating one in build() swaps in a fresh node on every rebuild, leaking old nodes and dropping focus mid-typing.

With a child, GestureDetector defaults to HitTestBehavior.deferToChild, so it is hit only where a descendant is hit and padding misses. opaque claims its whole box and blocks targets behind; translucent claims it but lets targets behind be hit too.

Give the icon button a tooltip, or its Icon a semanticLabel, so TalkBack and VoiceOver read a name plus "button". Hide a purely decorative image with Image's excludeFromSemantics: true, or wrap it in ExcludeSemantics.

TextScaler replaced the double textScaleFactor, because Android 14 scales large text less than small text. Text applies MediaQuery.textScalerOf(context) automatically; custom code calls scaler.scale(fontSize) instead of multiplying by a factor.

Add flutter_localizations (from the SDK) and intl, set flutter: generate: true in pubspec.yaml, add l10n.yaml and the .arb files, then pass AppLocalizations.localizationsDelegates and AppLocalizations.supportedLocales to MaterialApp. The generated Dart lands in your source tree.

MergeSemantics folds a subtree's semantics into one node, so a checkbox and its Text are one focus stop read together. ExcludeSemantics removes a subtree from the semantics tree, so screen readers skip it entirely.

Call AppLocalizations.of(context) from a widget below MaterialApp and read the generated getter or method, such as cartTitle. It returns a nullable type because gen-l10n's nullable-getter option defaults to true, so call sites add ! unless that option is false.

Chain an AuthLink onto an HttpLink, give GraphQLClient that link and a GraphQLCache (HiveStore for persistence, after await initHiveForFlutter()), wrap it in a ValueNotifier and pass it to a GraphQLProvider above MaterialApp.

Call client.get(uri) or client.post(uri, headers: {'Content-Type': 'application/json'}, body: jsonEncode(data)) on one long-lived http.Client and check response.statusCode. The top-level http.get creates and closes a new Client for every call, losing persistent connections.

connectivity_plus reports which network interfaces are up (wifi, mobile, none), not whether packets reach your server. Captive portals, dead DNS or a down backend all look connected, so treat it as a hint and let the real request decide.

Give the model class a factory fromJson(Map<String, dynamic>) that casts each key into a typed final field, and a toJson() that builds the map back. Raw maps push every typo and type mismatch to runtime, far from the API call.

Call WebSocketChannel.connect(uri), await channel.ready, listen to channel.stream for incoming messages and call channel.sink.add to send. In the State's dispose, cancel the subscription and call channel.sink.close().

Documents holds user-generated or unrecreatable data, support holds app-private files, and temporary and cache hold re-creatable data the OS may clear. On iOS they map to Documents, Application Support and Caches; on Android to app_flutter, files and the cache dir.

shared_preferences holds small, non-critical settings as int, double, bool, String or List<String>, backed by NSUserDefaults, Android DataStore or SharedPreferences, and localStorage on web. Never store secrets, large data or records you cannot afford to lose.

shared_preferences writes plain values to an app file anyone with file access can read, while flutter_secure_storage encrypts them with keys held by the OS: the Keychain on iOS and macOS, Keystore-wrapped AES keys on Android.

Drift records which tables each watched query reads; every insert, update or delete made through drift's APIs marks those tables changed, and affected queries re-run and emit. Writes that bypass drift's notifications, such as customStatement or another connection, trigger nothing.

openDatabase compares the requested version with the file's stored version. A new file runs onCreate, which must build the full current schema; an older file runs onUpgrade(db, oldVersion, newVersion) once, where you apply each step, such as ALTER TABLE ADD COLUMN.

FirebaseAnalytics.instance.logEvent(name: 'lesson_completed', parameters: {...}) logs an event whose parameter values are String or num; setUserProperty(name:, value:) tags the user. Reserved names and the firebase_ prefix throw ArgumentError.

Await FirebaseAuth.instance.signInWithEmailAndPassword(email:, password:) inside try, catch FirebaseAuthException and switch on e.code. With email enumeration protection, wrong email or password both arrive as invalid-credential, not user-not-found or wrong-password.

setDefaults supplies in-app values; fetch() downloads backend values into a cache without applying them; activate() makes them what getBool and the other getters return. fetchAndActivate() does both and returns true only when new values were activated.

get() returns a Future with one snapshot, trying the server, then the cache. snapshots() returns a Stream that emits current data at once and on every change, local writes included. Use get() for one-off reads, snapshots() for live screens.

Every FlutterFire plugin looks up a FirebaseApp that exists only after Firebase.initializeApp completes. So main() calls WidgetsFlutterBinding.ensureInitialized(), awaits initializeApp with DefaultFirebaseOptions.currentPlatform, then calls runApp; otherwise the first plugin call throws [core/no-app].

A MethodChannel is a named, asynchronous pipe from Dart to host code: invokeMethod encodes a method name and arguments, the Kotlin or Swift handler registered under the same channel name replies, and Dart awaits the result as a Future.

Declare RECORD_AUDIO in AndroidManifest.xml and NSMicrophoneUsageDescription in Info.plist, call Permission.microphone.request(), then branch: granted proceeds, denied can be asked again later, permanentlyDenied needs openAppSettings(), restricted cannot be changed.

A plain Dart package ships only Dart code. A plugin package also ships host-platform code (Kotlin or Java, Swift or Objective-C, C++, or web Dart) and declares it per platform under flutter: plugin: platforms: in pubspec.yaml, so the Flutter tool registers it at build time.

PlatformException means a host handler ran and replied with an error (code, message, details). MissingPluginException means the reply was empty: no handler on that channel name, or the handler answered notImplemented.

AppLifecycleState has resumed (visible, focused), inactive (visible, unfocused), hidden (no view visible), paused (not visible, no frames, mobile only) and detached (engine without a view, also the initial state).

Debug mode is for development: asserts, service extensions, a debugger and hot reload, but slow. Profile mode is AOT-compiled like release with tracing so you can measure performance on a device. Release mode is optimized, with asserts and debugging off, for users.

Hot reload injects changed Dart code and rebuilds widgets while keeping state; hot restart reloads the code and reruns main(), losing state; a full restart rebuilds native code too and is needed after Kotlin, Swift or plugin changes.

Turn on Select Widget Mode in the DevTools Flutter inspector and tap the element in the running debug app; the inspector selects that widget, scrolls the widget tree to it, and shows its size, constraints and properties in the Widget Explorer.

print() writes each message straight to the console. debugPrint() is Flutter's throttled wrapper: it queues lines and releases about 12 KB of text, then pauses a second, so Android does not drop log lines. Both still print in release builds.

Debug builds run JIT-compiled code with assertions and debug-only work on every frame, so their timings are unrepresentative and unevenly distorted. Reproduce the jank with flutter run --profile on a physical device, then measure and optimize there.

compute(callback, message) runs callback(message) on a new background isolate and returns a Future with the result, so heavy CPU work such as jsonDecode plus model mapping no longer blocks the main isolate that builds and schedules frames.

A const constructor call yields the same canonical instance on every build, and Element.updateChild leaves an identical child untouched. Its subtree is skipped unless an inherited dependency or its own state marks it dirty.

Build a release with --analyze-size (one ABI on Android), read the terminal summary, then open the generated code-size-analysis JSON in the DevTools app size tool. Debug builds carry JIT overhead, and upload packages hold content the stores strip per device.

Each frame has a UI bar (Dart work) and a raster bar (the engine drawing the scene). Each must fit the budget, about 16 ms at 60 Hz or 8 ms at 120 Hz; the bar over it points to the cause.

A fractional Opacity makes Flutter paint the child into an offscreen buffer (a saveLayer) and composite it back, which costs raster time. Cheaper: put the alpha in the color, use Image's color or opacity parameters, or Visibility for on/off.

Call testWidgets, build the form with tester.pumpWidget inside a MaterialApp, tap the submit button through a finder, call tester.pump() so the rebuild happens, then expect find.text('Email is required') to match findsOneWidget.

Declare class MockWeatherApi extends Mock implements WeatherApi, stub with when(() => api.fetchForecast('Oslo')).thenAnswer((_) async => forecast), run the code, then assert with verify(() => api.fetchForecast('Oslo')).called(1).

tester.pump() renders one frame, optionally after advancing fake time by a duration; tester.pumpAndSettle() keeps pumping in 100 ms steps until no frame is scheduled. Use pump for precise control and pumpAndSettle to finish finite animations.

matchesGoldenFile renders the widget a finder locates, encodes it as PNG and compares it pixel for pixel with a stored file. Running flutter test --update-goldens writes the current rendering as the new baseline instead of comparing.

An integration_test test uses the same testWidgets and finder API, but runs the real app on a device or emulator in real time with real plugins. Call IntegrationTestWidgetsFlutterBinding.ensureInitialized() first and run flutter test integration_test with -d.

flutter build appbundle produces an .aab from which Google Play generates per-device APKs, and new Play apps must upload a bundle; --split-per-abi matters only when shipping APKs elsewhere, replacing one fat APK with one APK per ABI.

A Flutter pipeline runs flutter pub get --enforce-lockfile, dart format --output=none --set-exit-if-changed, flutter analyze, flutter test, then flutter build appbundle and flutter build ipa; each exits non-zero on drift, formatting, analyzer issues, failures or build errors.

flutter build ipa archives the app in release mode into an .xcarchive under build/ios/archive, then exports a signed App Store .ipa into build/ios/ipa; you upload that .ipa with Transporter, xcrun altool or Xcode.

The part before + (1.2.3) is the build name, used as Android versionName and iOS CFBundleShortVersionString; the part after + (4) is the build number, used as Android versionCode and iOS CFBundleVersion.

Create an upload keystore with keytool, describe it in android/key.properties (storePassword, keyPassword, keyAlias, storeFile), load that file in android/app/build.gradle.kts, create a release signingConfig from it, and point the release build type at it instead of the debug key.

Flutter web draws with Skia in two builds: CanvasKit, used by the default JavaScript output of flutter build web, and skwasm, used when the app is built with --wasm and the browser can run it. The HTML renderer is gone.

Each desktop target has a generated native runner that creates the OS window before Dart runs: windows/runner/main.cpp, linux/runner/my_application.cc and the macOS MainMenu.xib window. Size and title are set there; the Dart windowing API is still experimental.

Flutter macOS apps are sandboxed by default, and outgoing connections need com.apple.security.network.client, which the template omits. Add it to both macos/Runner/DebugProfile.entitlements and Release.entitlements, keeping them in step.

Since Flutter 3.41, Material buttons and InkWell use WidgetStateMouseCursor.adaptiveClickable: a hand on the web, the basic arrow on desktop. For a custom row, wrap it in MouseRegion with cursor: SystemMouseCursors.click and track hover in onEnter and onExit.

Wrap the item in a MenuAnchor with menuChildren, catch the right-click with GestureDetector.onSecondaryTapUp, and call MenuController.open(position: details.localPosition), which places the menu at that point in the anchor's coordinates.