animation functionality added to RadarChart

creky · Feb 18, 2021 · 5221f9f · 5221f9f
1 parent 2bc83df
commit 5221f9f
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 27 deletions.
diff --git a/example/lib/radar_chart/samples/radar_chart_sample1.dart b/example/lib/radar_chart/samples/radar_chart_sample1.dart
@@ -31,21 +31,23 @@ class _RadarChartSampleState extends State<RadarChartSample> {
                 fontSize: 10,
               ),
               titleTextStyle: const TextStyle(
-                color: Colors.blue,
+                color: Colors.red,
                 fontSize: 14,
               ),
               radarTouchData: RadarTouchData(touchCallback: (response) {
-                setState(() {
-                  log('response type: ${response.touchInput}');
+                log('response type: ${response.touchInput}');
 
-                  if (response.touchedSpot != null &&
-                      response.touchInput is! FlPanEnd &&
-                      response.touchInput is! FlLongPressEnd) {
+                if (response.touchedSpot != null &&
+                    response.touchInput is! FlPanEnd &&
+                    response.touchInput is! FlLongPressEnd) {
+                  setState(() {
                     touchedDataSetIndex = response?.touchedSpot?.touchedDataSetIndex ?? -1;
-                  } else {
+                  });
+                } else {
+                  setState(() {
                     touchedDataSetIndex = -1;
-                  }
-                });
+                  });
+                }
               })),
         ),
       ),
@@ -60,7 +62,7 @@ class _RadarChartSampleState extends State<RadarChartSample> {
           const RadarEntry(value: 28),
           const RadarEntry(value: 25),
         ],
-        borderWidth: 3,
+        borderWidth: touchedDataSetIndex == 0 ? 4 : 3,
         color: Colors.red,
         entryRadius: (touchedDataSetIndex == 0) ? 6.0 : 3.0,
       ),
@@ -70,7 +72,7 @@ class _RadarChartSampleState extends State<RadarChartSample> {
           const RadarEntry(value: 20),
           const RadarEntry(value: 30),
         ],
-        borderWidth: 3,
+        borderWidth: touchedDataSetIndex == 1 ? 4 : 3,
         color: Colors.orange,
         entryRadius: (touchedDataSetIndex == 1) ? 6.0 : 3.0,
       ),

diff --git a/lib/src/chart/radar_chart/radar_chart.dart b/lib/src/chart/radar_chart/radar_chart.dart
@@ -5,18 +5,20 @@ import 'package:fl_chart/src/chart/radar_chart/radar_chart_painter.dart';
 import 'package:fl_chart/src/utils/utils.dart';
 import 'package:flutter/material.dart';
 
-//ToDo(payam) : extend this widget from [ImplicitlyAnimatedWidget]
-class RadarChart extends StatefulWidget {
+class RadarChart extends ImplicitlyAnimatedWidget {
   final RadarChartData data;
 
-  const RadarChart(this.data, {Key key}) : super(key: key);
+  const RadarChart(
+    this.data, {
+    Key key,
+    Duration swapAnimationDuration = const Duration(milliseconds: 150),
+  }) : super(key: key, duration: swapAnimationDuration);
 
   @override
   _RadarChartState createState() => _RadarChartState();
 }
 
-//ToDo(payam) : handle animation
-class _RadarChartState extends State<RadarChart> {
+class _RadarChartState extends AnimatedWidgetBaseState<RadarChart> {
   /// we handle under the hood animations (implicit animations) via this tween,
   /// it lerps between the old [PieChartData] to the new one.
   RadarChartDataTween _radarChartDataTween;
@@ -116,9 +118,8 @@ class _RadarChartState extends State<RadarChart> {
         key: _chartKey,
         size: getDefaultSize(context),
         painter: RadarChartPainter(
-          widget.data,
-          //ToDo(payam) : update it for animations
-          widget.data,
+          _radarChartDataTween.evaluate(animation),
+          showingData,
           (touchHandler) {
             setState(() {
               _touchHandler = touchHandler;
@@ -149,4 +150,13 @@ class _RadarChartState extends State<RadarChart> {
   bool _canHandleTouch(RadarTouchResponse response, RadarTouchData touchData) {
     return response != null && touchData != null && touchData.touchCallback != null;
   }
+
+  @override
+  void forEachTween(visitor) {
+    _radarChartDataTween = visitor(
+      _radarChartDataTween,
+      widget.data,
+      (dynamic value) => RadarChartDataTween(begin: value),
+    );
+  }
 }
diff --git a/lib/src/chart/radar_chart/radar_chart_data.dart b/lib/src/chart/radar_chart/radar_chart_data.dart
@@ -95,7 +95,7 @@ class RadarChartData extends BaseChartData {
           t,
         ),
         tickCount: lerpInt(a.tickCount, b.tickCount, t),
-        ticksTextStyle: TextStyle.lerp(a.ticksTextStyle, b.titleTextStyle, t),
+        ticksTextStyle: TextStyle.lerp(a.ticksTextStyle, b.ticksTextStyle, t),
         gridData: BorderSide.lerp(a.gridData, b.gridData, t),
         borderData: FlBorderData.lerp(a.borderData, b.borderData, t),
         radarTouchData: b.radarTouchData,

diff --git a/lib/src/chart/radar_chart/radar_chart_painter.dart b/lib/src/chart/radar_chart/radar_chart_painter.dart
@@ -1,3 +1,4 @@
+import 'dart:developer';
 import 'dart:math' show pi, cos, sin, min;
 import 'dart:ui';
 
@@ -15,6 +16,8 @@ class RadarChartPainter extends BaseChartPainter<RadarChartData>
 
   List<RadarDataSetsPosition> dataSetsPosition;
 
+
+
   RadarChartPainter(
     RadarChartData data,
     RadarChartData targetData,
@@ -97,11 +100,7 @@ class RadarChartPainter extends BaseChartPainter<RadarChartData>
     });
   }
 
-  double radarCenterY(Size size) => size.height / 2.0;
 
-  double radarCenterX(Size size) => size.width / 2.0;
-
-  double radarRadius(Size size) => min(radarCenterX(size), radarCenterY(size)) * 0.7;
 
   void drawGrids(Size size, Canvas canvas) {
     final centerX = radarCenterX(size);
@@ -179,7 +178,7 @@ class RadarChartPainter extends BaseChartPainter<RadarChartData>
       _graphBorderPaint
         ..color = graph.color
         ..style = PaintingStyle.stroke
-        ..strokeWidth = 2.0
+        ..strokeWidth = graph.borderWidth
         ..isAntiAlias = true;
 
       _graphPointPaint
@@ -225,6 +224,12 @@ class RadarChartPainter extends BaseChartPainter<RadarChartData>
     return RadarTouchResponse(touchedSpot, touchInput);
   }
 
+  double radarCenterY(Size size) => size.height / 2.0;
+
+  double radarCenterX(Size size) => size.width / 2.0;
+
+  double radarRadius(Size size) => min(radarCenterX(size), radarCenterY(size)) * 0.7;
+
   RadarTouchedSpot _getNearestTouchSpot(
     Size viewSize,
     Offset touchedPoint,
@@ -289,9 +294,12 @@ class RadarChartPainter extends BaseChartPainter<RadarChartData>
 
   @override
   bool shouldRepaint(RadarChartPainter oldDelegate) {
-    //ToDo(payam) : override this method
-    return true;
+    final repaint = oldDelegate.data != data;
+    log('repaint radar chart: $repaint');
+    return repaint;
   }
+
+
 }
 
 class RadarDataSetsPosition {