Add color radiant on progress bar (#153)

* Add color radiant on progress bar

* Order imports

* Fix tests

* update goldens

Co-authored-by: Camille Brulotte <>
Co-authored-by: Samuel Montambault <mont.samuel@outlook.com>

Author: camillebrulotte

ios/Podfile.lock

@@ -16,7 +16,7 @@ PODS:
     - Firebase/Analytics (= 8.0.0)
     - firebase_core
     - Flutter
-  - firebase_core (1.2.0):
+  - firebase_core (1.3.0):
     - Firebase/CoreOnly (= 8.0.0)
     - Flutter
   - firebase_crashlytics (2.0.4):
@@ -230,7 +230,7 @@ SPEC CHECKSUMS:
   connectivity: c4130b2985d4ef6fd26f9702e886bd5260681467
   Firebase: 73c3e3b216ec1ecbc54d2ffdd4670c65c749edb1
   firebase_analytics: 221d3bc4e8f1b5144a4bd4cc6b33790ee51bd543
-  firebase_core: e4d3efb030a2b2021819f8faa538bb23deb46695
+  firebase_core: cda81ae37eda6df2bc2d16027fda527987c4bd33
   firebase_crashlytics: 4f3ce855ce6116de954cde34f88003df8ed9de4a
   FirebaseAnalytics: dcb92c7c9ef4fa7ffac276e8f87bd4fc8c97f1b8
   FirebaseCore: 3f09591d51292843e2a46f18358d60bf4e996255

lib/ui/widgets/grade_circular_progress.dart

@@ -2,10 +2,13 @@
 import 'package:flutter/material.dart';
 import 'package:percent_indicator/percent_indicator.dart';
 
+// UTILS
+import 'package:notredame/ui/utils/app_theme.dart';
+
 // OTHERS
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 
-class GradeCircularProgress extends StatelessWidget {
+class GradeCircularProgress extends StatefulWidget {
   final bool completed;
   final String finalGrade;
   final double studentGrade;
@@ -20,48 +23,120 @@ class GradeCircularProgress extends StatelessWidget {
       this.averageGrade})
       : super(key: key);
 
+  @override
+  _GradeCircularProgressState createState() => _GradeCircularProgressState();
+}
+
+class _GradeCircularProgressState extends State<GradeCircularProgress>
+    with TickerProviderStateMixin {
+  AnimationController _controller;
+  Animation<Color> animation;
+
+  @override
+  void initState() {
+    super.initState();
+
+    _controller = AnimationController(
+      duration: const Duration(milliseconds: 1100),
+      vsync: this,
+    );
+
+    _controller.forward();
+
+    animation = ColorTween(
+      begin: AppTheme.gradeFailureMin,
+      end: gradePercentageColor(widget.studentGrade ?? 0.0),
+    ).animate(_controller)
+      ..addListener(() {
+        setState(() {});
+      });
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
     return CircularPercentIndicator(
       animation: true,
       animationDuration: 1100,
-      radius: 100 * ratio,
-      lineWidth: 8.0 * ratio,
-      percent: completed ? getGradeInDecimals(studentGrade ?? 0.0) : 0,
+      radius: 100 * widget.ratio,
+      lineWidth: 8.0 * widget.ratio,
+      percent:
+          widget.completed ? getGradeInDecimals(widget.studentGrade ?? 0.0) : 0,
       circularStrokeCap: CircularStrokeCap.round,
       center: CircularPercentIndicator(
         animation: true,
         animationDuration: 700,
-        radius: 80 * ratio,
-        lineWidth: 8.0 * ratio,
-        percent: completed ? getGradeInDecimals(averageGrade ?? 0.0) : 0,
+        radius: 80 * widget.ratio,
+        lineWidth: 8.0 * widget.ratio,
+        percent: widget.completed
+            ? getGradeInDecimals(widget.averageGrade ?? 0.0)
+            : 0,
         circularStrokeCap: CircularStrokeCap.round,
         center: Text(
           getGrade(context),
           style: TextStyle(
               color: Theme.of(context).brightness == Brightness.light
                   ? Colors.black
                   : Colors.white,
-              fontSize: 22 * ratio),
+              fontSize: 22 * widget.ratio),
         ),
         progressColor: Colors.red,
       ),
-      progressColor: Colors.green,
+      progressColor: animation.value,
     );
   }
 
   double getGradeInDecimals(double grade) => grade / 100;
 
   String getGrade(BuildContext context) {
-    if (finalGrade != null) {
-      return finalGrade;
+    if (widget.finalGrade != null) {
+      return widget.finalGrade;
     }
 
-    if (studentGrade != null) {
+    if (widget.studentGrade != null) {
       return AppIntl.of(context)
-          .grades_grade_in_percentage(studentGrade.round());
+          .grades_grade_in_percentage(widget.studentGrade.round());
     }
 
     return AppIntl.of(context).grades_not_available;
   }
+
+  Color gradePercentageColor(double gradePercentage) {
+    const double passingGrade = 50.0;
+    const double minGoodGrade = 80.0;
+    const double maxGrade = 100.0;
+
+    Color startColor;
+    Color endColor;
+    double colorProportion = gradePercentage;
+
+    if (gradePercentage >= 0 && gradePercentage <= passingGrade) {
+      startColor = AppTheme.gradeFailureMin;
+      endColor = AppTheme.gradeFailureMax;
+      colorProportion /= passingGrade;
+    } else if (gradePercentage > passingGrade &&
+        gradePercentage <= minGoodGrade) {
+      startColor = AppTheme.gradePassing;
+      endColor = AppTheme.gradeGoodMin;
+      colorProportion -= passingGrade;
+      colorProportion /= minGoodGrade - passingGrade;
+    } else {
+      startColor = AppTheme.gradeGoodMin;
+      endColor = AppTheme.gradeGoodMax;
+
+      if (colorProportion >= maxGrade) {
+        colorProportion = 1;
+      } else {
+        colorProportion -= minGoodGrade;
+        colorProportion /= maxGrade - minGoodGrade;
+      }
+    }
+
+    return Color.lerp(startColor, endColor, colorProportion);
+  }
 }

pubspec.yaml

@@ -15,7 +15,7 @@ publish_to: 'none' # Remove this line if you wish to publish to pub.dev
 # In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
 # Read more about iOS versioning at
 # https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
-version: 4.0.3+1
+version: 4.0.4+1
 
 environment:
   sdk: ">=2.10.0 <3.0.0"