Özet - StatefulWidget
- Flutter kursu
- Başlangıç
- Ders 25/99
- 4 dk
StatefulWidget, setState ve initState'i birleştirerek sayaç yaparsın.
StatefulWidget özeti
StatefulWidget, zamanla değişen arayüzler için kullanılır. createState bir State nesnesi üretir; bu State değişken veriyi saklar. setState, veri güncellendikten sonra build'i yeniden tetikler. initState'te kaynakları kurar, dispose'ta temizlersin. Bu dördünü birleştirerek çalışan bir sayaç yaparsın.
class Sayac extends StatefulWidget {
const Sayac({super.key});
@override
State<Sayac> createState() => _SayacState();
}
class _SayacState extends State<Sayac> {
int deger = 0;
@override
void initState() {
super.initState();
deger = 0;
}
void artir() {
setState(() => deger++);
}
@override
Widget build(BuildContext context) {
return Text('$deger');
}
}Uygulama Sayac sınıfını yaz ve çalıştır
Önce print('sayac hazir') yazdır, sonra runApp(MaterialApp(home: Sayac())) çağrısı yap. Sayac adında StatefulWidget'dan türeyen, createState ile _SayacState üreten bir sınıf tanımla. _SayacState, State<Sayac>'dan türeyip int deger = 0 tutsun, initState'te super.initState() çağrılsın, artir metodu setState çağırsın ve build metodu Text('$deger') döndürsün.
Başlangıç kodu
import 'package:flutter/material.dart';
void main() {
// 'sayac hazir' mesajını print ile yazdır
// runApp ile MaterialApp çağır; home Sayac widget'ı olsun
}
// Sayac sınıfını tanımla
// StatefulWidget'dan extends etsin, createState ile _SayacState üretsin
// _SayacState sınıfını tanımla
// int deger = 0 alanı olsun
// initState super.initState() çağırsın
// artir metodu State'i güncelleyip build'i tetiklesin
// build metodu Text('$deger') döndürsünÖrnek çözüm
import 'package:flutter/material.dart';
void main() {
print('sayac hazir');
runApp(MaterialApp(home: Sayac()));
}
class Sayac extends StatefulWidget {
const Sayac({super.key});
@override
State<Sayac> createState() => _SayacState();
}
class _SayacState extends State<Sayac> {
int deger = 0;
@override
void initState() {
super.initState();
}
void artir() {
setState(() => deger++);
}
@override
Widget build(BuildContext context) {
return Text('$deger');
}
}Beklenen çıktı
sayac hazir
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Bir sayaç widget'ı için hangi widget türü kullanılır?
- InheritedWidget
- Builder widget
- StatelessWidget
- StatefulWidget Doğru cevap
Açıklama: Sayaç zamanla değişen veri içerdiğinden StatefulWidget ile yazılır; StatelessWidget state tutamaz.
2 Stateful sınıf tanımı
class Sayac extends ____ {
const Sayac({super.key});
@override
State<Sayac> createState() => _SayacState();
}class Sayac extends StatefulWidget {
const Sayac({super.key});
@override
State<Sayac> createState() => _SayacState();
}Açıklama: StatefulWidget'dan türeyen sınıflar createState ile State üretir.
3 StatefulWidget birleşimi
| Kavram | Anlamı |
|---|---|
Sayaç |
StatefulWidget ile yazılır |
artir metodu |
setState çağırır |
deger alanı |
State içinde saklanır |
initState/dispose |
Yaşam döngüsü çifti |