如何使sweepGradient从颤动的圆顶开始应用？

Question

我想在颤动中创造这样的东西。

这是我的代码

import 'package:flutter/material.dart';
import 'dart:math';

class Arc extends CustomPainter {
    final double angle = 210.0;
double doubleToAngle(double angle) => angle * pi / 180.0;

Arc(this.angle);

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), true, 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;
    print("Size $size");
    print("Width ${size.width}");
    print("Size $center");
    print("Size $radius");
    Paint paint = Paint()
        ..strokeCap = StrokeCap.round
        ..strokeWidth = 20.0
        ..style = PaintingStyle.stroke
        ..color = Colors.red
        ..shader = new SweepGradient(
            colors: [
//          Color(0xFFFE7E00),
//          Color(0xFFFD0000),
                    Colors.green,
                    Colors.blue,
                ],
                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;
}
}

但我最终得到的是像这样的东西.似乎渐变不是从顶部开始的。我该如何解决这个问题？

Answer 1

小心SweepGradient的角度从3点钟方向开始，它们是顺时针方向。

所以你应该设置如下参数：

    final gradient = new SweepGradient(
      startAngle: 3 * math.pi / 2,
      endAngle: 7 * math.pi / 2,
      tileMode: TileMode.repeated,
      colors: [startColor, endColor],
    );

如果您愿意，请查看我的示例代码作为参考。 https://stackoverflow.com/a/54970376/845627