Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SweepGradient startAngle doesn't work as expected. #23648

Open
JuniorBee opened this Issue Oct 28, 2018 · 6 comments

Comments

Projects
None yet
4 participants
@JuniorBee
Copy link

JuniorBee commented Oct 28, 2018

I want to create something like this.
gear
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.
hvh6i
It seems like sweepAngle doesn't have any effect.

@zoechi

This comment has been minimized.

Copy link
Contributor

zoechi commented Oct 29, 2018

Please add the output of flutter doctor -v.

@zoechi zoechi added this to the Goals milestone Oct 29, 2018

@zoechi

This comment has been minimized.

Copy link
Contributor

zoechi commented Oct 29, 2018

Is this only in an emulator (ios, Android?) or also on real devices (which ones)?

@JuniorBee

This comment has been minimized.

Copy link
Author

JuniorBee commented Oct 29, 2018

Please add the output of flutter doctor -v.

[✓] Flutter (Channel beta, v0.9.4, on Mac OS X 10.13.6 17G65, locale en-AZ)
    • Flutter version 0.9.4 at /Users/mac/development/flutter
    • Framework revision f37c235c32 (5 weeks ago), 2018-09-25 17:45:40 -0400
    • Engine revision 74625aed32
    • Dart version 2.1.0-dev.5.0.flutter-a2eb050044

[✓] Android toolchain - develop for Android devices (Android SDK 28.0.2)
    • Android SDK at /Users/mac/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-28, build-tools 28.0.2
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b01)
    • All Android licenses accepted.

[!] iOS toolchain - develop for iOS devices
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
    ✗ libimobiledevice and ideviceinstaller are not installed. To install, run:
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install:
        brew install ios-deploy
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
        For more info, see https://flutter.io/platform-plugins
      To install:
        brew install cocoapods
        pod setup

[✓] Android Studio (version 3.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 28.0.1
    • Dart plugin version 173.4700
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b01)

[✓] Connected devices (1 available)
    • Android SDK built for x86 • emulator-5554 • android-x86 • Android 9 (API 28) (emulator)

! Doctor found issues in 1 category.
@JuniorBee

This comment has been minimized.

Copy link
Author

JuniorBee commented Oct 29, 2018

Is this only in an emulator (ios, Android?) or also on real devices (which ones)?

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.
screenshot_1540819171

@yumi0629

This comment has been minimized.

Copy link

yumi0629 commented Nov 2, 2018

image

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:

canvas.save();
canvas.translate(0.0, size.width);
canvas.rotate(degToRad(-90.0));
······
canvas.drawArc(
        arcRect, 0.0, degToRad(angle), false, paint);
canvas.restore();

Now, it looks right:
image

@dubiao

This comment has been minimized.

Copy link

dubiao commented Nov 7, 2018

I got the same problem, ...
My solution is rotating the canvas: ....

Good point.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.