“This is the sixth day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

Functional view

Today we’re going to see how the scale is implemented, but what does it look like

When we move the red area, the coordinate information above will be displayed in real time. When we turn on autoattach and the gesture stops, it will automatically attach to the nearest corner of the current widget

First of all, there must be a gesture on the red area to control the movement, when stopped, to get the coordinates of the point, and then to get the coordinates to get the widget, is it similar to what we saw a few days ago to get the information of the widget? It’s just a gesture control instead of click to get information, so let’s see if it works like we thought

The source code to view

The code for today is in the flutter_ume_kit_UI package, with align_ruluer.dart,

The UI code is mostly in the build, so let’s look at the gesture-related code

There are two gestures, one for the Toolbar, which displays location information, and the other, which only changes the Y value of the Toolbar, so that the widget can be moved up and down, is relatively simple

void _toolBarPanUpdate(DragUpdateDetails dragDetails) {
  setState(() {
    _toolBarY = dragDetails.globalPosition.dy - 40;
  });
}
Copy the code

Let’s look at another gesture, this is the red area gesture, when the autoattach function is not enabled, we can ignore the onPanEnd method, in onPanUpdate there is only one method to update the position, at this time the size of the current page can be calculated

GestureDetector(
  onPanUpdate: _onPanUpdate,
  onPanEnd: _onPanEnd
  )

void _onPanUpdate(DragUpdateDetails dragDetails) {
  setState(() {
    _dotPosition = dragDetails.globalPosition;
  });
}
  
Copy the code

Now let’s take a look at the code when autoattach is enabled and see our old friend the HitTest class again. Remember how we get the widget information from that, too? We get the WidgetList, we walk through it to find the corner closest to where we clicked, update it, and finally add a vibration feedback

void _onPanEnd(DragEndDetails dragDetails) {
  if (!_switched) return;
  final List<RenderObject> objects = HitTest.hitTest(_dotPosition);
  _selection.candidates = objects;
  Offset offset = Offset.zero;
  for (var obj in objects) {
    var translation = obj.getTransformTo(null).getTranslation();
    Rect rect = obj.paintBounds.shift(Offset(translation.x, translation.y));
    if (rect.contains(_dotPosition)) {
      double dx, dy = 0.0;
      double perW = rect.width / 2;
      double perH = rect.height / 2;
      if (_dotPosition.dx <= perW + translation.x) {
        dx = translation.x;
      } else {
        dx = translation.x + rect.width;
      }
      if (_dotPosition.dy <= translation.y + perH) {
        dy = translation.y;
      } else {
        dy = translation.y + rect.height;
      }
      offset = Offset(dx, dy);
      break;
    }
  }
  setState(() {
    _dotPosition = offset == Offset.zero ? _dotPosition : offset;
    HapticFeedback.mediumImpact();
  });
}
Copy the code

Ok, today’s source view is over here, as a student of Flutter, I hope you can give me more advice and discuss with me where there are problems