State ve performans

setState'in maliyetini ve neyi rebuild edeceğini öğrenirsin.

setState'in maliyeti

Her setState çağrısı, ilgili widget'ın alt ağacını (subtree) yeniden inşa eder. Yani build metodu yeniden çalışır ve widget ağacı yeniden oluşturulur.

setState(() { _sayac++; });
// yalnızca bu widget'ın alt ağacı
// rebuild edilir

Ebeveyn widget'lar etkilenmez.

Rebuild kapsamı

setState yalnızca o State'e ait widget'ı yeniden inşa eder; ebeveyn widget'ların build metodu çağrılmaz. Bu yüzden büyük widget ağaçlarında state'i mümkün olduğunca aşağıya tutmak performansı artırır.

class Buyuk extends StatelessWidget {
  Widget build(BuildContext context) {
    // Buyuk rebuild olmaz
    return Kucuk();
  }
}

State'i küçük bir subtree'te tutarsan rebuild maliyeti düşer.

Uygulama Ebeveyn stateless, çocuk stateful sayaç

Ebeveyn stateless bir widget olsun. Sayac stateful widget'ı _sayac tutsun ve initState'te print('Sayac oluşturuldu') çağırsın. Butona basıldığında setState ile _sayac'ı artır.

Örnek çözümü göster

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Ebeveyn());
  }
}

class Ebeveyn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Sayac()),
    );
  }
}

class Sayac extends StatefulWidget {
  @override
  _SayacState createState() => _SayacState();
}

class _SayacState extends State<Sayac> {
  int _sayac = 0;

  @override
  void initState() {
    super.initState();
    print('Sayac oluşturuldu');
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('$_sayac'),
        ElevatedButton(
          onPressed: () {
            setState(() {
              _sayac++;
            });
          },
          child: Text('Artır'),
        ),
      ],
    );
  }
}

Kendini test et

setState çağrıldığında hangisi yeniden inşa edilir?
- setState tüm uygulamayı yeniden inşa eder
- setState ebeveyn widget'ı yeniden inşa eder ama çocukları etkilemez
- setState yalnızca o State'in alt ağacını yeniden inşa eder
- setState hiçbir şeyi yeniden inşa etmez
Cevabı göster

setState yalnızca o State'in alt ağacını yeniden inşa eder — setState yalnızca o State'e ait widget'ı ve alt ağacını yeniden inşa eder; ebeveynlerin build metodu çağrılmaz.

setState'ten sonra hangi metod çalışır

class _MyState extends State<MyWidget> {
  int x = 0;
  @override
  Widget ____(BuildContext context) {
    return Text('$x');
  }
}

Cevabı göster

class _MyState extends State<MyWidget> {
  int x = 0;
  @override
  Widget build(BuildContext context) {
    return Text('$x');
  }
}

Rebuild ve performans parçaları

setState

Yalnızca o State'in alt ağacını yeniden inşa eder
Subtree

Bir widget'ın kendisi ve tüm çocukları
Büyük ağaçta state aşağıda

Rebuild maliyetini düşürür
Ebeveyn widget

setState'ten etkilenmez

Sıradaki ders: Özet - setState

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler