Özet - setState

setState ve lifting pattern'ini birleştirerek sayaç ekranı yaparsın.

Özet - setState

Bu bölümde üç şey öğrendin: setState bir State'i dirty işaretler ve sonraki frame'de build'i yeniden çalıştırır; lifting state up ile state'i kardeşlerin ortak ebeveynine taşıyıp callbacklerle çocuklara iletirsin; mounted kontrolü ile async sonrası güvenli setState yaparsın.

if (mounted) {
  setState(() { _sayac++; });
}

State'i mümkün olduğunca küçük tut ve her async sonrası mounted'ı kontrol et.

Uygulama Sayaç ekranı: setState + lifting + mounted

SayacEkrani stateful widget'ında _sayac ve _durum tut. _artir ve _azalt metotları setState ile _sayac'ı değiştirsin. _durumYukle async metodu 100 ms bekleyip if (mounted) ile _durum'u 'hazır' yapsın. initState içinde print('başlangıç: $_sayac') çağır ve _durumYukle'yi başlat. Gosterici stateless widget'ı deger alsın.

Ö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: SayacEkrani());
  }
}

class SayacEkrani extends StatefulWidget {
  @override
  _SayacEkraniState createState() => _SayacEkraniState();
}

class _SayacEkraniState extends State<SayacEkrani> {
  int _sayac = 0;
  String _durum = 'bekliyor';

  Future<void> _durumYukle() async {
    await Future.delayed(Duration(milliseconds: 100));
    if (mounted) {
      setState(() {
        _durum = 'hazır';
      });
    }
  }

  void _artir() {
    setState(() {
      _sayac++;
    });
  }

  void _azalt() {
    setState(() {
      _sayac--;
    });
  }

  @override
  void initState() {
    super.initState();
    print('başlangıç: $_sayac');
    _durumYukle();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Sayaç - $_durum')),
      body: Center(child: Gosterici(deger: _sayac)),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: _azalt,
            child: Icon(Icons.remove),
          ),
          SizedBox(width: 8),
          FloatingActionButton(
            onPressed: _artir,
            child: Icon(Icons.add),
          ),
        ],
      ),
    );
  }
}

class Gosterici extends StatelessWidget {
  final int deger;
  Gosterici({required this.deger});

  @override
  Widget build(BuildContext context) {
    return Text('$deger', style: TextStyle(fontSize: 48));
  }
}

Kendini test et

Async bir Future bekledikten sonra setState'i güvenli çağırmak için ne yapmalısın?
- Önce if (mounted) kontrolü yap
- Önce dispose çağır
- Önce initState'i tekrar çağır
- Önce Future'i iptal et
Cevabı göster

Önce if (mounted) kontrolü yap — Async sonrası widget dispose edilmiş olabilir; if (mounted) ile State'in hâlâ ağaçta olduğu doğrulanır, sonra setState çağrılır.

Çocuğun callback field'ını tanımla

class Dugme extends StatelessWidget {
  final VoidCallback ____;
  Dugme({required this.onTikla});
  @override
  Widget build(BuildContext context) => Text('Düğme');
}

Cevabı göster

class Dugme extends StatelessWidget {
  final VoidCallback onTikla;
  Dugme({required this.onTikla});
  @override
  Widget build(BuildContext context) => Text('Düğme');
}

setState bölümünün parçaları

setState

State değişikliğini framework'e bildirir
mounted

Async sonrası setState için güvenlik kontrolü
Lifting state up

Kardeşlerin ortak ebeveynine state taşır
Callback

Çocuğun ebeveyne olay bildirme yolu

Sıradaki ders: Provider nedir?

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler