Gradient doesn't start on the start of the arc

[mariapapag95]

Hi, thank you for your videos and sharing this source code!
I have followed your tutorial and created my own pie chart, but I am stuck on this issue.
The gradient starts at a center right spot (3 o'clock) and I would like to change it to the top (12 o'clock)

I have gone into the paint method in class ProgressRings and changed the value of gradientStartAngle, but it doesn't change.

Please advise!

Full code here
`import 'dart:ui';
import 'package:google_fonts/google_fonts.dart';
import 'package:flutter/material.dart';
import 'dart:math';
import '../../theme.dart';

class ProgressRing extends StatefulWidget {
final Map shiftInfo;
final String status;
ProgressRing({required this.shiftInfo, required this.status});
@OverRide
State createState() => _ProgressRingState();
}

class _ProgressRingState extends State {
List categories = [];

initState() {
super.initState();
}

static var greyGradient = [
ThemeColors.grey,
ThemeColors.lightBlue,
];

static var greenGradient = [
Color.fromRGBO(223, 250, 92, 1),
Color.fromRGBO(129, 250, 112, 1)
];

static var yellowGradient = [
ThemeColors.yellow,
ThemeColors.yellow,
];

static var blueGradient = [
Color.fromRGBO(91, 253, 199, 1),
Color.fromRGBO(129, 182, 205, 1)
];

Widget blankInsideRingInfo() {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Complete:',
style: TextStyle(fontSize: 25, fontWeight: FontWeight.w300)),
Text('0h 00m',
style: GoogleFonts.questrial(
fontSize: 40,
letterSpacing: 1,
fontWeight: FontWeight.w200,
fontFeatures: [
FontFeature.tabularFigures(),
])),
],
),
Container(height: 30),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Remaining:',
style: TextStyle(fontSize: 25, fontWeight: FontWeight.w300)),
Text('0h 00m',
style: GoogleFonts.questrial(
fontSize: 40,
letterSpacing: 1,
fontWeight: FontWeight.w200,
fontFeatures: [
FontFeature.tabularFigures(),
])),
],
),
],
);
}

Widget insideRingInfo() {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Complete:',
style: TextStyle(fontSize: 25, fontWeight: FontWeight.w300)),
Text('5h 48m',
style: TextStyle(fontSize: 32, fontFeatures: [
FontFeature.tabularFigures(),
])),
],
),
Container(height: 30),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Remaining:',
style: TextStyle(fontSize: 25, fontWeight: FontWeight.w300)),
Text('4h 12m',
style: TextStyle(fontSize: 32, fontFeatures: [
FontFeature.tabularFigures(),
])),
],
),
// Row(
// mainAxisAlignment: MainAxisAlignment.center,
// children: [
// Text('Time Remaining: ',
// style: TextStyle(fontSize: 20, fontWeight: FontWeight.w600)),
// Text('4:12',
// style: TextStyle(
// fontSize: 20,
// )),
// ],
// ),
],
);
}

Widget smallInsideRingInfo() {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Complete:',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.w300)),
Text('5h 48m',
// style: TextStyle(
// fontSize: 28,
// fontWeight: FontWeight.w200,
// fontFeatures: [
// FontFeature.tabularFigures(),
// ])
style: GoogleFonts.questrial(
fontSize: 32,
letterSpacing: 1,
fontWeight: FontWeight.w200,
fontFeatures: [
FontFeature.tabularFigures(),
])),
],
),
Container(height: 10),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Remaining:',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.w300)),
Text('4h 12m',
// style: TextStyle(
// fontSize: 28,
// fontWeight: FontWeight.w200,
// fontFeatures: [
// FontFeature.tabularFigures(),
// ])
style: GoogleFonts.questrial(
fontSize: 32,
letterSpacing: 1,
fontWeight: FontWeight.w200,
fontFeatures: [
FontFeature.tabularFigures(),
])),
],
),
],
);
}

Widget currentShift(){
return Padding(
padding: const EdgeInsets.all(20),
child: CustomPaint(
child: Center(),
painter: Rings(
completedPercentage: 0.35,
circleWidth: 30.0,
gradient: yellowGradient,
gradientStartAngle: 0.0,
gradientEndAngle: pi / 2,
progressStartAngle: 1.85,
),
),
);
}

Widget upcomingShift(){
return Padding(
padding: const EdgeInsets.all(20),
child: CustomPaint(
child: Center(),
painter: Rings(
completedPercentage: .95,
circleWidth: 30.0,
gradient: greyGradient,
gradientStartAngle: 0,
gradientEndAngle: 5,
progressStartAngle: 0,
),
),
);
}

@OverRide
Widget build(BuildContext context) {
return
Center(
// Container of the pie chart
child: Container(
height: MediaQuery.of(context).size.width,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
shape: BoxShape.circle,
),
child: widget.status == 'clocked out' ? upcomingShift() : currentShift()
),
);
}
}

class Rings extends CustomPainter {
/// From 0.0 to 1.0
final double completedPercentage;
final double circleWidth;
final List gradient;
final double gradientStartAngle;
final double gradientEndAngle;
final double progressStartAngle;
final double lengthToRemove;

Rings({
required this.completedPercentage,
required this.circleWidth,
required this.gradient,
this.gradientStartAngle = 3 * pi / 2,
this.gradientEndAngle = 4 * pi / 2,
this.progressStartAngle = 0,
this.lengthToRemove = 0,
});

@OverRide
void paint(Canvas canvas, Size size) {
Offset center = Offset(size.width / 2, size.height / 2);
double radius = min(size.width / 2, size.height / 2);

double arcAngle = 2 * pi * (completedPercentage);

Rect boundingSquare = Rect.fromCircle(center: center, radius: radius);

paint(List<Color> colors,
    {double startAngle = 0.0, double endAngle = pi * 2}) {
  final Gradient gradient = SweepGradient(
    startAngle: startAngle,
    endAngle: endAngle,
    colors: colors,
  );

  return Paint()
    ..strokeCap = StrokeCap.round
    ..style = PaintingStyle.stroke
    ..strokeWidth = circleWidth
    ..shader = gradient.createShader(boundingSquare);
}

canvas.drawArc(
  boundingSquare,
  -pi / 2,
  arcAngle - lengthToRemove,
  false,
  paint(
    gradient,
    startAngle: gradientStartAngle,
    endAngle: gradientEndAngle,
  ),
);

}

@OverRide
bool shouldRepaint(CustomPainter painter) => true;
}
`