Flutter rebuild bütçesi ve state management: ince optimizasyon taktikleri

Flutter state management için rebuild maliyetini ölçme ve profil çıkarma

Rebuild maliyetini ölçmeden optimizasyon yapmak körlemesine müdahaledir. Somut adım: uygulamayı profile modda çalıştırıp Flutter DevTools Timeline ile Framework Build olaylarını kaydedin. Komut:

flutter run --profile -d 

sonra DevTools'u açmak için terminalde çıkan URL'yi kullanın veya

dart devtools

çalıştırın. Timeline'da 'Framework' filtresini seçin, Build, Layout, Paint etiketlerini yakalayın ve 'Event Breakdown' ile ms olarak kaç milis harcandığını not edin.

Ekstra ölçüm için build fazlarını özel olarak işaretlemek üzere dart:developer Timeline API'sini kullanın; bu, hangi widget subtree'lerinin en çok zaman aldığını gösteren çerçeve-level trace üretir. Örnek:

import 'dart:developer';

class TraceWidget extends StatelessWidget {
  final Widget child;
  final String name;
  const TraceWidget({required this.name, required this.child});

  @override
  Widget build(BuildContext context) {
    return Timeline.timeSync('build-$name', () {
      return child;
    });
  }
}

// Kullanım: TraceWidget(name: 'HomeHeader', child: HomeHeader())

Bu trace'ler DevTools timeline'unda 'build-HomeHeader' olarak görünür ve gerçek ms değerlerini verir.

Yığılma azaltma: Selector, const, ValueKey ve rebuild sınırlandırma

Genelde hatalı yapılan şey, bütün subtree'i notifyListeners veya setState ile yeniden çizdirmektir. Provider/Selector kullanarak parçaları izole edin: Provider paketinde Selector ile sadece gerekli dilimi abone edin. Kod örneği:

class Counter extends ChangeNotifier {
  int _value = 0;
  int get value => _value;
  set value(int v) {
    if (_value == v) return; // equality check - önemli
    _value = v;
    notifyListeners();
  }
}

// Widget tarafı
Selector(
  selector: (_, c) => c.value,
  builder: (_, value, __) => Text('$value'),
)

Bu pattern ile diğer widget'lar rebuild olmaz; profiling ile (DevTools Timeline) öncesi/sonrası Build event sayısını karşılaştırın.

Ayrıca const constructor ve ValueKey kullanımı ile widget identity maliyetini azaltın. Rebuild'i sınırlamak için Stateless yerine const constructor kullanın:

class ItemTile extends StatelessWidget {
  final String id;
  const ItemTile({required this.id, Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) => Text(id);
}

// List kullanımı
ListView.builder(
  itemBuilder: (_, i) => ItemTile(key: ValueKey(items[i].id), id: items[i].id),
)

Edge case: ValueKey kullanmak yerine her seferinde yeni bir key üretirseniz rebuild sayısını artırırsınız; key üretimini deterministik yapın.

Isolate ve TransferableTypedData ile arka plan işleme - maliyet ve ölçüm

CPU-bound işler (JSON parse, resim decode, kriptografi) main thread'de rebuild tetikler. compute/Isolate kullanın, ama isolate mesajlaşma kopyalama maliyeti vardır. Büyük byte array'leri kopyalamamak için TransferableTypedData kullanın. Ölçüm için DevTools CPU profiler'ı kullanın: Profile > CPU Profiler > Record. Aşağıda TransferableTypedData ile örnek:

import 'dart:isolate';
import 'dart:typed_data';

// Worker
void parseWorker(TransferableTypedData ttd) {
  final bytes = ttd.materialize().asUint8List();
  // parse, heavy work
}

// Main
final bytes = await readFileBytes();
final ttd = TransferableTypedData.fromList([bytes]);
await Isolate.spawn(parseWorker, ttd);

Bu yaklaşımın etkisini görmek için önce timeline ve CPU profile kaydı alın, sonra TransferableTypedData ile tekrar deneyin; CPU sample oranı ve main-thread frame zamanları düşmelidir.

Alternatif olarak, kısa görevler için Flutter'ın compute() helper'ını kullanmak hızlı çözümdür:

final result = await compute(parseHeavyJson, jsonString);

Ancak compute() arkasında da serialization olduğu için büyük Uint8List'lerde TransferableTypedData daha etkilidir. Ölçümlerde istenen metrikler: main thread frame time (ms), GC frequency, ve isolate CPU kullanım yüzdesi.

Regresyon profilleme workflow: değişiklik bazlı ölçüm ve karşılaştırma

Her optimizasyondan önce ve sonra aynı senaryoyu kaydedin. Adımlar: 1) Cihazı temiz boot ile başlatın (adb reboot optional), 2) uygulamayı

flutter run --profile -d 

ile açın, 3) DevTools Performance sekmesinde 'Record' yapıp belirli etkileşimi tekrarlayın, 4) 'Save' ile trace.json kaydedin. İki trace'i karşılaştırmak için DevTools'ta iki trace'i yan yana açın ve toplam 'Framework Build' ms, 'Rasterizer' ms ve jank sayısını karşılaştırın. Bu karşılaştırmanın otomatikleştirilmesi için CI'de trace dosyalarını artefact olarak saklayıp, bir script ile toplam ms'i çekip numeric diff alın.

CI entegrasyonu örneği: basit bir Python scripti ile trace.json'daki timeline event'lerini parse edip metrik çıkartın. Örnek komut satırı:

flutter build apk --profile --analyze-size
# profil trace kaydı için manuel reproduction
# CI: curl -O http://devtools-host/saved_trace.json
python tools/trace_summary.py saved_trace.json --metric framework_build_ms

Böylece pull request'te otomatik olarak 'rebuild ms regresyonu' tespit edebilirsiniz. Deneysel not: trace dosyaları büyük olacağından saklama ve transfer maliyeti yüksek olabilir; sadece özet metrikleri CI'ye gönderin.

APK boyutu, sembol analizi ve runtime init maliyetleri (uygulama açılışı)

Uygulama açılış gecikmesini ölçmek için Android için logcat'te ActivityManager ve flutter araçlarıyla birlikte aşağıyı kullanın:

flutter build appbundle --analyze-size
# Oluşan '.apk.json' dosyasını DevTools App Size ile açın
flutter build apk --split-per-abi --release
adb logcat -c
adb shell am start -W -n com.example/.MainActivity
adb logcat -d | grep -E "Displayed|I/flutter"

App size analizinde hangi native kütüphanelerin en çok yer kapladığını görüp gereksiz .so dosyalarını temizleyin veya split-per-abi ile kullanın.

Runtime init maliyeti için AOT snapshot ve native-library yüklenme zamanlarını loglayın; örneğin Flutter ın debug print'leriyle ilk frame zamanını ölçmek için main() içinde timestamp alın:

void main() async {
  final t0 = DateTime.now();
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
  WidgetsBinding.instance.addPostFrameCallback((_) {
    final t1 = DateTime.now();
    debugPrint('time-to-first-frame: ${t1.difference(t0).inMilliseconds} ms');
  });
}

Bu metrik ile APK boyutu değişikliklerinin runtime açılış gecikmesine etkisini ölçebilirsiniz; ardından 'flutter build apk --shrink' ve sembol analiz ile hangi paketlerin init maliyeti getirdiğini daraltın.

Sık Sorulan Sorular

Flutter state management ile rebuild sayısını nasıl hızlıca ölçerim?

En hızlı yol: uygulamayı

flutter run --profile -d 

ile başlatıp Flutter DevTools Timeline'ı kullanmaktır. Timeline'da 'Framework' filtresini seçin, Build event'lerini filtreleyin ve toplam build ms ile event count'u (build sayısı) kaydedin. Ayrıca Timeline.timeSync ile belirli subtree'leri işaretleyip daha detaylı ms ölçümü alabilirsiniz.

Cross platform mobil uygulama geliştirme sırasında büyük JSON parse maliyetini nasıl minimize ederim?

Main thread'i bloke etmemek için Isolate veya compute() kullanın. Büyük byte dizileri için TransferableTypedData kullanarak kopyalamayı önleyin ve Isolate.spawn ile çalıştırın. Profil etmek için DevTools CPU Profiler'ı record ederek main thread kullanımını karşılaştırın.

Flutter mobil uygulama geliştirme eğitiminde (flutter eğitimi, flutter kursu) hangi profil araçlarını öğretmeliyim?

Temel olarak Flutter DevTools Timeline, DevTools Memory ve CPU profiler, Android Studio/IntelliJ profilleri ve adb logcat komutlarını öğretin. Pratik ödev: öğrencilere

flutter run --profile

ile trace çıkarma, Timeline.timeSync ile işaretleme ve TransferableTypedData ile isolate mesajlaşma uygulamaları yaptırın; önce/sonra karşılaştırması zorunlu olsun.