Summary - StreamBuilder
- Flutter course
- Intermediate
- Lesson 30/99
- 4 min
Combine StreamBuilder and Controller to make a counter.
Summary - StreamBuilder
In this section you learned three things: with StreamBuilder you bind a Stream to the UI; with StreamController you create your own Stream and send values with sink.add; with Stream.periodic you produce an automatic periodic stream.
final controller = StreamController<int>();
controller.sink.add(1);
StreamBuilder(
stream: controller.stream,
builder: (context, snapshot) => Text('${snapshot.data}'),
)Combining these, you build a counter screen.
Practice Build a counter screen
In the SayacYoneticisi class, hold a StreamController<int> and _sayac. The artir method should increment _sayac and call controller.sink.add(_sayac). The stream getter should return controller.stream. In Ekrani, display snapshot.data ?? 0 with StreamBuilder<int>. On button press, call yonetici.artir(). In main, call print('sayaç uygulaması').
Starter code
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('?')));
}
}Sample solution
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),
),
);
}
}Expected output
sayaç uygulaması
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which method is used to add a value to the controller on the counter screen?
- controller.sink.add Correct answer
- controller.dispose
- controller.close
- controller.stream.listen
Explanation: controller.sink.add sends a value to the stream; StreamBuilder listens and refreshes the UI.
2 Declare a StreamController
final controller = ____<int>();final controller = StreamController<int>();Explanation: With StreamController<int>() you create your own Stream that can produce int values.
3 StreamBuilder section parts
| Term | Meaning |
|---|---|
StreamBuilder |
Widget binding Stream to UI |
StreamController |
Class creating your own Stream |
sink.add |
Adding a value to the stream |
Stream.periodic |
Structure producing periodic stream |