Knowledge Map
Flutter
Every keyword from widgets to render pipelines — with a plain-English sentence explaining what each one actually does.
206
Concepts
24
Groups
114
Must-know
Fundamental
Widget model, state basics, layouts, navigation & themingWidget
The fundamental building block of every Flutter UI — everything you see on screen is a widget, from a button to the whole app.
StatelessWidget
A widget that draws itself purely from its constructor arguments and never changes after being built.
StatefulWidget
A widget that owns mutable state and can redraw itself whenever that state changes via setState().
BuildContext
Your widget's position handle in the tree — used to look up themes, navigate, or find ancestor widgets.
Widget Tree
The nested hierarchy of widget descriptions you write in code — Flutter's blueprint for what the UI should look like.
Element Tree
Flutter's live, mutable copy of the widget tree — it tracks which widgets are active and manages their lifecycle.
RenderObject Tree
The third tree that does the actual size, position, and painting calculations — what ultimately draws pixels.
build()
The method you override in every widget that returns the widget's UI description — called whenever Flutter needs to redraw.
Hot Reload
Injects updated code into a running app in under a second while preserving app state — Flutter's biggest developer superpower.
Hot Restart
Fully restarts the app from scratch but without rebuilding native code — slower than hot reload but resets all state.
setState()
Tells Flutter that your data changed and the widget needs to be rebuilt — the simplest way to update the UI.
State<T>
The companion class to a StatefulWidget that holds its mutable data and survives widget rebuilds.
initState()
Called once when the widget is first inserted into the tree — the right place to set up controllers or subscriptions.
dispose()
Called when a widget is permanently removed — the right place to clean up controllers and subscriptions to avoid memory leaks.
didUpdateWidget()
Called when the parent rebuilds and passes new configuration to your StatefulWidget — react to incoming changes here.
didChangeDependencies()
Called when an InheritedWidget your widget depends on changes — runs after initState and before build.
mounted
A boolean that tells you if the widget is still in the tree — always check it before calling setState in async callbacks.
Container
A convenience widget that combines padding, color, size, decoration, and a single child in one tidy package.
Row
Places children side by side horizontally, with flexible control over spacing and alignment.
Column
Stacks children vertically one after another — the backbone of almost every screen layout.
Stack
Overlaps children on top of each other like layers — great for badges, floating labels, or custom overlays.
Expanded
Fills the remaining space in a Row or Column, stretching a child to take up whatever room is left.
Flexible
Like Expanded but lets the child stay smaller if it doesn't need all the offered space.
Padding
Adds empty space around a single child widget — the cleanest way to add breathing room.
Center
Places its child in the exact center of all available space — dead simple and very commonly used.
Align
Positions a child at a specific alignment (topLeft, bottomRight, etc.) within its parent space.
SizedBox
Forces a child to a specific width and height, or creates invisible spacers between widgets.
Spacer
Inserts a flexible gap between siblings in a Row or Column — the cleanest way to push widgets apart.
Scaffold
The full-screen layout skeleton that provides AppBar, body, FAB, drawer, and bottom navigation slots.
AppBar
The top navigation bar with title, leading icon, and action buttons — the standard screen header widget.
Text
Renders a string on screen with styling options like font size, weight, color, and overflow behavior.
Image
Displays an image from assets, the network, memory, or local files with fit and alignment options.
Icon
Renders a glyph from Flutter's built-in Material or Cupertino icon sets at any size and color.
ElevatedButton
A filled button with a shadow that responds to taps — the go-to for primary actions on a screen.
TextButton
A flat button with no border or fill — used for secondary, less important actions.
IconButton
A tappable icon with a built-in touch target — standard for actions inside AppBars and toolbars.
TextField
A text input field the user can type into — connect a TextEditingController to read or set its value.
GestureDetector
Wraps any widget to detect taps, long presses, drags, and pinches without adding any visual change.
MaterialApp
The root widget that sets up Material Design, navigation, theming, and localization for the whole app.
ThemeData
A single object holding all your app's visual decisions — colors, fonts, button shapes, and more.
ColorScheme
The structured set of named colors (primary, surface, error, etc.) Material 3 widgets automatically use.
TextTheme
The set of named text styles (headlineLarge, bodyMedium, etc.) so your typography stays consistent.
Theme.of(context)
Looks up the nearest ThemeData in the widget tree so any widget can read the current app theme.
darkTheme
A second ThemeData you give MaterialApp that automatically switches in when the device is in dark mode.
CupertinoApp
The iOS-style equivalent of MaterialApp — use it for apps that should look and feel native on Apple devices.
MediaQuery.of(context)
Provides screen size, orientation, text scale, and padding info so you can build responsive layouts.
Navigator
Manages a stack of screens — push to go forward, pop to go back, and replace to swap screens.
Navigator.push()
Adds a new screen on top of the stack with a slide transition — the standard way to go to a detail screen.
Navigator.pop()
Removes the top screen and returns to the previous one — can also pass a result value back to the caller.
MaterialPageRoute
Wraps a widget as a navigable screen with the platform-appropriate transition animation.
Named Routes
String-based route identifiers registered in MaterialApp so you navigate by name instead of by widget class.
Navigator.pushReplacement()
Swaps the current screen with a new one without keeping the old screen in the back stack.
WillPopScope
Intercepts the back button press so you can run custom logic — like showing a "discard changes?" dialog.
Dart Null Safety
Sound null safety means non-nullable types cannot hold null values unless you explicitly mark them with ?.
late keyword
Declares a non-nullable variable that is initialized later, but throws if accessed before assignment.
Records
Anonymous immutable value types in Dart 3 that let you bundle positional or named fields without a class.
Pattern Matching
Dart 3 switch patterns let you destructure and validate records, lists, and maps with expressive matching rules.
Sealed Classes
A closed type hierarchy where the compiler can enforce exhaustive handling in switch statements.
Mixins
Reuse method implementations across unrelated classes without adding another inheritance branch.
Extension Methods
Add utility methods to existing types without modifying or subclassing those original types.
typedef
Names a function type so callback signatures are reusable and easier to read across your codebase.
Cascade Notation (..)
Chains multiple operations on the same object without repeating the variable reference.
Intermediate
State management, async UI, lists, animation & advanced navigationInheritedWidget
Flutter's built-in mechanism to efficiently pass data down the tree — the primitive that Provider is built on.
Provider
A popular package wrapping InheritedWidget that makes dependency injection and state sharing straightforward.
Riverpod
A compile-safe, testable evolution of Provider that works outside the widget tree and has no context dependency.
Bloc / Cubit
A pattern that separates UI events from business logic using streams — Cubit is the simpler setState-like version.
ChangeNotifier
A class you extend to hold state and call notifyListeners() — widgets using it rebuild automatically when it fires.
ValueNotifier
A lightweight ChangeNotifier for a single value — change the value and all listeners rebuild instantly.
ValueListenableBuilder
Rebuilds only its subtree when a ValueNotifier changes — avoids rebuilding the whole widget for small state.
Consumer / watch()
Subscribes to a Provider or Riverpod state and rebuilds only this widget when that specific value changes.
GetX
An all-in-one package combining state management, dependency injection, and routing with minimal boilerplate.
MobX
A reactive state library using observables and reactions — state changes automatically propagate to any widget that reads them.
FutureBuilder
Builds different widgets depending on whether a Future is loading, completed, or errored — no manual setState needed.
StreamBuilder
Rebuilds its subtree every time a Stream emits a new value — perfect for real-time data like chat messages.
AsyncSnapshot
The object FutureBuilder and StreamBuilder hand you — it tells you the connection state, data, and any error.
ConnectionState
An enum with four states (none, waiting, active, done) describing where a Future or Stream currently stands.
CircularProgressIndicator
The spinning loading wheel shown while async work completes — place it inside FutureBuilder's waiting branch.
LinearProgressIndicator
A horizontal loading bar — use the determinate version when you know the percentage complete.
RefreshIndicator
Wraps a scrollable and shows a pull-to-refresh spinner, calling your async refresh callback when triggered.
Isolate
A separate execution thread in Dart — use it for heavy CPU work (image processing, JSON parsing) to keep UI smooth.
ListView.builder
Builds list items lazily on demand as the user scrolls — essential for any list with more than a handful of items.
ListView
A scrollable column that builds all children at once — only use for short, fixed-length lists.
ListView.separated
Like ListView.builder but automatically inserts a separator widget between items — great for dividers.
GridView.builder
A lazy grid that renders items in rows and columns only as they scroll into view.
ScrollController
Lets you programmatically scroll a list, read the current position, or listen for scroll events.
SingleChildScrollView
Makes its single child scrollable — use for forms or content that occasionally overflows the screen.
CustomScrollView
A scroll view that takes sliver widgets as children, enabling collapsible headers and mixed list-grid layouts.
SliverAppBar
An AppBar that collapses, expands, or floats as the user scrolls — only works inside a CustomScrollView.
SliverList
The sliver version of a lazy list — used alongside SliverAppBar inside a CustomScrollView.
SliverGrid
The sliver version of a lazy grid — place it after a SliverAppBar for a collapsing header over a grid.
AnimationController
The clock that drives animations — it counts from 0 to 1 over a duration and you map that to any value.
Tween
Maps the 0–1 animation value to a meaningful range — like 0.0 opacity to 1.0, or 0px offset to 200px.
AnimatedBuilder
Rebuilds only its subtree on every animation tick without requiring your widget to extend AnimatedWidget.
AnimatedWidget
A base class that auto-rebuilds whenever a Listenable (like an AnimationController) changes value.
AnimatedContainer
A Container that automatically interpolates its properties (size, color, border) when they change.
AnimatedOpacity
Smoothly fades a widget in or out when you change the opacity value — zero code beyond setting the value.
Hero
Flies a shared widget between two screens during a route transition — the tag must match on both screens.
CurvedAnimation
Wraps an AnimationController to apply an easing curve — makes animations accelerate, decelerate, or bounce.
Curves
A collection of pre-built easing curves (easeIn, bounceOut, elasticIn) you apply to a CurvedAnimation.
AnimatedSwitcher
Cross-fades between two different widgets when its child changes — just swap the child and it animates.
TweenAnimationBuilder
Animates to a new target value whenever it changes — no controller needed, great for simple fire-and-forget transitions.
Form
A container that groups TextFormFields so you can validate and save them all at once with a single call.
TextFormField
A TextField wired for use inside a Form — attach a validator and it shows inline error messages automatically.
GlobalKey<FormState>
A unique key that gives you a direct reference to a Form so you can call validate(), save(), and reset() on it.
TextEditingController
Controls the text and cursor in a TextField — read the current value, set initial text, or clear it programmatically.
FocusNode
Represents keyboard focus for a text field — use it to programmatically focus, unfocus, or move between fields.
InputDecoration
Styles a TextField with a label, hint text, prefix/suffix icons, border shape, and error message display.
AutovalidateMode
Controls when a TextFormField validates itself — on user interaction, always, or only when you call validate().
GoRouter
The official recommended routing package that supports URLs, deep links, and nested navigation with type-safe routes.
Navigator 2.0
The declarative navigation API where the back stack is driven by state — enables full URL-based web navigation.
RouterDelegate
The component in Navigator 2.0 that interprets route state and builds the current page stack declaratively.
RouteInformationParser
Converts URLs into route state objects and back — the bridge between the URL bar and your navigation state.
Deep Linking
Allows external URLs or push notifications to open a specific screen in your app directly.
BottomNavigationBar
The tab bar at the screen's bottom that switches between top-level destinations — each tab maintains its own stack.
NavigationRail
A side navigation component for tablet and desktop layouts where a bottom bar would feel out of place.
Drawer
A panel that slides in from the side when the hamburger icon is tapped — used for secondary navigation options.
Key
A tag that helps Flutter match rebuilt widgets to their existing elements — critical when widgets move in a list.
ValueKey
A key based on a value (like a user ID) — use it in list items to ensure Flutter tracks each item correctly.
GlobalKey
A key that uniquely identifies a widget across the entire app, giving you direct access to its state or RenderObject.
ObjectKey
A key based on object identity — two ObjectKeys are equal only if they wrap the exact same object in memory.
UniqueKey
Generates a new unique key every time — use it to force a widget to be destroyed and recreated on rebuild.
PageStorageKey
Saves and restores scroll positions or tab selections when navigating away from and back to a screen.
http package
The standard Dart HTTP client package for common GET, POST, PUT, and DELETE request workflows.
dio
A feature-rich HTTP client with interceptors, cancellation, retries, and advanced request configuration.
jsonDecode / jsonEncode
Built-in JSON conversion from dart:convert for transforming raw response strings to Map or List structures.
json_serializable
Code generation that creates fromJson and toJson methods so model parsing stays type-safe and maintainable.
freezed
Generates immutable data classes, unions, copyWith, and optional JSON integration for robust model layers.
Retrofit / chopper
Type-safe REST client generators built on top of dio or http so API clients stay declarative.
Error handling
Handle HTTP failures, timeouts, retries, and exceptions like DioException in a predictable way.
Interceptors
Middleware hooks in dio used for logging, auth token injection, and response shaping.
shared_preferences
Simple key-value persistence for primitive data backed by platform-native preference stores.
sqflite
SQLite plugin for Flutter with raw SQL queries, migrations, and transaction support.
drift
A type-safe, reactive SQLite ORM with code generation and stream-friendly query APIs.
Hive
A fast lightweight NoSQL box store with minimal overhead and broad platform support.
Isar
A high-performance embedded NoSQL database with Dart-native queries and indexing features.
flutter_secure_storage
Stores sensitive values in encrypted platform keystores like iOS Keychain and Android Keystore.
Caching strategies
Patterns like cache-then-network and stale-while-revalidate to balance freshness, latency, and offline behavior.
Advanced
Render pipeline, custom painting, performance, platform & testingRenderObject
The base class for anything that can be sized, laid out, and painted — the lowest-level building block in Flutter.
RenderBox
A RenderObject that uses a two-dimensional box model for its layout — most Flutter widgets are backed by one.
Constraints
Flutter's layout rule: parents pass constraints (min/max width and height) down, children report their chosen size back up.
performLayout()
The method where a RenderObject measures itself and positions its children — never call it directly.
paint()
The method where a RenderObject draws itself onto the canvas — the final step before pixels hit the screen.
Layer Tree
The GPU-composited output of the render tree — Flutter uploads layers to the GPU to produce the final frame.
PipelineOwner
Coordinates the render pipeline — collects dirty nodes, triggers layout, compositing, and painting in order.
RendererBinding
The glue between the engine and the render tree — it drives a new frame whenever the screen needs refreshing.
LeafRenderObjectWidget
A widget backed by a RenderObject with no children — the base class for primitives like Image or RawImage.
CustomPainter
A class you extend to draw anything pixel-perfect using a Canvas — graphs, charts, custom shapes, or illustrations.
CustomPaint
The widget that hosts your CustomPainter — it provides the canvas and calls paint() on every repaint.
Canvas
The drawing surface you get inside a CustomPainter — draw paths, circles, images, text, and shadows on it.
Paint
The brush you pass to canvas drawing calls — controls color, stroke width, fill vs stroke, and blend mode.
Path
A description of a complex shape made from lines, curves, and arcs — draw it with canvas.drawPath().
shouldRepaint()
Tells Flutter whether the canvas needs repainting — return false when nothing changed to skip unnecessary work.
BlendMode
Controls how a new drawing layer combines with what's already below — multiply, screen, overlay, and more.
MaskFilter
Applies a blur mask around painted shapes — use MaskFilter.blur() for drop shadows and glowing effects.
Shader / Gradient
A shader fills a Paint with a gradient or pattern — pass it to paint.shader for custom fills on any shape.
TickerProviderStateMixin
A mixin that provides the Ticker (60fps pulse) that AnimationController needs — add it to any State class.
Interval
Limits an animation to play only within a sub-range of 0–1 — the key building block for staggered animations.
Staggered Animations
Multiple animations sharing one controller but each using an Interval to fire at different moments in sequence.
Physics-based Animation
Animations driven by simulated physical forces (spring, friction) so they feel natural and momentum-aware.
SpringSimulation
Simulates a physical spring with mass, stiffness, and damping — produces elastic, overshooting motion.
AnimationStatusListener
A callback that fires when an animation completes, reverses, or starts — use it to chain or loop animations.
Rive / Lottie
Third-party packages that play designer-created vector animations exported from Rive or Adobe After Effects.
implicit vs explicit animation
Implicit (AnimatedContainer) handles animation for you; explicit (AnimationController) gives full manual control.
FlutterTween
A Tween that sequences multiple Tweens end-to-end — plays color, then size, then opacity in a single chain.
const constructor
Marks a widget as compile-time constant so Flutter reuses the same object and never rebuilds it unnecessarily.
RepaintBoundary
Isolates a subtree into its own GPU layer so it can repaint independently without affecting the rest of the screen.
AutomaticKeepAliveClientMixin
Prevents a tab's widget from being disposed when swiped away so its state (scroll position, data) is preserved.
DevTools
Flutter's official suite of debugging tools — inspect the widget tree, profile CPU/GPU usage, and detect jank.
Performance Overlay
A real-time graph overlaid on the app showing GPU and UI thread frame times — instantly reveals dropped frames.
LayoutBuilder
Gives your widget the parent's constraints at build time so you can make decisions based on available space.
Selector (Provider)
Rebuilds only when a specific field of a Provider changes — prevents unnecessary rebuilds from unrelated state.
ListView keys
Assigning stable keys to list items lets Flutter reuse elements correctly and animate item insertions and removals.
computeAsync / Isolate
Runs heavy work on a background Isolate so the UI thread stays smooth at 60fps during expensive computations.
Impeller
Flutter's next-generation rendering engine that pre-compiles shaders at startup — eliminates jank from shader compilation.
MethodChannel
A two-way bridge between Dart and native (Android/iOS) code for calling platform APIs Flutter can't reach.
EventChannel
A one-way stream from native to Dart — use it for continuous native events like sensor data or location updates.
BasicMessageChannel
A simple bidirectional channel for passing raw messages between Dart and native code with a custom codec.
Platform.isAndroid / isIOS
Runtime checks that let you conditionally run different code or show different widgets per operating system.
PlatformView
Embeds a native Android or iOS view (like a MapView or WebView) directly inside the Flutter widget tree.
FlutterPlugin
The native side of a plugin — it registers a MethodChannel handler in Kotlin/Swift and implements the API.
dart:ffi
Foreign Function Interface — calls native C libraries directly from Dart without the overhead of a MethodChannel.
SafeArea
Adds padding to keep content away from device notches, status bars, and home indicators automatically.
WidgetTester
The test helper Flutter gives you to pump widgets, interact with them, and assert on their state.
pumpWidget()
Renders a widget tree into the test environment so you can interact with it and make assertions.
pump()
Advances the frame clock by one tick — call it after an action to let animations or async work complete.
find
A utility to locate widgets by type, text, key, or semantics within the pumped widget tree.
expect()
Asserts that a found widget matches a matcher like findsOneWidget, findsNothing, or findsNWidgets.
testWidgets()
The test function for widget tests — provides a WidgetTester and runs inside a fake Flutter environment.
Golden Tests
Renders a widget, captures a screenshot, and compares it to a saved image to catch unintended visual changes.
mockito / mocktail
Libraries for creating mock objects in Dart tests so you can fake network calls and services in widget tests.
Integration Tests
End-to-end tests that run on a real device or emulator, tapping through actual screens like a real user would.
Semantics
Wraps a widget with accessibility descriptions and actions — also enables finding widgets by label in tests.
Semantics widget
Adds a description, label, and interaction hints to any widget so screen readers can understand and announce it.
MergeSemantics
Combines the semantics of all children into a single node — so a row of icon+text is read as one item.
ExcludeSemantics
Hides a widget from the accessibility tree entirely — use for purely decorative elements.
SemanticsDebugger
An overlay that visualizes the semantics tree on screen so you can quickly check what TalkBack/VoiceOver sees.
Tooltip
Shows a short descriptive label on long-press — also feeds the accessibility label for icon-only buttons.
Focus & FocusTraversalGroup
Controls the order keyboard or switch-access focus moves between interactive elements on a screen.
GitHub Actions
YAML-based pipelines that build, test, and distribute Flutter apps on push and pull request workflows.
Codemagic
A Flutter-focused CI/CD platform with built-in workflows for code signing and store publishing.
Fastlane
Automation tooling for screenshots, signing, and App Store or Play Store release steps.
Firebase App Distribution
Shares pre-release app builds directly with testers before public store rollout.
Android App Bundle (.aab)
The recommended Android release artifact where Play creates optimized split APKs per device.
iOS Archive & Export
Xcode archive flow that produces signed IPA artifacts for App Store Connect delivery.
Code Signing
Managing Android keystores and iOS provisioning profiles or certificates for trusted releases.
Flavors for environments
Separate dev, staging, and production app variants using Flutter flavors and config isolation.
No concepts found matching your search.