CodeBlanks Logo Icon CodeBlanks

StreamBuilder nedir?

StreamBuilder ile sürekli veri akışını arayüze bağlamayı öğrenirsin.

StreamBuilder nedir?

StreamBuilder, bir Stream'i arayüze bağlayan widget'tır. stream parametresi izlenecek Stream'i, builder ise her yeni değerde çağrılan fonksiyonu alır.

StreamBuilder<String>(
  stream: veriAkisi(),
  builder: (context, snapshot) {
    return Text(snapshot.data ?? 'boş');
  },
)

Stream'den her yeni değer geldiğinde builder yeniden çağrılır.

snapshot ile veriye erişim

builder fonksiyonu bir AsyncSnapshot alır. Stream'den gelen her yeni değerde snapshot.data güncellenir ve builder yeniden çağrılır.

builder: (context, snapshot) {
  return Text(snapshot.data ?? 'boş');
}

Stream kapanana kadar her değer için build yenilenir.

Uygulama StreamBuilder ile veri göster

veriAkisi async* metodu 'Merhaba Stream' değerini yield etsin. Ekrani stateless widget'ında StreamBuilder<String> ile snapshot.data ?? '0' değerini göster. main'de print('ekran açıldı') çağır.

Başlangıç kodu

main.dart
import 'package:flutter/material.dart';

Stream<String> veriAkisi() async* {
  yield 'Merhaba Stream';
}

void main() {
  print('ekran açıldı');
  runApp(MaterialApp(home: Ekrani()));
}

class Ekrani extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        // akış dinleyici widget ekle
        child: Text('bekle'),
      ),
    );
  }
}

Örnek çözüm

main.dart
import 'package:flutter/material.dart';

Stream<String> veriAkisi() async* {
  yield 'Merhaba Stream';
}

void main() {
  print('ekran açıldı');
  runApp(MaterialApp(home: Ekrani()));
}

class Ekrani extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: StreamBuilder<String>(
          stream: veriAkisi(),
          builder: (context, snapshot) {
            return Text(snapshot.data ?? '0');
          },
        ),
      ),
    );
  }
}

Beklenen çıktı

ekran açıldı

Soru ve cevaplar

Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.

1 StreamBuilder hangi parametreyle izlenecek Stream'i alır?

  • stream Doğru cevap
  • child
  • future
  • builder

Açıklama: StreamBuilder'ın stream parametresi izlenecek Stream'i alır; builder ise her yeni değerde widget üretir.

2 StreamBuilder'ın stream parametresini bağla

Soru
StreamBuilder<String>(
  ____: sayacStream,
  builder: (context, snapshot) {
    return Text(snapshot.data ?? '0');
  },
)
Cevap
StreamBuilder<String>(
  stream: sayacStream,
  builder: (context, snapshot) {
    return Text(snapshot.data ?? '0');
  },
)

Açıklama: StreamBuilder'ın stream parametresi izlenecek Stream'i alır; builder ise her yeni değerde widget üretir.

3 StreamBuilder parçaları

Kavram Anlamı
StreamBuilder Stream'i arayüze bağlayan widget
stream İzlenecek Stream'i alan parametre
builder Her değerde widget üreten fonksiyon
snapshot Stream'in o anki durumunu taşıyan nesne

Orta seviye bölümündeki tüm dersler