Flutter - Google Map custom marker been cut into half with translated source widget

stackunderflow 0
Viewed 16

I need to create a custom marker for the Google's map. I need to align the left border of the custom marker widget with the pointed location which require me to push the widget half width to the right, so I used FractionalTranslation for that. Of course I still got a full width source widget after the translation. No problem so far.

The problem happened after converted (RenderRepaintBoundary) the widget into marker's icon. The icon lost it's right part, been cut into half.

...

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 : ...
    )
  );
}
google-maps flutter
1 Answers

This is a workaround not really an answer for my question. I post here as it solved my problem for now but I still looking for a reason why the FractionalTranslation resulting the issue like in the question.

Instead of using FractionalTranslation, I simply doubled the width of the widget with a transparent padding to the left, so that'll push the widget actual border to the middle.

But I also had to Transform.scale(scale : 0.5) the widget to avoid overflow rendering.

I get the original size back by passing the pixelRatio to the BitmapDescriptor.

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