Как сделать джойстик во флаттере, где внутренний круг не покидает внешний круг?

Question

Я пытаюсь создать джойстик во флаттере, но я не могу надлежащим образом ограничить внутренний круг внутри внешнего круга, есть ли какие-либо предположения для этого? Также возможно ли для внешнего круга установить изображение в качестве фона ... Я пытался ограничить его с помощью диапазона смещений, но я не уверен, что это правильный способ сделать это ..... Вот мой код.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: JoyStick(),
  ));
}

class JoyStick extends StatefulWidget {
  @override
  _JoyStickState createState() => _JoyStickState();
}

class _JoyStickState extends State<JoyStick> {
  Offset offset, smallCircleOffset;
  @override
  void initState() {
    offset = Offset(0, 0);
    smallCircleOffset = offset;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Container(
            color: Colors.lightBlue,
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
          ),
          CustomPaint(
            painter: Painter(false, this.offset,false),
            child: CustomPaint(
              painter: Painter(true, smallCircleOffset,(true)),
            ),
          ),
          GestureDetector(
            onPanEnd: (details){
              setState(() {
                smallCircleOffset = offset;
              });

            },
            onPanUpdate: (details) {
              setState(() {
                RenderBox renderBox = context.findRenderObject();
                smallCircleOffset = renderBox.globalToLocal(details.globalPosition);

              },
              );

            },

          ),
        ],
      ),
    );
  }
}

class Painter extends CustomPainter {
  final bool needsRepaint,isInBoundary;
  final Offset offset;
  Painter(this.needsRepaint, this.offset, this.isInBoundary);
  @override
  void paint(Canvas canvas, Size size) {
    if (needsRepaint && isInBoundary) {
      print("Offset for smaller circle  = $offset with distance squared = ${offset.distanceSquared} \n and distance = ${offset.distance}");
      canvas.drawCircle(this.offset, 50, Paint()..color = Colors.amber);
    } else {
      canvas.drawCircle(this.offset, 200, Paint()..color = Colors.black);

    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return (needsRepaint && isInBoundary)?true:false;

  }
}

Answer 1

В вашем методе onPanUpdate() вызывайте setState, только если расстояние смещения меньше 200, например:

            onPanUpdate: (details) {
              if(smallCircleOffset.distance < 200){
                setState(() {
                  RenderBox renderBox = context.findRenderObject();
                  smallCircleOffset = renderBox.globalToLocal(details.globalPosition);
                });
              } 

            },

Если вам нужен правильный джойстик, который перемещается внутри круга после панорамирования вне внутренний круг, попробуйте использовать пакет Control Pad во флаттере. Он предоставляет джойстик, а также предоставляет множество опций.

(Фото взято с README.md пакета)