Irbisa · Cheatsheet
Performance
Rendering pipeline, jank, memory leaks, profiling tools
How do you cut unnecessary widget rebuilds (
const, smaller widgets,select)?// before: one counter rebuilds the whole page on every tapclass _CatalogPageState extends State<CatalogPage> { int _count = 0; @override Widget build(BuildContext context) => Column(children: […What is the difference between a rebuild and a repaint, and what does
RepaintBoundaryactually do?import 'package:flutter/rendering.dart'; void main() { // Debug only: a layer's border changes colour every time it repaints debugRepaintRainbowEnabled = true; runApp(const MyApp());…How do you profile a Flutter app, and what do the UI and raster bars in DevTools tell you?
A
ListViewwith thousands of items stutters. How do you make a long list smooth?class FeedList extends StatelessWidget { const FeedList({super.key, required this.posts}); final List<Post> posts; @override Widget build(BuildContext context) {…Find the bug: this order list drops frames on every fling, even though it uses
ListView.builder.class OrdersList extends StatelessWidget { const OrdersList({super.key, required this.orders, required this.query}); final List<Order> orders; // about 5,000 orders final String query; @override Widget build(BuildContext context) => ListView.builder( itemCount: orders.where((o) => o.title.contains(query)).length, itemBuilder: (context, i) { final visible = orders.where((o) => o.title.contains(query)).toList() ..sort((a, b) => b.date.compareTo(a.date)); return OrderTile(order: visible[i]); }, );}This spinner makes the whole page rebuild 60 times a second. Why, and how do you scope the animation down?
class _SyncPageState extends State<SyncPage> with SingleTickerProviderStateMixin { late final _ctrl = AnimationController( vsync: this, duration: const Duration(seconds: 1)) ..addListener(() => setState(() {})) ..repeat(); @override Widget build(BuildContext context) => Column(children: [ Transform.rotate( angle: _ctrl.value * 2 * pi, child: const Icon(Icons.sync), ), Expanded(child: HeavyReport(rows: widget.rows)), ]);}This chart repaints on every parent rebuild even though its data never changes. What is wrong?
class ChartPainter extends CustomPainter { ChartPainter(this.points); final List<double> points; @override void paint(Canvas canvas, Size size) { // draws a polyline through points } @override bool shouldRepaint(ChartPainter oldDelegate) => true;} // In the parent's build():CustomPaint(painter: ChartPainter(state.points.toList()))Why are
Opacity,BackdropFilterand anti-aliased clips expensive, and what do you use instead?// before: an offscreen layer just to dim one labelOpacity(opacity: 0.5, child: Text('Archived')) // after: the alpha is part of the paint, no extra layerText( 'Archived',…What is Impeller, why did it replace Skia, and what happened to shader warm-up?
What is tree shaking in a Flutter release build, and why can a non-constant
IconDatabreak it?// wrong: the glyph is chosen at runtime, so the font cannot be tree shakenIcon(IconData(category.codePoint, fontFamily: 'MaterialIcons')) // right: every glyph is a compile-time constantconst categoryIcons = <String, IconData>{ 'food': Icons.restaurant,…Pushing a details route drops frames during the first part of the transition. What is happening and how do you fix it?
What causes jank in Flutter, and how do you approach fixing it in a real app?
How do you find and fix memory leaks in a Flutter app?
class _ChatState extends State<ChatScreen> { final _input = TextEditingController(); final _scroll = ScrollController(); StreamSubscription<Message>? _sub; Timer? _typing;…How do you speed up cold start, and why is an app often slow only on its first launch?
Future<void> main() async { WidgetsFlutterBinding.ensureInitialized(); // Only what the first screen cannot render without final prefs = await SharedPreferences.getInstance(); runApp(App(prefs: prefs));…The app download is 90 MB and product wants it halved. How do you find the weight and cut it?
# Size report per package, library and asset (open the JSON in DevTools > App Size)flutter build appbundle --release --analyze-size --target-platform android-arm64flutter build ipa --release --analyze-size # Smaller binary: symbols move out; keep them for crash symbolicationflutter build appbundle --release \…DevTools shows a 40 MB Dart heap, but the OS reports 500 MB and kills the app in the background. Where is the memory?
Your app is smooth on your phone. How do you monitor its performance for real users in production?
void startFrameMonitoring(void Function(Map<String, double>) report) { final buildMs = <double>[]; final rasterMs = <double>[]; SchedulerBinding.instance.addTimingsCallback((List<FrameTiming> timings) { for (final t in timings) {…How do you stop a frame-time regression from being merged, instead of discovering it after the release?
// integration_test/scroll_perf_test.dartvoid main() { final binding = IntegrationTestWidgetsFlutterBinding.ensureInitialized(); testWidgets('feed scrolls within budget', (tester) async { await tester.pumpWidget(const App()); await tester.pumpAndSettle();…