edit pie chart

packages/edited_pie_chart/lib/src/chart_painter.dart

@@ -63,23 +63,15 @@ class PieChartPainter extends CustomPainter {
   @override
   void paint(Canvas canvas, Size size) {
     final side = size.width < size.height ? size.width : size.height;
-    _prevAngle = this.initialAngle * math.pi / 180;
+    _prevAngle = initialAngle * math.pi / 180;
     for (int i = 0; i < _subParts.length; i++) {
       canvas.drawArc(
-        new Rect.fromLTWH(0.0, 0.0, side, size.height),
+        Rect.fromLTWH(0.0, 0.0, side, size.height),
         _prevAngle,
         (((_totalAngle) / _total) * _subParts[i]),
         chartType == ChartType.disc ? true : false,
         _paintList[i],
       );
-      if (selected)
-        canvas.drawArc(
-          new Rect.fromLTWH(-8, -8, side + 16, size.height + 16),
-          _prevAngle,
-          (((_totalAngle) / _total) * _subParts[i]),
-          chartType == ChartType.disc ? true : false,
-          _paintList[i]..color = _paintList[i].color.withOpacity(0.4),
-        );
       final radius = showChartValuesOutside ? (side / 2) + 16 : side / 3;
       final x = (radius) * math.cos(_prevAngle + ((((_totalAngle) / _total) * _subParts[i]) / 2));
       final y = (radius) * math.sin(_prevAngle + ((((_totalAngle) / _total) * _subParts[i]) / 2));
@@ -94,9 +86,18 @@ class PieChartPainter extends CustomPainter {
 //         final name = showValuesInPercentage ? (((_subParts.elementAt(i) / _total) * 100).toStringAsFixed(this.decimalPlaces) + '%') : _subTitles.elementAt(i);
 
         if (showChartValues) {
-          final name = _subTitles[i] + "  " + (showValuesInPercentage ? (((_subParts.elementAt(i) / _total) * 100).toStringAsFixed(this.decimalPlaces) + '%') : value);
+          final name = "${_subTitles[i]}  " + (showValuesInPercentage ? (((_subParts.elementAt(i) / _total) * 100).toStringAsFixed(this.decimalPlaces) + '%') : value);
-          if (selected) _drawLabel(canvas, name, x, y - 30, side, true, statusColor: getColor(colorList, i));
+          var yLabel = y > 0 ? y + 40 : y - 20;
-          _drawLabel(canvas, _subTitles[i], (y > 0 ? x - y : x * 1.7) - 32, y, side + 8, false);
+          var xLabel = (y > 0 ? x - y : x * 1.6) - 20;
+          var yPopup = y;
+          if (_subParts[i] <= (_total / _subParts.length)) {
+            yLabel = y;
+            xLabel *= 1.1;
+            yPopup *= 1.25;
+          }
+
+          if (selected) _drawLabel(canvas, name, x, yPopup, side, true, statusColor: getColor(colorList, i));
+          _drawLabel(canvas, _subTitles[i], xLabel, yLabel, side + 8, false);
         }
       }
       _prevAngle = _prevAngle + (((_totalAngle) / _total) * _subParts[i]);
@@ -123,15 +124,15 @@ class PieChartPainter extends CustomPainter {
         height: tp.height + 16,
       );
       final rect2 = Rect.fromCenter(
-        center: new Offset(
+        center: Offset(
           (side / 2 + x) - ((tp.width - 16) / 2),
           (side / 2 + y) - ((tp.height - 16) / 2),
         ),
         width: 12,
         height: 12,
       );
-      final rRect = RRect.fromRectAndRadius(rect, Radius.circular(8));
+      final rRect = RRect.fromRectAndRadius(rect, const Radius.circular(8));
-      final rRect2 = RRect.fromRectAndRadius(rect2, Radius.circular(1));
+      final rRect2 = RRect.fromRectAndRadius(rect2, const Radius.circular(1));
       final paint = Paint()
         ..color = chartValueBackgroundColor ?? Colors.grey[200]
         ..style = PaintingStyle.fill;
@@ -141,7 +142,7 @@ class PieChartPainter extends CustomPainter {
     //Finally paint the text above box
     tp.paint(
       canvas,
-      new Offset(
+      Offset(
         (side / 2 + x) - ((tp.width - 50) / 2),
         (side / 2 + y) - ((tp.height) / 2),
       ),
@@ -149,5 +150,5 @@ class PieChartPainter extends CustomPainter {
   }
 
   @override
-  bool shouldRepaint(PieChartPainter oldDelegate) => oldDelegate._totalAngle != _totalAngle || selected != oldDelegate.selected;
+  bool shouldRepaint(PieChartPainter oldDelegate) => selected != oldDelegate.selected;
 }

packages/edited_pie_chart/lib/src/pie_chart.dart

@@ -10,7 +10,7 @@ enum LegendPosition { top, bottom, left, right }
 enum ChartType { disc, ring }
 
 class PieChart extends StatefulWidget {
-  PieChart({
+  const PieChart({
     @required this.dataMap,
     this.chartType = ChartType.disc,
     this.chartRadius,
@@ -55,11 +55,11 @@ class _PieChartState extends State<PieChart> with SingleTickerProviderStateMixin
   List<double> legendValues;
 
   void initLegends() {
-    this.legendTitles = widget.dataMap.keys.toList(growable: false);
+    legendTitles = widget.dataMap.keys.toList(growable: false);
   }
 
   void initValues() {
-    this.legendValues = widget.dataMap.values.toList(growable: false);
+    legendValues = widget.dataMap.values.toList(growable: false);
   }
 
   void initData() {
@@ -76,7 +76,7 @@ class _PieChartState extends State<PieChart> with SingleTickerProviderStateMixin
     super.initState();
     initData();
     controller = AnimationController(
-      duration: widget.animationDuration ?? Duration(milliseconds: 800),
+      duration: widget.animationDuration ?? const Duration(milliseconds: 800),
       vsync: this,
     );
     final Animation curve = CurvedAnimation(
@@ -85,9 +85,8 @@ class _PieChartState extends State<PieChart> with SingleTickerProviderStateMixin
     );
     animation = Tween<double>(begin: 0, end: 1).animate(curve)
       ..addListener(() {
-        setState(() {
+        _animFraction = animation.value;
-          _animFraction = animation.value;
+        setState(() {});
-        });
       });
     controller.forward();
   }
@@ -98,39 +97,64 @@ class _PieChartState extends State<PieChart> with SingleTickerProviderStateMixin
         alignment: Alignment.center,
         children: [
           LayoutBuilder(
-            builder: (_, c) => Container(
+            builder: (_, c) => SizedBox(
               height: widget.chartRadius != null
                   ? c.maxWidth < widget.chartRadius
                       ? c.maxWidth
                       : widget.chartRadius
                   : null,
-              child: InkWell(
+              child: GestureDetector(
-                onTap: () {
+                onTapDown: (details) {
-                  setState(() {
+                  _selected = !_selected;
-                    _selected = !_selected;
+                  setState(() {});
-                  });
                 },
-                child: CustomPaint(
+                child: Stack(
-                  painter: PieChartPainter(
+                  children: [
-                    _animFraction,
+                    if (_selected)
-                    widget.chartValuesOptions.showChartValues,
+                      CustomPaint(
-                    widget.chartValuesOptions.showChartValuesOutside,
+                        painter: PieChartPainter(
-                    widget.colorList,
+                          _animFraction,
-                    chartValueStyle: widget.chartValuesOptions.chartValueStyle,
+                          widget.chartValuesOptions.showChartValues,
-                    chartValueBackgroundColor: widget.chartValuesOptions.chartValueBackgroundColor,
+                          widget.chartValuesOptions.showChartValuesOutside,
-                    values: legendValues,
+                          widget.colorList.map((e) => e.withOpacity(0.4)).toList(),
-                    titles: legendTitles,
+                          chartValueStyle: widget.chartValuesOptions.chartValueStyle,
-                    initialAngle: widget.initialAngleInDegree,
+                          chartValueBackgroundColor: widget.chartValuesOptions.chartValueBackgroundColor,
-                    showValuesInPercentage: widget.chartValuesOptions.showChartValuesInPercentage,
+                          values: legendValues,
-                    decimalPlaces: widget.chartValuesOptions.decimalPlaces,
+                          titles: legendTitles,
-                    showChartValueLabel: widget.chartValuesOptions.showChartValueBackground,
+                          initialAngle: widget.initialAngleInDegree,
-                    chartType: widget.chartType,
+                          showValuesInPercentage: widget.chartValuesOptions.showChartValuesInPercentage,
-                    formatChartValues: widget.formatChartValues,
+                          decimalPlaces: widget.chartValuesOptions.decimalPlaces,
-                    strokeWidth: widget.ringStrokeWidth,
+                          showChartValueLabel: widget.chartValuesOptions.showChartValueBackground,
-                    selected: _selected,
+                          chartType: widget.chartType,
-                    sideTextStyle: widget.sideTextStyle,
+                          formatChartValues: widget.formatChartValues,
-                  ),
+                          strokeWidth: widget.ringStrokeWidth + 10,
-                  child: AspectRatio(aspectRatio: 1),
+                          sideTextStyle: widget.sideTextStyle,
+                        ),
+                        child: const AspectRatio(aspectRatio: 1),
+                      ),
+                    CustomPaint(
+                      painter: PieChartPainter(
+                        _animFraction,
+                        widget.chartValuesOptions.showChartValues,
+                        widget.chartValuesOptions.showChartValuesOutside,
+                        widget.colorList,
+                        chartValueStyle: widget.chartValuesOptions.chartValueStyle,
+                        chartValueBackgroundColor: widget.chartValuesOptions.chartValueBackgroundColor,
+                        values: legendValues,
+                        titles: legendTitles,
+                        initialAngle: widget.initialAngleInDegree,
+                        showValuesInPercentage: widget.chartValuesOptions.showChartValuesInPercentage,
+                        decimalPlaces: widget.chartValuesOptions.decimalPlaces,
+                        showChartValueLabel: widget.chartValuesOptions.showChartValueBackground,
+                        chartType: widget.chartType,
+                        formatChartValues: widget.formatChartValues,
+                        strokeWidth: widget.ringStrokeWidth,
+                        selected: _selected,
+                        sideTextStyle: widget.sideTextStyle,
+                      ),
+                      child: const AspectRatio(aspectRatio: 1),
+                    ),
+                  ],
                 ),
               ),
             ),
@@ -147,11 +171,7 @@ class _PieChartState extends State<PieChart> with SingleTickerProviderStateMixin
         return Column(
           mainAxisSize: MainAxisSize.min,
           children: <Widget>[
-            _getLegend(
+            _getLegend(padding: EdgeInsets.only(bottom: widget.chartLegendSpacing)),
-              padding: EdgeInsets.only(
-                bottom: widget.chartLegendSpacing,
-              ),
-            ),
             _getChart(),
           ],
         );
@@ -161,22 +181,14 @@ class _PieChartState extends State<PieChart> with SingleTickerProviderStateMixin
           mainAxisSize: MainAxisSize.min,
           children: <Widget>[
             _getChart(),
-            _getLegend(
+            _getLegend(padding: EdgeInsets.only(top: widget.chartLegendSpacing)),
-              padding: EdgeInsets.only(
-                top: widget.chartLegendSpacing,
-              ),
-            ),
           ],
         );
       case LegendPosition.left:
         return Row(
           mainAxisSize: MainAxisSize.min,
           children: <Widget>[
-            _getLegend(
+            _getLegend(padding: EdgeInsets.only(right: widget.chartLegendSpacing)),
-              padding: EdgeInsets.only(
-                right: widget.chartLegendSpacing,
-              ),
-            ),
             _getChart(),
           ],
         );
@@ -185,11 +197,7 @@ class _PieChartState extends State<PieChart> with SingleTickerProviderStateMixin
           mainAxisSize: MainAxisSize.min,
           children: <Widget>[
             _getChart(),
-            _getLegend(
+            _getLegend(padding: EdgeInsets.only(left: widget.chartLegendSpacing)),
-              padding: EdgeInsets.only(
-                left: widget.chartLegendSpacing,
-              ),
-            ),
           ],
         );
       default:
@@ -230,18 +238,16 @@ class _PieChartState extends State<PieChart> with SingleTickerProviderStateMixin
               .toList(),
         ),
       );
-    } else
+    } else {
-      return SizedBox(
+      return const SizedBox(height: 0, width: 0);
-        height: 0,
+    }
-        width: 0,
-      );
   }
 
   @override
   Widget build(BuildContext context) {
     return Container(
       alignment: Alignment.center,
-      padding: EdgeInsets.all(8.0),
+      padding: const EdgeInsets.all(8.0),
       child: _getPieChart(),
     );
   }

pubspec.lock

@@ -904,7 +904,7 @@ packages:
   pie_chart:
     dependency: "direct main"
     description:
-      path: "packages/pie_chart"
+      path: "packages/edited_pie_chart"
       relative: true
     source: path
     version: "4.0.1"

pubspec.yaml

@@ -73,7 +73,7 @@ dependencies:
   shimmer: ^2.0.0
   flutter_advanced_switch: ^3.0.1
   pie_chart:
-    path: packages/pie_chart
+    path: packages/edited_pie_chart
   table_calendar: ^3.0.8
   image_cropper: ^3.0.3
   touchable: ^0.2.1