Flutter Reference

Flutter is Google's open-source UI toolkit for building natively compiled applications from a single Dart codebase. It supports Android, iOS, web (via WebAssembly and JavaScript), Windows, macOS, and Linux. Flutter renders its own UI using the Skia/Impeller graphics engine instead of relying on platform UI components, which ensures pixel-perfect consistency across platforms. It is particularly popular for mobile development due to its fast development cycle with hot reload.

A StatelessWidget is immutable — its build() method depends only on its constructor parameters and never changes after creation. Use it for pure display widgets like Text labels and icons. A StatefulWidget has a separate State object that can hold mutable data. When you call setState(() { ... }), Flutter marks the widget as dirty and calls build() again with the updated state. Use StatefulWidget for anything interactive — forms, counters, toggles, and loading states.

Provider is the original state management solution recommended by Google. It uses InheritedWidget under the hood and integrates well with the widget tree. Riverpod is a complete rewrite by the same author that fixes Provider's limitations: it does not require a BuildContext to read state, supports async providers, and avoids accidental state scoping errors. For new projects, Riverpod is recommended. Provider is still a solid choice if you prefer simpler, more familiar patterns.

GoRouter is a declarative router package for Flutter that uses URL-based routing. Define your routes as a list of GoRoute objects with path and builder properties. The path can include parameters like "/detail/:id" which are accessed via state.pathParameters["id"]. Use context.go("/path") for navigation (replaces current route) or context.push("/path") to push onto the stack. GoRouter handles deep linking, redirection, and nested navigation out of the box.

AnimationController drives an animation forward and backward between 0.0 and 1.0 (or custom range) over a specified duration. Add SingleTickerProviderStateMixin to your State class and initialize the controller with vsync: this to sync with the screen's refresh rate. Use Tween<double>(begin: 0, end: 1).animate(_controller) to map the 0–1 range to actual values. Call _controller.forward() to play, _controller.reverse() to play backwards, and always call _controller.dispose() in the State's dispose() method.

A Hero animation creates a smooth transition where a widget appears to "fly" from its position on the first screen to its position on the second screen during navigation. Wrap the same widget on both screens with Hero(tag: "uniqueTag", child: ...) using the same string tag value. When you navigate between the screens with Navigator.push(), Flutter automatically animates the widget between the two positions. Use it for images, avatars, or any element that conceptually connects two screens.

Use MethodChannel to establish a named channel between Dart and the platform. In Dart, create a MethodChannel with a unique name and call platform.invokeMethod("methodName", args). On Android (Kotlin/Java), override configureFlutterEngine and set a MethodCallHandler on the same channel name. On iOS (Swift/ObjC), use FlutterMethodChannel with the same name in AppDelegate. The channel uses a message-passing protocol to invoke methods and return results asynchronously.

Column lays out a fixed list of children vertically. It does not scroll and will throw an overflow error if children exceed the available height. Use Column when you know the number of items at build time and they fit within the screen. ListView scrolls its children vertically and is more memory-efficient for dynamic or large lists. For large lists with potentially hundreds of items, use ListView.builder() which builds items lazily as they scroll into view, only constructing the widgets that are currently visible.