Flutter

Flutter setState Fonksiyonu

Herkese merhaba, Flutter yazılarımıza kaldığımız yerden devam ediyoruz. Bu yazımızda setState fonksiyonunu anlatacağım. Hadi başlayalım !

Kullanımı

Flutter’da setState() fonksiyonu, Stateful Widget kullanırken durum nesnesinde yapılan değişikliklerin widget ağacına yansıtılması için kullanılır. Bu fonksiyon, durum nesnesindeki değişiklikleri algılayarak widget’in yeniden oluşturulmasını sağlar.

Örnekler

Aşağıda, setState() fonksiyonunun kullanımına örnekler verilmiştir:

Bir Değişkenin Değerini Değiştirme

  1. Basit bir örnek:
class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Bu örnekte, _incrementCounter() fonksiyonu kullanılarak _counter değişkeninin değeri setState() fonksiyonu aracılığıyla arttırılır. setState() fonksiyonu, değişkenin değeri değiştiğinde widget ağacının yeniden yapılandırılmasını sağlar.

Bir Değişkenin Değerinin Birden Fazla Faktörle Değiştirme

  1. Bir değişkenin değerinin birden fazla faktörle değiştirildiği bir örnek:
class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _counter = 0;
  int _stepSize = 1;

  void _incrementCounter() {
    setState(() {
      _counter += _stepSize;
    });
  }

  void _decrementCounter() {
    setState(() {
      _counter -= _stepSize;
    });
  }

  void _changeStepSize(int step) {
    setState(() {
      _stepSize = step;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Step Size:',
            ),
            TextButton(
              onPressed: () {
                _changeStepSize(1);
              },
              child: Text(
                '1',
                style: TextStyle(
                    color: _stepSize == 1 ? Colors.blue : Colors.black),
              ),
            ),
            TextButton(
              onPressed: () {
                _changeStepSize(2);
              },
              child: Text(
                '2',
                style: TextStyle(
                    color: _stepSize == 2 ? Colors.blue : Colors.black),
              ),
            ),
            TextButton(
              onPressed: () {
                _changeStepSize(5);
              },
              child: Text('5',
                style: TextStyle(color: _stepSize == 5 ? Colors.blue : Colors.black)),
              ),
            ),
            SizedBox(height: 20),
            Text('Counter:',),
            Text('$_counter', style: Theme.of(context).textTheme.headline4),
          ],
        ),
      ),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          FloatingActionButton(
            onPressed: _decrementCounter,
            tooltip: 'Decrement',
            child: Icon(Icons.remove),
          ),
          SizedBox(width: 10),
          FloatingActionButton(
            onPressed: _incrementCounter,
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ),
        ],
      ),
    );
  }
}

Bu örnekte, _counter değişkeninin değeri artırılır veya azaltılırken _stepSize değişkeninin değişmesi gerektiği durumlarda, setState() fonksiyonu kullanılır. _incrementCounter() fonksiyonu, _stepSize değişkeninin de değerini hesaba katarak _counter değişkeninin değerini arttırır. _decrementCounter() fonksiyonu ise _stepSize değişkeninin de değerini hesaba katarak _counter değişkeninin değerini azaltır. _changeStepSize() fonksiyonu ise _stepSize değişkeninin değerini değiştirir. Her bir fonksiyonda setState() fonksiyonu kullanılarak widget ağacı yeniden yapılandırılır.

Sonuç

Bu örneklerde gösterildiği gibi, setState() fonksiyonu, durum nesnesindeki değişiklikleri algılayarak widget ağacının yeniden yapılandırılmasını sağlar. Bu sayede, kullanıcının widget’e olan etkileşimi sonrasında widget’in güncel kalması ve değişen durumlara göre görsel olarak güncellenmesi mümkün olur.

Evet setState fonksiyonu bu şekilde olmakta. Tüm Flutter yazılarımıza buraya tıklayarak ulaşabilirsiniz. Herkese hayırlı günler.

Skorumuz:
Oy Vermek İçin Tıklayın
[Toplam: 0 Ortalama: 0]

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu