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 !
Table of Contents
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
- 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
- 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.
