CODEWITHSUNDEEP
androidiosflutterflutter-layout
Donki
Donki

Reputation: 815

How would I draw a line to connect the dots in flutter

I've been trying to use painter to draw the line between to dots but I have two problems that I need to resolve.

  1. I need to know which dots are connected to each other
  2. I need the line to snap into the dot when it is close to it

You can refer to the design below

enter image description here

Could Draggable plugin do the trick here?

Upvotes: 5

Views: 2361

Answers (1)

Donki
Donki

Reputation: 815

I was able to find the solution for the first point:

I need to know which dots are connected to each other

I create 4 keys

GlobalKey _keyTopLeft = GlobalKey();
GlobalKey _keyBottomLeft = GlobalKey();
GlobalKey _keyTopRight = GlobalKey();
GlobalKey _keyBottomRight = GlobalKey();

I then added each key to the widget I want to track:

_letterWidget(
    key: _keyTopLeft,
)
_letterWidget(
    key: _keyBottomLeft,
)
_letterWidget(
    key: _keyTopRight,
)
_letterWidget(
    key: _keyBottomRight,
)

I created a list tracking which dots the finger has touched:

List<bool> ongoingSequence = List.filled(4, false);

Then I did the logic on the GetureDetector widget

GestureDetector(
      onPanDown: (DragDownDetails details) {
        ongoingSequence = List.filled(4, false);
        getDragDownPosition(details);
      },
      onPanUpdate: (DragUpdateDetails details) {
        getDragUpdatePosition(details);
        var result = BoxHitTestResult();
        RenderBox renderBoxTopLeft =
            _keyTopLeft.currentContext.findRenderObject();
        RenderBox renderBoxBottomLeft =
            _keyBottomLeft.currentContext.findRenderObject();
        RenderBox renderBoxTopRight =
            _keyTopRight.currentContext.findRenderObject();
        RenderBox renderBoxBottomRight =
            _keyBottomRight.currentContext.findRenderObject();
        if (renderBoxTopLeft.hitTest(result,
            position: details.localPosition)) {
          ongoingSequence[0] = true;
        } else if (renderBoxBottomLeft.hitTest(result,
            position: details.localPosition)) {
          ongoingSequence[1] = true;
        } else if (renderBoxTopRight.hitTest(result,
            position: details.localPosition)) {
          ongoingSequence[2] = true;
        } else if (renderBoxBottomRight.hitTest(result,
            position: details.localPosition)) {
          ongoingSequence[3] = true;
        }
      },

Then we can print the ongoingSequence list for the results:

print("top-left ${ongoingSequence[0]}");
print("bottom-left ${ongoingSequence[1]}");
print("top-right ${ongoingSequence[2]}");
print("bottom-right ${ongoingSequence[3]}");

Upvotes: 2

Related Questions