Increment multiple timestamps in same widget - Flutter

Question

I am looking for a way to calculate how much time has passed for each of the timestamps below. I have a basic way of using a stream, but can't figure out how to implement it. The counterStream.listen shows an incremented value every second.

Widget _changeTimestamp(timestamp) {
  var counterStream =
      Stream<int>.periodic(Duration(seconds: 1), (x) => timestamp + x);
  counterStream.listen(print);
}


return Scaffold(
    body: ListView(
  padding: const EdgeInsets.all(8.0),
  children: <Widget>[
    Container(
      height: 50,
      color: Colors.amber[600],
      child: Center(child: _changeTimestamp(1562499809820)),
    ),
    Container(
      height: 50,
      color: Colors.amber[500],
      child: Center(child: _changeTimestamp(1562499766191)),
    ),
  ],
)
    );

I want to create something like a stopwatch for each timestamp. — Ciprian, Jul 19 '19 at 18:47

Ajil O. · Accepted Answer · 2019-07-20T05:22:25.993

There are many ways you can take to achieve this. I have used a Stream builder to do it.

First I refactored your _changeTimestamp method so that it returns a Stream of int

Stream<int> _changeTimeStamp(int milliseconds) async* {
  yield* Stream<int>.periodic(
    Duration(seconds: 1),
    (period) => milliseconds + period,
  );
}

Now all I need to do is to use a StreamBuilder widget in the ListView that feeds off of this Stream

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      body: ListView(
        children: <Widget>[
          Container(
            height: 50,
            color: Colors.amber[600],
            child: Center(
              child: StreamBuilder<int>(
                stream: _changeTimeStamp(2738942),
                builder: (context, snapshot) {
                  if (snapshot.hasData) {
                    int timestamp = snapshot.data;
                    String formattedTimestamp = _formatTimestamp(timestamp);
                    return Text('$formattedTimestamp');
                  }
                  return CircularProgressIndicator();
                },
              ),
            ),
          ),
        ],
      ),
    ),
  );
}

You can format the timestamp, however you want by creating a custom method or by using plugins like timeago.

String _formatTimestamp(int timestamp) {
  // Format your timestamp here
}

Very cool. Thank you. So if I would get the current timestamp like this: `var timestamp = new DateTime.now().millisecondsSinceEpoch;` I can call `_changeTimeStamp(timestamp - 1562499766191) ` with the difference between now and the timestamp. But how do I convert that to something like this? https://stackoverflow.com/a/50633744/385623 ? Since that StreamBuilder expects only a stream. I would like to have `4h:20m:11s`, then `4h:20m:12s` ... then go to days, weeks and so on. — Ciprian, Jul 19 '19 at 22:45
Check the edit. Add any logic you want to use to format your timestamp in the `_formatTimestamp` method. — Ajil O., Jul 20 '19 at 05:23
Since the timestamp is in milliseconds, shouldn't this piece of code be with milliseconds instead of seconds? `Duration(milliseconds: 1), (period) => milliseconds + period,` instead of this `Duration(seconds: 1), (period) => milliseconds + period,` — Ciprian, Jul 20 '19 at 14:44

Increment multiple timestamps in same widget - Flutter

1 Answers1