134 points animation (#142)

* our grading animation * polishcapital animation * chore: format --------- Co-authored-by: Marcin Stepnowski <[email protected]>
KlubJagiellonski · Nov 28, 2024 · ff24f9b · ff24f9b
1 parent 610d21c
commit ff24f9b
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 52 deletions.
diff --git a/lib/pages/detail/company_score_widget.dart b/lib/pages/detail/company_score_widget.dart
@@ -66,15 +66,19 @@ class CompanyScoreWidget extends StatelessWidget {
         Padding(
           padding: const EdgeInsets.symmetric(vertical: 8.0),
           child: ClipRRect(
-            borderRadius: BorderRadius.circular(10.0),
-            child: LinearProgressIndicator(
-              value: data.plScore / 100.0,
-              backgroundColor: AppColors.buttonBackground,
-              valueColor:
-                  const AlwaysStoppedAnimation<Color>(AppColors.defaultRed),
-              minHeight: 12.0,
-            ),
-          ),
+              borderRadius: BorderRadius.circular(10.0),
+              child: TweenAnimationBuilder(
+                  duration: Duration(milliseconds: data.plScore * 10),
+                  tween: Tween<double>(begin: 0, end: data.plScore.toDouble()),
+                  builder: (_, double score, __) {
+                    return LinearProgressIndicator(
+                      value: score / 100.0,
+                      backgroundColor: AppColors.buttonBackground,
+                      valueColor: const AlwaysStoppedAnimation<Color>(
+                          AppColors.defaultRed),
+                      minHeight: 12.0,
+                    );
+                  })),
         ),
         const SizedBox(height: 17.0),
         Divider(

diff --git a/lib/pages/detail/polish_capital_graph.dart b/lib/pages/detail/polish_capital_graph.dart
@@ -17,57 +17,60 @@ class PolishCapitalGraph extends StatelessWidget {
       crossAxisAlignment: CrossAxisAlignment.center,
       children: [
         SizedBox(
-          height: size,
-          width: size,
-          child: SfRadialGauge(
-            axes: <RadialAxis>[
-              RadialAxis(
-                minimum: 0,
-                maximum: 100,
-                showLabels: false,
-                showTicks: false,
-                axisLineStyle: AxisLineStyle(
-                  thickness: thickness,
-                  cornerStyle: CornerStyle.bothCurve,
-                  color: AppColors.buttonBackground,
-                  thicknessUnit: GaugeSizeUnit.factor,
-                ),
-                pointers: <GaugePointer>[
-                  RangePointer(
-                    value: percentage,
-                    cornerStyle: CornerStyle.bothCurve,
-                    width: thickness,
-                    sizeUnit: GaugeSizeUnit.factor,
-                    color: AppColors.defaultRed,
-                  ),
-                ],
-                annotations: <GaugeAnnotation>[
-                  GaugeAnnotation(
-                    positionFactor: 0.01,
-                    angle: 90,
-                    widget: Text(
-                      '${percentage.toInt()}%',
-                      style: TextStyle(
-                        fontSize: 26.0,
-                        fontWeight: FontWeight.w700,
-                        fontFamily: FontFamily.lato,
-                         color: AppColors.text),
+            height: size,
+            width: size,
+            child: TweenAnimationBuilder(
+                duration: Duration(milliseconds: percentage.toInt() * 10),
+                tween: Tween<double>(begin: 0, end: percentage),
+                builder: (_, double score, __) {
+                  return SfRadialGauge(
+                    axes: <RadialAxis>[
+                      RadialAxis(
+                        minimum: 0,
+                        maximum: 100,
+                        showLabels: false,
+                        showTicks: false,
+                        axisLineStyle: AxisLineStyle(
+                          thickness: thickness,
+                          cornerStyle: CornerStyle.bothCurve,
+                          color: AppColors.buttonBackground,
+                          thicknessUnit: GaugeSizeUnit.factor,
+                        ),
+                        pointers: <GaugePointer>[
+                          RangePointer(
+                            value: score,
+                            cornerStyle: CornerStyle.bothCurve,
+                            width: thickness,
+                            sizeUnit: GaugeSizeUnit.factor,
+                            color: AppColors.defaultRed,
+                          ),
+                        ],
+                        annotations: <GaugeAnnotation>[
+                          GaugeAnnotation(
+                            positionFactor: 0.01,
+                            angle: 90,
+                            widget: Text(
+                              '${percentage.toInt()}%',
+                              style: TextStyle(
+                                  fontSize: 26.0,
+                                  fontWeight: FontWeight.w700,
+                                  fontFamily: FontFamily.lato,
+                                  color: AppColors.text),
+                            ),
+                          ),
+                        ],
                       ),
-                    ),
-
-                ],
-              ),
-            ],
-          ),
-        ),
+                    ],
+                  );
+                })),
         Padding(
           padding: const EdgeInsets.only(top: 0.0),
           child: Text(
             t.companyScreen.polishCapital,
             style: TextStyle(
               fontSize: 11.0,
               fontWeight: FontWeight.w400,
-               color: AppColors.text,
+              color: AppColors.text,
               fontFamily: FontFamily.lato,
             ),
           ),