Flutter Performans Optimizasyonu: Kapsamlı Rehber

class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = class="code-number">0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          class=class="code-string">"code-comment">// Bu pahali widget, _counter her degistiginde yeniden olusturulur
          ExpensiveHeader(),
          ExpensiveProductList(),
          Text(class="code-string">'Sayac: $_counter'),
          ElevatedButton(
            onPressed: () => setState(() => _counter++),
            child: Text(class="code-string">'Artir'),
          ),
        ],
      ),
    );
  }
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          const ExpensiveHeader(),
          const ExpensiveProductList(),
          class=class="code-string">"code-comment">// Sadece bu kucuk widget yeniden olusturulur
          CounterDisplay(),
        ],
      ),
    );
  }
}

class CounterDisplay extends StatefulWidget {
  const CounterDisplay({super.key});

  @override
  State<CounterDisplay> createState() => _CounterDisplayState();
}

class _CounterDisplayState extends State<CounterDisplay> {
  int _counter = class="code-number">0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(class="code-string">'Sayac: $_counter'),
        ElevatedButton(
          onPressed: () => setState(() => _counter++),
          child: Text(class="code-string">'Artir'),
        ),
      ],
    );
  }
}

class=class="code-string">"code-comment">// Yanlis - her buildclass="code-string">'de yeni ornek
Container(
  padding: EdgeInsets.all(class="code-number">16),
  child: Text('Merhabaclass="code-string">'),
)

class=class="code-string">"code-comment">// Dogru - derleme zamani sabiti, rebuild sirasinda atlanir
const Padding(
  padding: EdgeInsets.all(class="code-number">16),
  child: Text('Merhaba'),
)

class=class="code-string">"code-comment">// Yanlis - class="code-number">10.000 elemanin hepsini aninda olusturur
ListView(
  children: List.generate(class="code-number">10000, (i) => ProductCard(product: products[i])),
)

class=class="code-string">"code-comment">// Dogru - sadece gorunen elemanlari ve kucuk bir tamponu olusturur
ListView.builder(
  itemCount: products.length,
  itemBuilder: (context, i) => ProductCard(product: products[i]),
)

class=class="code-string">"code-comment">// Yanlis - tam cozunurluk bellege yuklenir
Image.network(class="code-string">'https:class=class="code-string">"code-comment">//example.com/buyuk-foto.jpg')

class=class="code-string">"code-comment">// Dogru - sadece ihtiyaciniz kadari cozumlenir
Image.network(
  class="code-string">'https:class=class="code-string">"code-comment">//example.com/buyuk-foto.jpg',
  cacheWidth: class="code-number">400,  class=class="code-string">"code-comment">// Retina icin goruntuleme genisliginin class="code-number">2 kati
  cacheHeight: class="code-number">300,
)

class=class="code-string">"code-comment">// Yanlis - arayuzu bloke eder
final data = jsonDecode(devJsonString);

class=class="code-string">"code-comment">// Dogru - ayri bir isolate'e yikle
final data = await compute(jsonDecode, devJsonString);

class=class="code-string">"code-comment">// Yanlis - tum alt agac icin offscreen buffer olusturur
Opacity(
  opacity: class="code-number">0.5,
  child: BuyukKarmasikWidget(),
)

class=class="code-string">"code-comment">// Daha iyi - sadece metin/ikon saydamligina ihtiyaciniz varsa
Text(class="code-string">'Merhaba', style: TextStyle(color: Colors.black.withOpacity(class="code-number">0.5)))

class=class="code-string">"code-comment">// Sik degisen widget'lari sarin
RepaintBoundary(
  child: AnimatedProgressIndicator(),
)

class=class="code-string">"code-comment">// Yanlis - her build'de siralar
@override
Widget build(BuildContext context) {
  final sorted = List.of(items)..sort((a, b) => a.date.compareTo(b.date));
  return ListView.builder(
    itemCount: sorted.length,
    itemBuilder: (ctx, i) => ItemTile(sorted[i]),
  );
}

class=class="code-string">"code-comment">// Dogru - veri degistiginde sirala, sonucu onbellekle
late List<Item> _sortedItems;

void _updateItems(List<Item> items) {
  _sortedItems = List.of(items)..sort((a, b) => a.date.compareTo(b.date));
  setState(() {});
}

class=class="code-string">"code-comment">// ListView icinde yanlis
IntrinsicHeight(
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [LeftPanel(), RightPanel()],
  ),
)

class=class="code-string">"code-comment">// Daha iyi - sabit yukseklik veya LayoutBuilder kullanin
SizedBox(
  height: class="code-number">120,
  child: Row(
    children: [LeftPanel(), RightPanel()],
  ),
)

flutter run --profile

class _MyWidgetState extends State<MyWidget> {
  late StreamSubscription _subscription;

  @override
  void initState() {
    super.initState();
    _subscription = someStream.listen((data) {
      setState(() { class=class="code-string">"code-comment">/* guncelle */ });
    });
  }

  class=class="code-string">"code-comment">// Bunu unutursaniz, abonelik bu State nesnesine
  class=class="code-string">"code-comment">// sonsuza kadar referans tutar
  @override
  void dispose() {
    _subscription.cancel();
    super.dispose();
  }
}

class _AnimatedWidgetState extends State<AnimatedWidget>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: class="code-number">300),
    );
  }

  @override
  void dispose() {
    _controller.dispose(); class=class="code-string">"code-comment">// Kritik!
    super.dispose();
  }
}

class=class="code-string">"code-comment">// Tehlikeli - closure context'i yakalar, context ise Element agacini tutar
void _onTap(BuildContext context) {
  Future.delayed(Duration(seconds: class="code-number">5), () {
    class=class="code-string">"code-comment">// class="code-number">5 saniye icinde widget dispose edilirse, bu context gecersiz olur
    Navigator.of(context).push(...);
  });
}

class=class="code-string">"code-comment">// Daha guvenli - mounted kontrolu yapin
void _onTap(BuildContext context) {
  Future.delayed(Duration(seconds: class="code-number">5), () {
    if (!mounted) return;
    Navigator.of(context).push(...);
  });
}

CustomScrollView(
  slivers: [
    SliverAppBar(floating: true, title: Text(class="code-string">'Urunler')),
    SliverGrid(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: class="code-number">2,
      ),
      delegate: SliverChildBuilderDelegate(
        (context, i) => ProductCard(products[i]),
        childCount: products.length,
      ),
    ),
  ],
)

final _counter = ValueNotifier<int>(class="code-number">0);

class=class="code-string">"code-comment">// Sadece bu builderclass="code-string">'in alt agaci yeniden olusturulur
ValueListenableBuilder<int>(
  valueListenable: _counter,
  builder: (context, value, child) {
    return Text('Sayac: $value');
  },
)