History Counter Sample

main.dart

import 'dart:async';
import 'dart:math' as math;

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

void main() => runApp(MyApp());

// ReplaySubject + StreamBuilder
final replaySubject = ReplaySubject<int>(maxSize: 3);

// BehaviorSubject/scan + StreamBuilder
final behaviorSubject = BehaviorSubject<int>();
final scanned = behaviorSubject.scan<List<int>>((sum, value, _index) {
  sum..add(value);
  return sum.sublist(math.max(0, sum.length - 3));
}, []);

// StreamController + StreamBuilder
final streamCounter = StreamCounter();

class StreamCounter {
  final _streamController = StreamController<int>();
  final values = <int>[];

  void increment() {
    final value = values.lastWhere((x) => x != null, orElse: () => 0) + 1;
    values.add(value);
    values.removeRange(0, math.max(0, values.length - 3));
    _streamController.add(value);
  }

  Stream<int> get stream => _streamController.stream;
}

// ValueNotifier + ValueListenableBuilder
final valueNotifierCounter = ValueNotifierCounter();

class ValueNotifierCounter extends ValueNotifier<int> {
  ValueNotifierCounter() : super(0);
  final values = <int>[];

  void increment() {
    final v = value + 1;
    values.add(v);
    values.removeRange(0, math.max(0, values.length - 3));
    this.value = v;
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('History Counter'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'ReaplaySubject',
              ),
              StreamBuilder<int>(
                  stream: replaySubject,
                  builder: (context, _snapshot) {
                    return Text(
                      '${replaySubject.values}',
                      style: Theme.of(context).textTheme.display1,
                    );
                  }),
              SizedBox(height: 16),
              Text(
                'BehaviorSubject',
              ),
              StreamBuilder<List<int>>(
                  stream: scanned,
                  builder: (context, snapshot) {
                    return Text(
                      '${snapshot.data?.toList() ?? []}',
                      style: Theme.of(context).textTheme.display1,
                    );
                  }),
              SizedBox(height: 16),
              Text(
                'StreamController',
              ),
              StreamBuilder<int>(
                  stream: streamCounter.stream,
                  builder: (context, snapshot) {
                    return Text(
                      '${streamCounter.values}',
                      style: Theme.of(context).textTheme.display1,
                    );
                  }),
              SizedBox(height: 16),
              Text(
                'ValueNotifier',
              ),
              ValueListenableBuilder<int>(
                  valueListenable: valueNotifierCounter,
                  builder: (context, value, child) {
                    return Text(
                      '${valueNotifierCounter.values}',
                      style: Theme.of(context).textTheme.display1,
                    );
                  }),
            ],
          ),
        ),
        floatingActionButton: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            FloatingActionButton(
              onPressed: () => replaySubject.add(replaySubject.values.lastWhere(
                    (x) => x != null,
                    orElse: () => 0,
                  ) +
                  1),
              child: Text('Replay'),
            ),
            SizedBox(height: 16),
            FloatingActionButton(
              onPressed: () =>
                  behaviorSubject.add((behaviorSubject.value ?? 0) + 1),
              child: Text('Behavior'),
            ),
            SizedBox(height: 16),
            FloatingActionButton(
              onPressed: () => streamCounter.increment(),
              child: Text('Stream'),
            ),
            SizedBox(height: 16),
            FloatingActionButton(
              onPressed: () => valueNotifierCounter.increment(),
              child: Text('Notifier'),
            ),
          ],
        ),
      ),
    );
  }
}