Flutter：InteractiveViewer中可缩放SVG背景上的Positioned组件错位

问题背景 #

我正在开发一款Flutter应用，需要在SVG图像的特定位置叠加图标。这些图标对应的位置已归一化为0-100的(x,y)坐标，要求无论屏幕尺寸或InteractiveViewer可用空间变化，图标都必须与图像上的对应点精准对齐。但实际测试（手机和模拟器）中，当可用空间变化时，图标会出现明显错位。

最小复现示例 #

目标是让图标始终与SVG上归一化坐标(x=50,y=50)的点对齐：

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: CustomInteractiveMap(),
        ),
      ),
    );
  }
}

class CustomInteractiveMap extends StatefulWidget {
  @override
  _CustomInteractiveMapState createState() => _CustomInteractiveMapState();
}

class _CustomInteractiveMapState extends State<CustomInteractiveMap> {

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: LayoutBuilder(
        builder: (context, constraints) => InteractiveViewer(
          minScale: 1,
          maxScale: 5,
          child: Stack(
            children: [
              SvgPicture.asset('assets/images/background.svg', fit: BoxFit.contain),
              Positioned(
                left: (50 / 100) * constraints.maxWidth, // 示例x坐标50（范围0-100）
                top: (50 / 100) * constraints.maxHeight, // 示例y坐标50（范围0-100）
                child: const Icon(Icons.location_pin, color: Colors.redAccent),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

已尝试的解决方法 #

• 用AspectRatio包裹LayoutBuilder（return Expanded(child: AspectRatio(aspectRatio: 1,child: LayoutBuilder(...))），确保空间比例一致，初看有改善但未完全解决错位。
• 用MediaQuery.of(context).size替代LayoutBuilder，问题依旧。

更新：部分解决后的遗留问题 #

在他人帮助下，最小示例已正常运行，但实际应用中，模拟器里的图标仍存在向上偏移的问题，x坐标显示正常。

实际应用中的图标生成代码 #

List<Widget> buildWidgets(Size size) {
  List<Widget> widgets = list.map((item) {
    final coordinates = maps[item.id]![item.location];
    if (coordinates != null) {
      final xPos = (coordinates.dx / 100) * size.width;
      final yPos = (coordinates.dy / 100) * size.height;

      return Positioned(
        left: xPos - (iconSize / 2),
        top: yPos - (iconSize / 2),
        child: FractionalTranslation(
          translation: const Offset(-0.5, -0.5),
          child: SvgPicture.asset(
            'assets/images/icons/${item.type.toLowerCase()}.svg',
            width: iconSize,
            height: iconSize,
            colorFilter: const ColorFilter.mode(Colors.red, BlendMode.srcIn),
          ),
        ),
      );
    } else {
      return Container();
    }
  }).toList();

  return widgets;
}

其余核心代码 #

return Expanded(
  child: AspectRatio(
    aspectRatio: 1,
    child: LayoutBuilder(
      builder: (context, constraints) {
        double width = constraints.maxWidth;
        double height = constraints.maxHeight;
        iconSize = width * 0.05;

        return InteractiveViewer(
          onInteractionEnd: (details) => setState(() {}),
          minScale: 1,
          maxScale: 5,
          child: Stack(
            children: [
              SvgPicture.asset('assets/images/background.svg', fit: BoxFit.contain),
              ...buildWidgets(Size(width, height))
            ],
          ),
        );
      }
    ),
  ),
);

我已经修正了图标尺寸的偏移，请问还有哪些遗漏或错误的地方？

内容的提问来源于stack exchange，提问作者Dirkster