Показывать прогресс таймера на CircularProgressIndicator в флаттере

Question

Я использую RestartableTimer (подкласс Timer) в качестве таймера обратного отсчета, чтобы «выгнать людей» из формы через определенное время.

Я хотел бы отобразить прогрессэтого таймера, и мне нравится идея постепенного заполнения кругового процесса.

Я не показываю свой код, потому что мне нечего показать.У меня есть полностью статический индикатор прогресса и рабочий таймер в виджете (с состоянием или без состояния, в зависимости от того, что лучше всего работает).

Я сталкиваюсь с двумя проблемами, и здесь мне нужна помощь:

• Я не знаю, как проверять каждые x миллисекунд на ход выполнения таймера.Как я могу это сделать?Мне не нужен код для копирования-вставки, но больше «какой объект / в каком направлении» я должен идти?

• Прогресс таймера в тиках не реализован (NotImplementedException);есть ли способ получить эквивалент где-нибудь еще?Этот объект работает очень хорошо для меня, за исключением этой части.

Я СОЛ, или есть ли способ сделать это?

Answer 1

В геттере ничего не нужно реализовывать tick, поскольку RestartableTimer не является периодическим.То, что вы хотите, является гораздо более сложной вещью, и RestartableTimer не может вам в этом помочь.

Во-первых, вам нужно что-то, чтобы контролировать ход CircularProgressIndicator:

class ProgressController {
  static const double smoothnessConstant = 250;

  final Duration duration;
  final Duration tickPeriod;

  Timer _timer;
  Timer _periodicTimer;

  Stream<void> get progressStream => _progressController.stream;
  StreamController<void> _progressController = StreamController<void>.broadcast();

  Stream<void> get timeoutStream => _timeoutController.stream;
  StreamController<void> _timeoutController = StreamController<void>.broadcast();

  double get progress => _progress;
  double _progress = 0;

  ProgressController({@required this.duration})
      : assert(duration != null),
        tickPeriod = _calculateTickPeriod(duration);

  void start() {
    _timer = Timer(duration, () {
      _cancelTimers();
      _setProgressAndNotify(1);
      _timeoutController.add(null);
    });

    _periodicTimer = Timer.periodic(
      tickPeriod,
      (Timer timer) {
        double progress = _calculateProgress(timer);
        _setProgressAndNotify(progress);
      },
    );
  }

  void restart() {
    _cancelTimers();
    start();
  }

  Future<void> dispose() async {
    await _cancelStreams();
    _cancelTimers();
  }

  double _calculateProgress(Timer timer) {
    double progress = timer.tick / smoothnessConstant;

    if (progress > 1) return 1;
    if (progress < 0) return 0;
    return progress;
  }

  void _setProgressAndNotify(double value) {
    _progress = value;
    _progressController.add(null);
  }

  Future<void> _cancelStreams() async {
    if (!_progressController.isClosed) await _progressController.close();
    if (!_timeoutController.isClosed) await _timeoutController.close();
  }

  void _cancelTimers() {
    if (_timer?.isActive == true) _timer.cancel();
    if (_periodicTimer?.isActive == true) _periodicTimer.cancel();
  }

  static Duration _calculateTickPeriod(Duration duration) {
    double tickPeriodMs = duration.inMilliseconds / smoothnessConstant;
    return Duration(milliseconds: tickPeriodMs.toInt());
  }
}

Затем вы можете реализовать CircularProgressIndicator, который слушает Stream s из ProgressController:

class RestartableCircularProgressIndicator extends StatefulWidget {
  final ProgressController controller;
  final VoidCallback onTimeout;

  RestartableCircularProgressIndicator({
    Key key,
    @required this.controller,
    this.onTimeout,
  })  : assert(controller != null),
        super(key: key);

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

class _RestartableCircularProgressIndicatorState
    extends State<RestartableCircularProgressIndicator> {
  ProgressController get controller => widget.controller;

  VoidCallback get onTimeout => widget.onTimeout;

  @override
  void initState() {
    super.initState();
    controller.progressStream.listen((_) => updateState());
    controller.timeoutStream.listen((_) => onTimeout());
  }

  @override
  Widget build(BuildContext context) {
    return CircularProgressIndicator(
      value: controller.progress,
    );
  }

  void updateState() => setState(() {});
}

Вы также можете передать некоторые параметры от CircularProgressIndicator до RestartableCircularProgressIndicator,так что вы можете настроить его.

Пример использования:

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  ProgressController controller;

  @override
  void initState() {
    super.initState();
    controller = ProgressController(
      duration: Duration(seconds: 5),
    );
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              RestartableCircularProgressIndicator(
                controller: controller,
                onTimeout: () => print('timeout'),
              ),
              RaisedButton(
                onPressed: controller.start,
                child: Text('Start'),
              ),
              RaisedButton(
                onPressed: controller.restart,
                child: Text('Restart'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Я когда-нибудь преобразую это в библиотеку, но до тех пор я не могу предоставить тесты и документацию для этого кода, поэтомуВы должны изучить это, если хотите понять, что здесь происходит (извините ...).