Repository navigation
SweepGradient startAngle doesn't work as expected. #23648
Description
I want to create something like this.
I use shader created from SweepGradient. Here's my code.
import 'package:flutter/material.dart';
import 'dart:math';
class Arc extends CustomPainter {
double doubleToAngle(double angle) => angle * pi / 180.0;
void drawArcWithRadius(
Canvas canvas, Offset center, double radius, double angle, Paint paint) {
canvas.drawArc(Rect.fromCircle(center: center, radius: radius),
doubleToAngle(-90.0), doubleToAngle(angle), false, paint);
}
@override
void paint(Canvas canvas, Size size) {
final Offset center = Offset(size.width / 2.0, size.height / 2.0);
final double radius = size.width / 3.0;
double angle = 210.0;
Paint paint = Paint()
..strokeCap = StrokeCap.round
..strokeWidth = 40.0
..style = PaintingStyle.stroke
..color = Colors.red
..shader = new SweepGradient(colors: [
Color(0xFFB4EC51),
Color(0xFF3023AE),
], startAngle: 0.0, endAngle: doubleToAngle(angle))
.createShader(Rect.fromCircle(center: center, radius: radius));
drawArcWithRadius(canvas, center, radius, angle, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}But it ends up something like this.
It seems like sweepAngle doesn't have any effect.
Activity
zoechi commentedon Oct 29, 2018
Please add the output of
flutter doctor -v.zoechi commentedon Oct 29, 2018
Is this only in an emulator (ios, Android?) or also on real devices (which ones)?
seniorbee commentedon Oct 29, 2018
seniorbee commentedon Oct 29, 2018
This is on a real device. It is Xiaomi Redmi 5. But in emulator there is another issue about gradient. Gradient colors doesn't smoothly change. They are rendered like solid colors. Here is a screenshot of emulator. With the same code.
yumi0629 commentedon Nov 2, 2018
I got the same problem, it seems that the part I circled above was been redrawn with the end color.
My solution is rotating the canvas:
Now, it looks right:
dubiao commentedon Nov 7, 2018
Good point.
baoxiehao commentedon Mar 26, 2019
Your code is not working for me.
I'm using following working code, hope it helps for someone need it:
where I'm using a square(so width == height), and the outerAngle is an animation value.
fantasy525 commentedon Apr 7, 2019
I set startAngle -90*(pi/180),but it is not working,I expect start point at -90 deg.It's a bug?
maryx commentedon May 14, 2019
I tried fiddling with the
startAngleandendAngle, and also changing the order of my stops (using the example here https://docs.flutter.io/flutter/painting/SweepGradient-class.html, pasted below) and it seems like the SweepGradient always starts in the middle right...which is not ideal. As @fantasy525 points out, I would expect starting at -math.pi/2 to rotate the entire gradient so that the blue (in the example) starts at the top.Maybe the descriptions of
startAngleandstopAngleare what cause confusion. I'm interpreting it asthe angle at which the color stop 0 begins, with 0 defined as the middle right of the screen. But maybe it should be interpreted asthe angle at which a gradient effect begins (all drawing begins on the middle right of the screen), so you can have a SweepGradient that only has a section that has a blurry gradient?The workaround is wrap the SweepGradient's Container in a RotatedBox, but I would prefer to just draw the gradient already in that orientation.
dnfield commentedon May 15, 2019
/cc @xqwzts in case he has any good ideas here..
6 remaining items
dnfield commentedon May 16, 2019
Ah! We're missing the local matrix parameter - with that you could rotate just the gradient.
dark-chocolate commentedon May 25, 2019
In your
build()method, use it like.Implementation (
MyPainterclass)dnfield commentedon Oct 11, 2019
I've added some examples in the linked PR, but you can now rotate just the gradient by specifying the
transformparameter in your gradient. Right now, onlyGradientRotationis implemented - if you give that theradiansto rotate, it should just work.dnfield commentedon Oct 11, 2019
And FWIW, I spent an inordinate amount of time trying to convince myself that there were no bugs elsewhere in the implementation for this, because I kept messing up the vector math - and of course, instead of thinking "Oh, I'm messing up the vector math", I kept thinking "Oh, maybe there's a bug in the engine code" or something :D. But now it's in there and it should be right :)
github-actions commentedon Aug 5, 2021
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.