Flutter pie chart starting at top

Question

I want to create a pie chart (or rather a ring chart) that show how much of a given value (say 1000 euros) has been used up. I tried the packages pie_chart and fl_chart and while both draw nice charts, I cannot display it the exact way I want. What I get from both packages so far is this, where the smaller sections start anywhere on the ring:

What I want it to look like is this where the smaller sections start at the top and fill the space clockwise depending on how much of the available money is used up, similar to a progress indicator:

I tried rotating the chart, but the rotation degree is always depending on how much space the smaller sections take up and I don't know how to calculate that.

Answer 1

I found a solution here: https://stackoverflow.com/a/54709279/11487803 They use a stack with multiple CircularProgressIndicator to achieve this, but it should also be possible with a CircularPercentIndicator (where you have to set the background color to transparent to see the element behind)

Answer 2

The progress indicator package is quite flexible and can solve your problem

To get different color of your choice based on percentages, you can use this approach:

final double _profilePercentage = 0.25;

Color getProfileStatusColor() {
    switch ((_profilePercentage * 100).toInt()) {
      case 100:
        return kSuccessColor;
      case 75:
        return kSuccessColor;
      case 50:
        return kAccentColor;
      case 25:
        return kErrorColor;

      default:
        return kGreyColor;
    }
  }

where, the widget looks something like this:

LinearPercentIndicator(
                              width: MediaQuery.of(context).size.width * 0.85 -
                                  60.0,
                              animation: true,
                              lineHeight: 7.0,
                              animationDuration: 500,
                              percent: _profilePercentage,
                              linearStrokeCap: LinearStrokeCap.roundAll,
                              progressColor: getProfileStatusColor(),
                            ),