Jelajahi Sumber

Improve time counter animation

Neeraj Gupta 2 tahun lalu
induk
melakukan
2eb7542293
1 mengubah file dengan 18 tambahan dan 19 penghapusan
  1. 18 19
      lib/ui/code_timer_progress.dart

+ 18 - 19
lib/ui/code_timer_progress.dart

@@ -1,6 +1,5 @@
-import 'dart:async';
-
 import 'package:flutter/material.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/scheduler.dart';
 import 'package:flutter_animation_progress_bar/flutter_animation_progress_bar.dart';
 import 'package:flutter_animation_progress_bar/flutter_animation_progress_bar.dart';
 
 
 class CodeTimerProgress extends StatefulWidget {
 class CodeTimerProgress extends StatefulWidget {
@@ -15,43 +14,43 @@ class CodeTimerProgress extends StatefulWidget {
   _CodeTimerProgressState createState() => _CodeTimerProgressState();
   _CodeTimerProgressState createState() => _CodeTimerProgressState();
 }
 }
 
 
-class _CodeTimerProgressState extends State<CodeTimerProgress> {
-  Timer? _everySecondTimer;
-  late int _timeRemaining;
+class _CodeTimerProgressState extends State<CodeTimerProgress>
+    with SingleTickerProviderStateMixin {
+  late final Ticker _ticker;
+  double _progress = 0.0;
+  late final int _microSecondsInPeriod;
 
 
   @override
   @override
   void initState() {
   void initState() {
     super.initState();
     super.initState();
-    _timeRemaining = widget.period;
-    _updateTimeRemaining();
-    _everySecondTimer =
-        Timer.periodic(const Duration(milliseconds: 200), (Timer t) {
+    _microSecondsInPeriod = widget.period * 1000000;
+    _ticker = createTicker((elapsed) {
       _updateTimeRemaining();
       _updateTimeRemaining();
     });
     });
+    _ticker.start();
+    _updateTimeRemaining();
   }
   }
 
 
   void _updateTimeRemaining() {
   void _updateTimeRemaining() {
-    int newTimeRemaining =
-        widget.period - (DateTime.now().second % widget.period);
-    if (newTimeRemaining != _timeRemaining) {
-      setState(() {
-        _timeRemaining = newTimeRemaining;
-      });
-    }
+    int timeRemaining = (_microSecondsInPeriod) -
+        (DateTime.now().microsecondsSinceEpoch % _microSecondsInPeriod);
+    setState(() {
+      _progress = (timeRemaining / _microSecondsInPeriod);
+    });
   }
   }
 
 
   @override
   @override
   void dispose() {
   void dispose() {
-    _everySecondTimer?.cancel();
+    _ticker.dispose();
     super.dispose();
     super.dispose();
   }
   }
 
 
   @override
   @override
   Widget build(BuildContext context) {
   Widget build(BuildContext context) {
     return FAProgressBar(
     return FAProgressBar(
-      currentValue: _timeRemaining / widget.period * 100,
+      currentValue: _progress * 100,
       size: 4,
       size: 4,
-      animatedDuration: const Duration(milliseconds: 200),
+      animatedDuration: const Duration(milliseconds: 10),
       progressColor: Colors.orange,
       progressColor: Colors.orange,
       changeColorValue: 40,
       changeColorValue: 40,
       changeProgressColor: Colors.green,
       changeProgressColor: Colors.green,