flutter-performance
Installation
SKILL.md
Flutter Performance
Hold a steady 60 fps (<=16 ms/frame; <=8 ms on 120 Hz) on a floor device (low-end Android / older iPhone). Performance is a property you measure in profile mode, not one you assert. It comes from rebuilding less, painting cheaply, and keeping both the UI thread and the raster thread free.
Non-negotiable rules
consteverything legal. Aconstsubtree is skipped on rebuild — the framework short-circuits it by identity. Keepprefer_const_constructorson as an error; a non-const literal that could be const is a lint failure, not a preference.- Shrink the rebuild scope to the smallest changing widget. Never
ref.watch(provider)for a whole state object when one field changed — watchprovider.select((s) => s.field). A HUD counter tick must never rebuild a heavy sibling. Rebuild scope is the single biggest lever on build-thread cost. - Lazy everything long.
ListView.builder/GridView.builder/ slivers for variable or unbounded content.ListView(children: items.map(...).toList())builds every off-screen row up front — refuse it for anything not tiny and fixed. - No expensive work in
build(). NojsonDecode, sort, regex,DateTimemath, file/network, or large allocation —build()may run every frame. Compute in the Notifier/ViewModel once and cache the result in immutable state. - Heavy CPU off the UI isolate. Parse large payloads, process images, crunch numbers in
compute()or a spawnedIsolate. Blocking the UI thread is guaranteed jank; the raster thread cannot save you. - Size image decode to the display slot.
cacheWidth/cacheHeightorResizeImage, correct asset resolutions,precacheImagefor above-the-fold art. Decoding a 4000 px source into a 100 px box spikes memory and OOMs cheap phones. - Prefer the cheapest widget that does the job.
ColoredBox/DecoratedBoxoverContainer,SizedBoxfor spacing,FadeTransition/AnimatedOpacityover theOpacitywidget in hot paths. AvoidClipPath/saveLayerinside scrolling lists — they force an offscreen buffer on the raster thread. RepaintBoundaryaround costly, independently-repainting subtrees (an animation, a chart, a live indicator) so its repaint does not re-raster its neighbours. Do not sprinkle boundaries everywhere — each is a compositor layer that costs memory.- Pass expensive children through
child:.AnimatedBuilder/ValueListenableBuilder/StreamBuilderrebuild only thebuilder; hand the unchanging subtree in viachild:so it is built once, not per frame. - Dispose to avoid leaks.
AnimationControllers, gesture recognizers, stream subscriptions, timers,TextEditingControllers, caches — released indispose()(widgets) orref.onDispose(providers).autoDisposescoped session state so it does not survive the screen. - Measure in PROFILE mode on a real floor device with DevTools. Debug timings are meaningless (JIT, asserts). Watch the raster thread as well as the UI thread —
saveLayer/blur/clip cost shows there, not in Dart. Never ship a frame-budget number that was asserted, not measured.