flutter: ReorderableListView with StreamBuilder example

main.dart

import 'dart:async';

import 'package:flutter/material.dart';

void main() {
  MyBloc bloc = MyBloc();
  runApp(MyApp(bloc: bloc,));
}

class MyApp extends StatelessWidget {
  final MyBloc bloc;

  const MyApp({Key key, this.bloc}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(title: 'ReorderableListView issue demo', bloc: bloc,),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final MyBloc bloc;
  final String title;

  MyHomePage({Key key, this.title, this.bloc}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: StreamBuilder<Map<int, int>>(
          stream: bloc.valuesStream,
          initialData: bloc.curValues,
          builder: (context, snapshot) {
            if (!snapshot.hasData) return Center(child: CircularProgressIndicator(),);

            return ReorderableListView(
              children: _buildTiles(snapshot.data),
              onReorder: (_, __) {},
            );
          }
        ),
      ),
    );
  }

  List<Widget> _buildTiles(Map<int, int> data) {
    List<Widget> tiles = data.keys.map((int key) {
      int val = data[key];

      return MyListTile(
        key: ValueKey(key),
        data: val,
        title: "tile $key",
        onIncrement: () => bloc.increment(key),
      );
    }).toList();
    return tiles;
  }
}


class MyListTile extends StatefulWidget {
  final int data;
  final String title;
  final VoidCallback onIncrement;


  MyListTile({this.data, this.title, this.onIncrement, Key key}): super(key: key);

  @override
  _MyListTileState createState() => _MyListTileState();
}


class _MyListTileState extends State<MyListTile> {
  int _curData;
  Stream<int> _msStream;
  int _curMs;

  @override
  void initState() {
    super.initState();

    print("init: ${widget.title}");
    _curData = widget.data ?? 0;
    
    _curMs = 0;
    _msStream = Stream.periodic(const Duration(milliseconds: 100), (ms) => ms);
    
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 20.0, horizontal: 30.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text("${widget.title}. Cur value is: $_curData"),
          IconButton(icon: Icon(Icons.add), onPressed: _increment),
          StreamBuilder<int>(
            stream: _msStream,
            initialData: _curMs,
            builder: (_, AsyncSnapshot<int> snapshot) {
              if (!snapshot.hasData) return Center(child: CircularProgressIndicator());
              
              String ms = "${snapshot.data} ms";
              return Text(ms);
            }
          )
        ],
      ),
    );
  }

  void _increment() {
    widget.onIncrement?.call();
  }

  void dispose(){
    print("dispose: ${widget.title}");
    super.dispose();
  }
}


class MyBloc {
  Stream<Map<int, int>> get valuesStream => _valuesController.stream;
  Map<int, int> get curValues => _values;

  MyBloc() {
   _init();
  }

  void _init() {
    List<int> keys = List.generate(10, (index) => index);
    Map<int, int> data = Map.fromIterable(keys, key: (i) => i, value: (i) => i);
    _values = data;
  }

  void increment(int index) {
    _values[index]++;
    _valuesController.add(_values);
  }

  StreamController<Map<int, int>> _valuesController = StreamController();
  Map<int, int> _values;
}