Lifting state up
- Flutter kursu
- Orta seviye
- Ders 2/99
- 4 dk
State'i ortak ebeveyne taşıyarak paylaşmayı öğrenirsin.
Lifting state up
İki kardeş widget'ın aynı state'i paylaşması gerektiğinde state'i onların ortak ebeveynine taşırsın. Bu lifting state up (state'i yukarı taşımak) olarak bilinir.
class Ebeveyn extends StatefulWidget {
// sayacı burada tut
// çocuklara callback ver
}Ebeveyn state'i tutar, çocuklar yalnızca gösterir ve olayları raporlar.
Callback pattern
Ebeveyn, çocuklara constructor ile callback geçirir. Çocuk, butona basıldığında bu callback'i çağırır; ebeveyn setState ile state'i günceller.
Artirici(
onArtir: () {
setState(() { _sayac++; });
},
)Bu sayede çocuklar stateless kalabilir.
Uygulama Ebeveyn tutar, çocuk gösterir
Ebeveyn stateful widget'ında _sayac değişkeni tut. _artir metodu setState ile _sayac'ı artırsın. initState içinde print('ebeveyn hazır') çağır. Goruntuleyici ve Artirici stateless widget'larını tamamla: Artirici, onArtir callback'ini alsın ve butona basınca çağırsın.
Başlangıç kodu
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 StatefulWidget {
@override
_EbeveynState createState() => _EbeveynState();
}
class _EbeveynState extends State<Ebeveyn> {
int _sayac = 0;
// initState ekle: print('ebeveyn hazır')
void _artir() {
// setState ile _sayac'ı artır
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Goruntuleyici(deger: _sayac),
// onArtir: _artir ile Artirici
Artirici(),
],
),
),
);
}
}
class Goruntuleyici extends StatelessWidget {
final int deger;
Goruntuleyici({required this.deger});
@override
Widget build(BuildContext context) {
return Text('$deger', style: TextStyle(fontSize: 48));
}
}
class Artirici extends StatelessWidget {
// onArtir field'ını ekle
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: () {},
child: Text('Artır'),
);
}
}Örnek çözüm
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 StatefulWidget {
@override
_EbeveynState createState() => _EbeveynState();
}
class _EbeveynState extends State<Ebeveyn> {
int _sayac = 0;
@override
void initState() {
super.initState();
print('ebeveyn hazır');
}
void _artir() {
setState(() {
_sayac++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Goruntuleyici(deger: _sayac),
Artirici(onArtir: _artir),
],
),
),
);
}
}
class Goruntuleyici extends StatelessWidget {
final int deger;
Goruntuleyici({required this.deger});
@override
Widget build(BuildContext context) {
return Text('$deger', style: TextStyle(fontSize: 48));
}
}
class Artirici extends StatelessWidget {
final VoidCallback onArtir;
Artirici({required this.onArtir});
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: onArtir,
child: Text('Artır'),
);
}
}Beklenen çıktı
ebeveyn hazır
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Lifting state up deseninde hangisi doğrudur?
- State GlobalKey ile global yapılır
- State ebeveynde tutulur, çocuklara callback geçirilir Doğru cevap
- State çocuk widget'larda tutulur ve parent'a aktarılır
- Her çocuk kendi state'inin ayrı bir kopyasını tutar
Açıklama: Lifting state up'ta state ortak ebeveynde tutulur; çocuklar olayları callback ile bildirir ve ebeveyn setState ile günceller.
2 Çocuğa callback'i geç
class Ebeveyn extends StatefulWidget {
int sayac = 0;
void artir() {
setState(() { sayac++; });
}
@override
Widget build(BuildContext context) {
return Cocuk(onArtir: ____);
}
}class Ebeveyn extends StatefulWidget {
int sayac = 0;
void artir() {
setState(() { sayac++; });
}
@override
Widget build(BuildContext context) {
return Cocuk(onArtir: artir);
}
}Açıklama: Ebeveyn, çocuk widget'a artırma işini _artir metoduyla callback olarak geçirir; çocuk yalnızca bu callback'i çağırır.
3 Lifting parçaları
| Kavram | Anlamı |
|---|---|
Lifting state up |
State'i ortak ebeveyne taşımak |
Callback |
Çocuğun ebeveyne olay bildirmesi |
Stateless child |
State tutmayan çocuk widget |
Constructor parametresi |
Çocuğun callback'i aldığı yer |