Custom Widget: Charts ( Pie Chart - sample 1 )

[landing_logo.jpeg]Checked: 29 April 2022 Hi FF community, Hope this custom widget useful for someone..A customizable Pie chart

 
Preview:[pie_chart_sample_2.gif]Package (pubspec dependency):
fl_chart
https://pub.dev/packages/fl_chart

Additional parameters:[Screen Shot 1443-07-12 at 2.50.51 AM.png]Code:
import 'package:fl_chart/fl_chart.dart';
class PieChartSample1 extends StatefulWidget {
  const PieChartSample1({
    Key key,
    this.width,
    this.height,
    this.backgroundColor,
    this.title1,
    this.title1Color,
    this.title2,
    this.title2Color,
    this.title3,
    this.title3Color,
    this.title4,
    this.title4Color,
    this.value1,
    this.value2,
    this.value3,
    this.value4,
  }) : super(key: key);

  final double width;
  final double height;
  final Color backgroundColor;
  final String title1;
  final Color title1Color;
  final String title2;
  final Color title2Color;
  final String title3;
  final Color title3Color;
  final String title4;
  final Color title4Color;
  final double value1;
  final double value2;
  final double value3;
  final double value4;

  @override
  _PieChartSample1State createState() => _PieChartSample1State();
}

class _PieChartSample1State extends State {
  int touchedIndex = -1;

  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: 1.3,
      child: Card(
        color: widget.backgroundColor,
        child: Row(
          children: [
            const SizedBox(
              height: 18,
            ),
            Expanded(
              child: AspectRatio(
                aspectRatio: 1,
                child: PieChart(
                  PieChartData(
                      pieTouchData: PieTouchData(touchCallback:
                          (FlTouchEvent event, pieTouchResponse) {
                        setState(() {
                          if (!event.isInterestedForInteractions ||
                              pieTouchResponse == null ||
                              pieTouchResponse.touchedSection == null) {
                            touchedIndex = -1;
                            return;
                          }
                          touchedIndex = pieTouchResponse
                              .touchedSection.touchedSectionIndex;
                        });
                      }),
                      borderData: FlBorderData(
                        show: false,
                      ),
                      sectionsSpace: 0,
                      centerSpaceRadius: 40,
                      sections: showingSections()),
                ),
              ),
            ),
            Column(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.end,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Indicator(
                  color: widget.title1Color,
                  text: widget.title1,
                  isSquare: true,
                ),
                SizedBox(
                  height: 4,
                ),
                Indicator(
                  color: widget.title2Color,
                  text: widget.title2,
                  isSquare: true,
                ),
                SizedBox(
                  height: 4,
                ),
                Indicator(
                  color: widget.title3Color,
                  text: widget.title3,
                  isSquare: true,
                ),
                SizedBox(
                  height: 4,
                ),
                Indicator(
                  color: widget.title4Color,
                  text: widget.title4,
                  isSquare: true,
                ),
                SizedBox(
                  height: 18,
                ),
              ],
            ),
            const SizedBox(
              width: 28,
            ),
          ],
        ),
      ),
    );
  }

  List showingSections() {
    return List.generate(4, (i) {
      final isTouched = i == touchedIndex;
      final fontSize = isTouched ? 25.0 : 16.0;
      final radius = isTouched ? 60.0 : 50.0;
      switch (i) {
        case 0:
          return PieChartSectionData(
            color: widget.title1Color,
            value: widget.value1,
            title: widget.value1.toString() + '%',
            radius: radius,
            titleStyle: TextStyle(
                fontSize: fontSize,
                fontWeight: FontWeight.bold,
                color: const Color(0xffffffff)),
          );
        case 1:
          return PieChartSectionData(
            color: widget.title2Color,
            value: widget.value2,
            title: widget.value2.toString() + '%',
            radius: radius,
            titleStyle: TextStyle(
                fontSize: fontSize,
                fontWeight: FontWeight.bold,
                color: const Color(0xffffffff)),
          );
        case 2:
          return PieChartSectionData(
            color: widget.title3Color,
            value: widget.value3,
            title: widget.value3.toString() + '%',
            radius: radius,
            titleStyle: TextStyle(
                fontSize: fontSize,
                fontWeight: FontWeight.bold,
                color: const Color(0xffffffff)),
          );
        case 3:
          return PieChartSectionData(
            color: widget.title4Color,
            value: widget.value4,
            title: widget.value4.toString() + '%',
            radius: radius,
            titleStyle: TextStyle(
                fontSize: fontSize,
                fontWeight: FontWeight.bold,
                color: const Color(0xffffffff)),
          );
        default:
          throw Error();
      }
    });
  }
}
class Indicator extends StatelessWidget {
  final Color color;
  final String text;
  final bool isSquare;
  final double size;
  final Color textColor;

  const Indicator({
    Key key,
    this.color,
    this.text,
    this.isSquare,
    this.size = 16,
    this.textColor = const Color(0xff505050),
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Container(
          width: size,
          height: size,
          decoration: BoxDecoration(
            shape: isSquare ? BoxShape.rectangle : BoxShape.circle,
            color: color,
          ),
        ),
        const SizedBox(
          width: 4,
        ),
        Text(
          text,
          style: TextStyle(
              fontSize: 16, fontWeight: FontWeight.bold, color: textColor),
        )
      ],
    );
  }
} 

Of course, you can modify, add and delete according to your needs and your use-case....😉👍