layout method

  1. @override
Widget layout(
  1. BuildContext context, {
  2. required Image child,
})
override

Given the child image to display, return the layout (ie. position & transformation) of the child

Use MapCamera.of to retrieve the ambient MapCamera useful for layout.

If more control over the Image itself is required, prefer subclassing one of the existing subclasses and overriding build.

Implementation

@override
Widget layout(
  BuildContext context, {
  required Image child,
}) {
  final camera = MapCamera.of(context);

  final pxTopLeft = camera.projectAtZoom(topLeftCorner) - camera.pixelOrigin;
  final pxBottomRight =
      camera.projectAtZoom(bottomRightCorner) - camera.pixelOrigin;
  final pxBottomLeft =
      camera.projectAtZoom(bottomLeftCorner) - camera.pixelOrigin;

  /// calculate pixel coordinate of top-right corner by calculating the
  /// vector from bottom-left to top-left and adding it to bottom-right
  final pxTopRight = pxTopLeft - pxBottomLeft + pxBottomRight;

  /// update/enlarge bounds so the new corner points fit within
  final bounds = RectExtension.containing(
      [pxTopLeft, pxBottomRight, pxTopRight, pxBottomLeft]);

  final vectorX = (pxTopRight - pxTopLeft) / bounds.size.width;
  final vectorY = (pxBottomLeft - pxTopLeft) / bounds.size.height;
  final offset = pxTopLeft - bounds.topLeft;

  final a = vectorX.dx;
  final b = vectorX.dy;
  final c = vectorY.dx;
  final d = vectorY.dy;
  final tx = offset.dx;
  final ty = offset.dy;

  return Positioned(
    left: bounds.topLeft.dx,
    top: bounds.topLeft.dy,
    width: bounds.size.width,
    height: bounds.size.height,
    child: Transform(
      transform: Matrix4(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1),
      filterQuality: filterQuality,
      child: child,
    ),
  );
}