From ef1c42795fe563ee87d2146a1eb177840c144912 Mon Sep 17 00:00:00 2001
From: Anh <anh.app.dev@gmail.com>
Date: Thu, 22 Feb 2024 12:33:39 +0700
Subject: [PATCH] Add DottedProgressCircle

---
 .../lib/ui/home/benchmark_running_screen.dart |  14 ++-
 .../lib/ui/home/dotted_progress_circle.dart   | 103 ++++++++++++++++++
 2 files changed, 112 insertions(+), 5 deletions(-)
 create mode 100644 flutter/lib/ui/home/dotted_progress_circle.dart

diff --git a/flutter/lib/ui/home/benchmark_running_screen.dart b/flutter/lib/ui/home/benchmark_running_screen.dart
index b489952a3..4994622dd 100644
--- a/flutter/lib/ui/home/benchmark_running_screen.dart
+++ b/flutter/lib/ui/home/benchmark_running_screen.dart
@@ -4,6 +4,7 @@ import 'dart:math';
 import 'package:flutter/material.dart';
 
 import 'package:collection/collection.dart';
+import 'package:mlperfbench/ui/home/dotted_progress_circle.dart';
 import 'package:provider/provider.dart';
 
 import 'package:mlperfbench/benchmark/info.dart';
@@ -113,10 +114,10 @@ class _BenchmarkRunningScreenState extends State<BenchmarkRunningScreen> {
             ),
           ),
         ),
-        // InfiniteProgressCircle(
-        //   size: containerWidth + 20,
-        //   strokeWidth: 6.0,
-        // ),
+        DottedProgressCircle(
+          circleSize: containerWidth + 20,
+          dotSize: 10,
+        ),
       ],
     );
   }
@@ -200,7 +201,10 @@ class _BenchmarkRunningScreenState extends State<BenchmarkRunningScreen> {
     const trailingWidth = 24.0;
     Widget? doneIcon;
     if (progress.currentBenchmark?.taskName == benchmarkInfo.taskName) {
-      doneIcon = null;
+      doneIcon = const DottedProgressCircle(
+        circleSize: trailingWidth + 20,
+        dotSize: 2,
+      );
     } else if (progress.completedBenchmarks.contains(benchmarkInfo)) {
       doneIcon = const Icon(
         Icons.check_circle,
diff --git a/flutter/lib/ui/home/dotted_progress_circle.dart b/flutter/lib/ui/home/dotted_progress_circle.dart
new file mode 100644
index 000000000..581f021c4
--- /dev/null
+++ b/flutter/lib/ui/home/dotted_progress_circle.dart
@@ -0,0 +1,103 @@
+import 'dart:async';
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+
+class DottedProgressCircle extends StatefulWidget {
+  final double circleSize;
+  final double dotSize;
+
+  const DottedProgressCircle(
+      {required this.circleSize, required this.dotSize, Key? key})
+      : super(key: key);
+
+  @override
+  State<DottedProgressCircle> createState() => _DottedProgressCircleState();
+}
+
+class _DottedProgressCircleState extends State<DottedProgressCircle> {
+  static const circlesCount = 10;
+
+  late final Timer _timer;
+
+  bool _increase = true;
+  int _startCircleNumber = 0;
+  int _endCircleNumber = 1;
+
+  void _updateState() {
+    if (_increase) {
+      if (_startCircleNumber == circlesCount) {
+        _startCircleNumber = 0;
+        _endCircleNumber = 1;
+      } else {
+        _endCircleNumber++;
+      }
+
+      if (_endCircleNumber == circlesCount) {
+        _increase = false;
+      }
+    } else {
+      _startCircleNumber++;
+
+      if (_startCircleNumber == circlesCount) {
+        _increase = true;
+      }
+    }
+  }
+
+  @override
+  void initState() {
+    _timer = Timer.periodic(
+      const Duration(seconds: 1),
+      (_) => setState(_updateState),
+    );
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    _timer.cancel();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return CustomPaint(
+        size: Size(widget.circleSize, widget.circleSize),
+        painter: _ProgressCirclesPaint(
+          _startCircleNumber,
+          _endCircleNumber,
+          widget.dotSize,
+        ));
+  }
+}
+
+class _ProgressCirclesPaint extends CustomPainter {
+  final int _startCircleNumber;
+  final int _endCircleNumber;
+  final double _circleRadius;
+
+  _ProgressCirclesPaint(
+      this._startCircleNumber, this._endCircleNumber, this._circleRadius);
+
+  final Paint _paintLine = Paint()
+    ..color = Colors.white
+    ..style = PaintingStyle.fill;
+  final double pi = 3.1415926535897932;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    for (var i = _startCircleNumber; i < _endCircleNumber; i++) {
+      final currentDegree =
+          2 * pi * ((i) / _DottedProgressCircleState.circlesCount) + pi / 2;
+      final x = (size.width + size.height * cos(currentDegree)) / 2;
+      final y = (size.height + size.width * sin(currentDegree)) / 2;
+      canvas.drawCircle(Offset(x, y), _circleRadius, _paintLine);
+    }
+  } // paint
+
+  @override
+  bool shouldRepaint(_ProgressCirclesPaint old) =>
+      old._endCircleNumber != _endCircleNumber ||
+      old._startCircleNumber != _startCircleNumber;
+}