Как ограничить перетаскиваемый объект на кольце во флаттере?

Question

Я хочу создать перетаскиваемый круг, который может двигаться только по кольцу. Как

Сначала я думаю создать Stack . В этом стеке будет двое детей. Сначала, Контейнер и сделайте его в форме круга, и у него будет GestureDetetor в качестве дочернего элемента. А во-вторых, еще один Контейнер , который также имеет форму круга и имеет меньший радиус (я думал, что это может охватить область GestureDetector , которую я не хочу, чтобы она была активной для каких-либо жестов ).

Мой код похож на

 Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: <Widget>[
        Container(
          width: 200.0,
          height: 200.0,
          padding: EdgeInsets.all(1.0),
          decoration: BoxDecoration(
            color: Colors.yellow,
            shape: BoxShape.circle,
          ),
          child: Builder(
            builder: (context) {
              final handle = GestureDetector(
                onPanUpdate: _panHandler,
                child: Icon(
                  Icons.arrow_drop_down_circle,
                  size: 30.0,
                ),
              );
              return AnimatedBuilder(
                animation: valueListener,
                builder: (context, child) {
                  return Align(
                    alignment: Alignment(
                      (valueListener.value[0] * 2 - 1),
                      (valueListener.value[1] * 2 - 1),
                    ),
                    child: child,
                  );
                },
                child: handle,
              );
            },
          ),
        ),
        Container(
          height: 180.0,
          width: 180.0,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.green,
          ),
        ),
      ],
    );
  }

Однако этот код не может вообще ограничивать круг позиции ...