【Flutter】スマホアプリでストップウォッチを作っているが、1000分の1秒の誤差が発生してしまう

Question

Flutterを使ってスマホアプリでストップウォッチを作っており、お試しとして500ミリ秒ずつ経過時間を画面に表示することにしました。
すると経過時間に1000分の1秒の誤差が発生してしまいます。時々100分の1秒の誤差も発生します。
下記画像ですと6ミリ秒の誤差が発生しています。
この誤差をなくすテクニックはありますか？

main.dart

import 'package:flutter/material.dart';
import 'time.dart';
import 'button.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'タイトルですよ',
      home: Scaffold(
          appBar: AppBar(
            title: Text('appBarですよ'),
          ),
          body: Center(
              child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Padding(
                padding: EdgeInsets.all(50.0),
                child: Clock(),
                ),
              MyButton(),
            ],
          ))),
    );
  }
}

button.dart

import 'package:flutter/material.dart';

class MyButton extends StatefulWidget {
  @override
  _MyButtonState createState() => _MyButtonState();
}

class _MyButtonState extends State<MyButton> {
  bool _pressAttention = true;

  void _pressButton() {
    setState(() {
      _pressAttention = !_pressAttention;
    });
  }

  @override
  Widget build(BuildContext context) {
    return ButtonTheme(
        minWidth: 100.0,
        height: 100.0,
        child: RaisedButton(
          onPressed: _pressButton,
          child: _pressAttention ? Text('Start', style: TextStyle(fontSize: 30.0),) : Text('Stop', style: TextStyle(fontSize: 30.0),),
          color: _pressAttention ? Colors.blue : Colors.red,
          shape: CircleBorder(
            side: BorderSide(
              color: Colors.black,
              width: 1.0,
              style: BorderStyle.solid,
            ),
          ),
        ));
  }
}

time.dart

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'dart:async';

class Clock extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _ClockState();
  }
}

class _ClockState extends State<Clock> {
  Stopwatch s = Stopwatch();
  String _time = '';

  @override
  void initState() {
    s.start();
    Timer.periodic(
      Duration(milliseconds: 500),
      _onTimer,
    );
    super.initState();
  }

  void _onTimer(Timer timer) {
    setState(() => _time = '${s.elapsedMilliseconds}');
  }

  @override
  Widget build(BuildContext context) {
    return Text(
      _time,
      style: TextStyle(fontSize: 30.0),
    );
  }
}

Answer 1

少し調べたところTimer.periodicの実装は割と曖昧で、1ms単位で正確に処理を行うのは難しいのかもしれません。
参考までに、公式ドキュメントにも以下のような記述があります。

the time between two consecutive callbacks can be shorter and longer than duration.

また、タイマーを使ったサンプルコードもいくつか確認しましたが、
すべて以下のように、1000分の1秒単位は切り捨てる実装になっていました。

transformMilliSecondsToString(int milliseconds) {
  int hundreds = (milliseconds / 10).truncate();
  int seconds = (hundreds / 100).truncate();
  int minutes = (seconds / 60).truncate();
  int hours = (minutes / 60).truncate();

  String hundredsStr = (hundreds % 100).toString().padLeft(2, '0');
  String secondsStr = (seconds % 60).toString().padLeft(2, '0');
  String minutesStr = (minutes % 60).toString().padLeft(2, '0');
  String hoursStr = (hours % 60).toString().padLeft(2, '0');

  return '$hoursStr : $minutesStr : $secondsStr.$hundredsStr';
}

参考 :

• https://github.com/hukusuke1007/stop_watch_timer/blob/0e135d432d24b53c5b259041ca13bdead50a95cf/lib/stop_watch_timer.dart#L133

• https://github.com/robertkiszeli/stopwatch/blob/09068ef29cf352e77300f5604efd2158543b985a/lib/classes/dependencies.dart#L8

• https://github.com/dart-lang/sdk/issues/18642#issuecomment-108433054

Comments

[ametyan]

調べていただきありがとうございます！
1ms単位での処理は難しいのですね。承知しました。

ちなみに、Dart以外の言語で1msの処理が可能な言語などご存知でしたら、教えていただきたいです。
世に出回っている1ms単位の処理をするアプリがどのように実現しているのかを知りたいです。

[nskhei]

いえいえ、こちらこそとても良い勉強になりました！

他言語については分かりませんが、調べたところ1msというのはかなりの高精度なので、簡単ではないかもしれません。
あと、端末自体の性能にも左右されると思います。

個人的な予想ですが、世に出回っているアプリでは1ms単位の誤差は丸めて表示しているか、毎回誤差を補正するようなアルゴリズムが使われているのではないかと思います。
例えば、6msの誤差が出たら、次の処理は494ms後に設定するみたいな感じです。
この辺参考にしてみて下さい。
・https://qiita.com/jkr_2255/items/fe72a451d1fc4fa81ba3
・https://rksoftware.hatenablog.com/entry/2018/01/22/014229
・https://nagise.hatenablog.jp/entry/20110221/1298301239
・https://ja.stackoverflow.com/questions/5576/mfc