Özet - StreamBuilder
- Flutter kursu
- Orta seviye
- Ders 30/99
- 4 dk
StreamBuilder ve Controller'ı birleştirerek sayaç yaparsın.
Özet - StreamBuilder
Bu bölümde üç şey öğrendin: StreamBuilder ile Stream'i arayüze bağlarsın; StreamController ile kendi Stream'ini oluşturup sink.add ile değer gönderirsin; Stream.periodic ile otomatik periyodik akış üretirsin.
final controller = StreamController<int>();
controller.sink.add(1);
StreamBuilder(
stream: controller.stream,
builder: (context, snapshot) => Text('${snapshot.data}'),
)Bunları birleştirerek sayaç ekranı yaparsın.
Uygulama Sayaç ekranı yap
SayacYoneticisi sınıfında StreamController<int> ve _sayac tut. artir metodu _sayac'ı artırıp controller.sink.add(_sayac) çağırsın. stream getter'ı controller.stream döndürsün. Ekrani'de StreamBuilder<int> ile snapshot.data ?? 0 değerini göster. Butona basıldığında yonetici.artir() çağrılsın. main'de print('sayaç uygulaması') çağır.
Başlangıç kodu
import 'dart:async';
import 'package:flutter/material.dart';
// SayacYoneticisi sınıfı ekle
// Ekrani içinde akış dinleyici ekle
void main() {
print('sayaç uygulaması');
runApp(MaterialApp(home: Ekrani()));
}
class Ekrani extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(body: Center(child: Text('?')));
}
}Örnek çözüm
import 'dart:async';
import 'package:flutter/material.dart';
class SayacYoneticisi {
final controller = StreamController<int>();
int _sayac = 0;
void artir() {
_sayac++;
controller.sink.add(_sayac);
}
Stream<int> get stream => controller.stream;
}
void main() {
print('sayaç uygulaması');
runApp(MaterialApp(home: Ekrani()));
}
class Ekrani extends StatelessWidget {
@override
Widget build(BuildContext context) {
final yonetici = SayacYoneticisi();
return Scaffold(
body: Center(
child: StreamBuilder<int>(
stream: yonetici.stream,
builder: (context, snapshot) {
return Text('${snapshot.data ?? 0}');
},
),
),
floatingActionButton: FloatingActionButton(
onPressed: yonetici.artir,
child: Icon(Icons.add),
),
);
}
}Beklenen çıktı
sayaç uygulaması
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Sayaç ekranında controller'a değer eklemek için hangi yöntem kullanılır?
- controller.sink.add Doğru cevap
- controller.dispose
- controller.close
- controller.stream.listen
Açıklama: controller.sink.add ile akışa değer gönderilir; StreamBuilder bu değeri dinleyip arayüzü yeniler.
2 StreamController tanımla
final controller = ____<int>();final controller = StreamController<int>();Açıklama: StreamController<int>() ile int türünde değer üretebilen kendi Stream'ini oluşturursun.
3 StreamBuilder bölümünün parçaları
| Kavram | Anlamı |
|---|---|
StreamBuilder |
Stream'i arayüze bağlayan widget |
StreamController |
Kendi Stream'ini oluşturan sınıf |
sink.add |
Akışa değer ekleme |
Stream.periodic |
Periyodik akış üreten yapı |