Summary - StreamBuilder

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.

Exercise 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ı').

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

Test yourself

Which method is used to add a value to the controller on the counter screen?
- controller.sink.add
- controller.dispose
- controller.close
- controller.stream.listen
Show answer

controller.sink.add — controller.sink.add sends a value to the stream; StreamBuilder listens and refreshes the UI.

Declare a StreamController

final controller = ____<int>();

Show answer

final controller = StreamController<int>();

StreamBuilder section parts

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

Next lesson: The Form widget

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies