Özet - StreamBuilder

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.

Örnek çözümü göster

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),
      ),
    );
  }
}

Kendini test et

Sayaç ekranında controller'a değer eklemek için hangi yöntem kullanılır?
- controller.sink.add
- controller.dispose
- controller.close
- controller.stream.listen
Cevabı göster

controller.sink.add — controller.sink.add ile akışa değer gönderilir; StreamBuilder bu değeri dinleyip arayüzü yeniler.

StreamController tanımla

final controller = ____<int>();

Cevabı göster

final controller = StreamController<int>();

StreamBuilder bölümünün parçaları

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ı

Sıradaki ders: Form widget'ı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler