graphx dial rotation

dial.dart

/// roipeker 2021

/// sample video:
/// https://media.giphy.com/media/xC8rB3jR9nXDJDMwQM/source.mp4

/// add graphx to your pubspec.
/// Add in ur code:
/// SceneBuilderWidget(builder: () => SceneController(front: SceneDialer()),),

import 'package:flutter/material.dart';
import 'package:graphx/graphx.dart';
import 'package:graphx_dial/colors.dart';

const pinkColor = Color(0xffDD3D5C);


class SceneDialer extends Sprite {
  Dialer dialer;
  @override
  void addedToStage() {
    dialer = Dialer(this);
    dialer.y = dialer.radius - kToolbarHeight;
    dialer.x = 240 + dialer.radius;
  }
}

class Dialer extends Sprite {
  double radius = 700 / 2;

  Dialer([Sprite doc]) {
    _draw();
    doc?.addChild(this);

    bg.mouseUseShape = true;
    bg.onMouseDown.add((event) {
      isPressed = true;
      pressed.setTo(mouseX, mouseY);
      prevRot = bg.rotation;
      pressRot = atan2(mouseY, mouseX); //bg.rotation;
      stage.onMouseUp.add((event) {
        isPressed = false;
      });
    });
  }

  bool isPressed = false;
  GxPoint pressed = GxPoint();
  double prevRot = 0.0;
  double pressRot = 0.0;

  @override
  void update(double delta) {
    super.update(delta);
    if (isPressed) {
      var angle = atan2(mouseY, mouseX);
      bg.rotation = prevRot + (angle - pressRot);
    }
  }

  Shape bg;
  void _draw() {
    bg = Shape();
    addChild(bg);
    final g = bg.graphics;


    g
        .beginFill(0x0, .2)
        .lineStyle(4, pinkColor.value)
        .drawCircle(0, 0, radius)
        .endFill();

    final smallRadius = radius * .96;
    // g.lineStyle(0, 0xffffff, .2);
    // g.drawCircle(0, 0, smallRadius).endFill();

    g.lineStyle(1, 0x574549, .8);
    double shortLine = 24;
    double longLine = 36;
    for (var i = 0.0; i < 360; ++i) {
      var angle = deg2rad(i);
      var lineSize = i % 5 == 0 ? longLine : shortLine;
      var innerRadius = smallRadius - lineSize;
      var cos1 = cos(angle), sin1 = sin(angle);
      g.moveTo(cos1 * smallRadius, sin1 * smallRadius);
      g.lineTo(cos1 * innerRadius, sin1 * innerRadius);

      /// debug circle.
      if (i == 180) {
        g.drawCircle(cos1 * innerRadius, sin1 * innerRadius, 20);
      }
    }
  }
}