GoogleMapsFlutter update camera to subregion with LatLngBounds

Question

As the title implies I'm trying to update the camera so that it includes 2 coordinates in a specific part of the widget's viewport instead of focusing the camera on the entirety of the view port.

I'm using the Google Maps Flutter package here's a snippet of how the camera is updated:

import 'package:google_maps_flutter/google_maps_flutter.dart';

var markerPositions = [LatLng(-117.000, 23.22), LatLng(LatLng(-116.000, 2.22))];
const cameraPadding = 50.0;

// returns a `LatLngBounds` object that includes the marker positions
var bounds = Geo.boundsFromLatLngList(markerPositions);
var cameraUpdate = CameraUpdate.newLatLngBounds(bounds, cameraPadding);

// ... some code after ...
// GoogleMapsController controller;

controller.animateCamera(cameraUpdate);

The camera update works fine and the zoom level is set automatically, but it often results in part of the coordinates being hidden behind a floating view, pretty much like this (don't mind the non-updating map background):

Now, what I want to achieve is something like the following, I want to show the 2 coordinates and update the camera in a subregion of the map widget; essentially like this:

I've been exploring the package's API and I don't think there is any function or method that would achieve that directly. I've tried playing with the padding but it just results in a very zoomed out focus.

So far now I'm thinking that my best bet is to do something like the following:

1. Update the camera to the full widget viewport
2. Grab the current "X" and "Y" locations of the bounding box
3. Calculate the midpoint of the current bounding box
4. Calculate a new "target" that offsets the current midpoint to the left in relation to the XY distances
5. Adjust the zoom level somehow relative to the XY and bounding box.

I'm not entirely sure if that is the right approach or whether I got the terminology right, but if there are any examples in other languages or techniques that I could read upon as a starting point that could be recommended I'd be happy to look at them, or better yet if someone has faced the same issue and solved it I'd be really grateful if you could share their solution.

Many thanks in advance!

Solution

GoogleMap(
    padding: EdgeInsets.only(right: 60),
)

Adjust the needed padding you want

Comments

[Tristian]

That was stupidly simple! I was so hung up on "transforming" the camera that I overlooked the easiest solution.

[Mike Postma]

This is a fantastic answer to the question being asked, however, I find myself in a similar situation except with the floating view at the bottom of the screen. Adding bottom padding results in the Google logo floating in the middle of the screen at all times, which looks very odd when the floating view isn't visible. Wondering if you can think of any other ways to approach this problem?