Map overlapping AppBar when scrolling up - google-maps

Question

On some devices, the maps display fine. However, some times, when I scroll to the very bottom and scroll up slowly, the map overlap App Bar instead of start disappearing from my view (as the other widgets).
I've tested it in more than 4 different devices and simulators, and nothing happens. However it does happen on my friend's smartphone, I don't know why. Have anyone ever saw this bug? [screenshot of the bug][1]
children: <Widget>[
Stack(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.width,
child: GoogleMap(
onMapCreated: (mapController) {
_mapController = mapController;
try {
_addMarker();
} catch (e) {
print(e.toString());
_scaffoldKey.currentState.showSnackBar(
buildSnackBar('Request location error'));
}
},
markers: _markers,
mapType: MapType.normal,
scrollGesturesEnabled: false,
initialCameraPosition: CameraPosition(target: LatLng(_lead.latitude, _lead.longitude)),
)),
Column(
children: <Widget>[
Table(
columnWidths: {0: FlexColumnWidth(1), 1: FlexColumnWidth(1)},
children: [
_buildTableRow('Installation Address:',
_lead.installationAddressLineOne,
color: COLOR_LIGHT_GREY.withAlpha(150))
],
),
addDivider(),
Text(
'Roof Location',
style:
TextStyle(fontWeight: FontWeight.w600, color: Colors.red),
),
],
),
],
),
Container(
child: ButtonTheme(
height: 32,
minWidth: double.infinity,
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
buttonColor: Colors.indigo,
padding: EdgeInsets.only(left: 10, right: 10),
child: RaisedButton(
child: Text(
'Route to lead',
style: TextStyle(color: Colors.white),
),
onPressed: () {
final url =
'https://www.google.com/maps/dir/?api=1&destination=${_lead.latitude},${_lead.longitude}';
launch(url);
},
),
),
)
],
);
[1]: https://i.stack.imgur.com/lAmL9.png