Flutter-谷歌地图自定义标记与翻译源小部件切割成两半

Question

我需要为谷歌地图创建一个自定义标记。我需要将自定义标记小部件的左边框与指向的位置对齐，这需要我将小部件向右推半宽，所以我使用了FractionalTranslation。当然，在翻译之后，我仍然得到了一个全宽度的源代码小部件。到目前为止没有问题。

问题发生在将小部件转换(RenderRepaintBoundary(为标记的图标之后。图标失去了右边的部分，被切成两半。

...
class TheState extends State<TheScreen>{
...
GlobalKey<MarkState> globalkey = GlobalKey<MarkState>();
Set<Marker> marks = Set();
@override
Widget build(BuildContext context){
...
return Scaffold(
...
body : Stack(
children : [
Mark(globalkey), 
GoogleMap(
...
markers : marks,
)
]
)
);
}
...
setState((){
marks.clear();
marks.add(Marker(
... 
icon : await convert(gk)
));
});
...
Future<BitmapDescriptor> convert(GlobalKey gk) async {
RenderRepaintBoundary boundary = gk.currentContext?.findRenderObject() as RenderRepaintBoundary;
ui.Image image = await boundary.toImage(pixelRatio : 2);
ByteData? byteData = await image.toByteData(format: ui.ImageByteFormat.png);
return BitmapDescriptor.fromBytes(byteData!.buffer.asUint8List());
}
}
...
class MarkState extends State<Mark>{
...
@override
Widget build(BuildContext context) => RepaintBoundary(
child : FractionalTranslation(
translation : Offset(0.5, 0),
child : ...
)
);
}

Answer 1

这是一个变通方法，实际上并不是我问题的答案。我在这里发帖是因为它暂时解决了我的问题，但我仍在寻找FractionalTranslation导致问题的原因。

我没有使用FractionalTranslation，而是简单地将小部件的宽度增加了一倍，并在左侧添加了一个透明的填充，这样就可以将小部件实际的边界推到中间。

但我也不得不Transform.scale(scale : 0.5)小部件，以避免溢出渲染。

我通过将pixelRatio传递给BitmapDescriptor来获取原始大小。

BitmapDescriptor.fromBytes((await (await (globalkey.currentContext?.findRenderObject() as RenderRepaintBoundary).toImage(pixelRatio : 2)).toByteData(format: ui.ImageByteFormat.png))!.buffer.asUint8List());