I'm building an application with Flutter, based on a map. So I use the Google Maps package and all's working fine. But, I tried to add a FloatingActionButton to recenter the map on my location, and here, I got a problem. First, the map doesn't recenter on my location and second, I get an horrible red error. Here are the code, the flutter doctor, and the error code.
My code:
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:provider/provider.dart';
import 'package:spotycar/providers/location_service.dart';
import '../../models/user_location.dart';
class MapWidget extends StatefulWidget {
MapWidget({@required Key key}) : super(key: key);
@override
_MapWidgetState createState() => _MapWidgetState();
}
var locationClicked = false;
class _MapWidgetState extends State<MapWidget> {
@override
Widget build(BuildContext context) {
CameraUpdate cameraUpdate;
GoogleMapController mapController;
var location = Provider.of<UserLocation>(context);
final provider = Provider.of<LocationService>(context);
final double _zoom = 17.0;
final double _tilt = 37.0;
var _coord;
if (provider.loadedLocation) {
_coord = LatLng(location.latitude, location.longitude);
cameraUpdate = CameraUpdate.newCameraPosition(CameraPosition(
target: _coord,
bearing: location.heading,
zoom: _zoom,
tilt: _tilt,
));
}
if (locationClicked == true) {
mapController.moveCamera(
CameraUpdate.newCameraPosition(
CameraPosition(
target: _coord,
bearing: location.heading,
zoom: _zoom,
tilt: _tilt,
),
),
);
setState(() {
locationClicked = false;
});
}
return Scaffold(
body: !provider.loadedLocation
? Center(
child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(Colors.purple),
),
)
: GoogleMap(
onMapCreated: (GoogleMapController controller) {
mapController = controller;
mapController.animateCamera(cameraUpdate);
},
myLocationEnabled: true,
myLocationButtonEnabled: false,
zoomControlsEnabled: false,
initialCameraPosition: CameraPosition(
target: _coord,
zoom: _zoom,
tilt: _tilt,
),
rotateGesturesEnabled: true,
),
);
}
}
class LocationRechercheWidget extends StatefulWidget {
@override
_LocationRechercheWidgetState createState() =>
_LocationRechercheWidgetState();
}
class _LocationRechercheWidgetState extends State<LocationRechercheWidget> {
@override
Widget build(BuildContext context) {
return FloatingActionButton(
child: Icon(
Icons.location_searching,
color: Colors.purple,
size: 25,
),
backgroundColor: Colors.white,
onPressed: () {
setState(() {
locationClicked = true;
});
},
);
}
}
My Flutter doctor :
[√] Flutter (Channel master, 1.20.0-3.0.pre.124, on Microsoft Windows [version 10.0.18362.900], locale fr-FR)
• Flutter version 1.20.0-3.0.pre.124 at C:\flutter
• Framework revision ec3368ae45 (2 days ago), 2020-07-02 01:58:01 -0400
• Engine revision 65ac8be350
• Dart version 2.9.0 (build 2.9.0-20.0.dev f8ff12008e)
[√] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
• Android SDK at C:\Users\adrie\AppData\Local\Android\sdk
• Platform android-29, build-tools 29.0.2
• Java binary at: C:\Program Files\Android\Android Studio1310\jre\bin\java
• Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b04)
• All Android licenses accepted.
[√] Android Studio (version 3.6)
• Android Studio at C:\Program Files\Android\Android Studio1310
• Flutter plugin version 45.1.1
• Dart plugin version 192.7761
• Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b04)
[√] VS Code (version 1.46.1)
• VS Code at C:\Users\adrie\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 3.12.1
[√] Connected device (1 available)
• Mi Note 10 (mobile) • 53bd04cc • android-arm64 • Android 10 (API 29)
• No issues found!
And The error that I'm getting when I click on the FloatingActionButton :
═╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
The following NoSuchMethodError was thrown building MapWidget-[#2721f](dirty, dependencies:
[InheritedProvider<UserLocation>, InheritedProvider<LocationService>], state:
_MapWidgetState#50617):
The method 'moveCamera' was called on null.
Receiver: null
Tried calling: moveCamera(Instance of 'CameraUpdate')
The relevant error-causing widget was:
MapWidget-[#2721f]
lib\screen\map_screen.dart:20
When the exception was thrown, this was the stack:
#0 Object.noSuchMethod (dart:core-patch/object_patch.dart:51:5)
#1 _MapWidgetState.build
package:spotycar/…/map_screen/map_widget.dart:39
#2 StatefulElement.build
package:flutter/…/widgets/framework.dart:4663
#3 ComponentElement.performRebuild
package:flutter/…/widgets/framework.dart:4546
#4 StatefulElement.performRebuild
package:flutter/…/widgets/framework.dart:4719
#5 Element.rebuild
package:flutter/…/widgets/framework.dart:4262
#6 BuildOwner.buildScope
package:flutter/…/widgets/framework.dart:2667
#7 WidgetsBinding.drawFrame
package:flutter/…/widgets/binding.dart:866
#8 RendererBinding._handlePersistentFrameCallback
package:flutter/…/rendering/binding.dart:286
#9 SchedulerBinding._invokeFrameCallback
package:flutter/…/scheduler/binding.dart:1115
#10 SchedulerBinding.handleDrawFrame
package:flutter/…/scheduler/binding.dart:1054
#11 SchedulerBinding._handleDrawFrame
package:flutter/…/scheduler/binding.dart:970
#15 _invoke (dart:ui/hooks.dart:253:10)
#16 _drawFrame (dart:ui/hooks.dart:211:3)
(elided 3 frames from dart:async)
To solve this issue, you need to use a Completer instead of a simple GoogleMapController.
When you instantiate it :
Completer<GoogleMapController> _controller = Completer();
Then in the onMapCreated method inside your GoogleMap widget :
onMapCreated: (GoogleMapController controller) {
_controller.complete(controller);
...
},
And whenever you wanna change the camera position :
Future<void> moveCamera() async {
final GoogleMapController controller = await _controller.future;
controller.moveCamera(CameraUpdate.newCameraPosition(CameraPosition(
target: LatLong(..., ...),
zoom: ...,
)));
}
And you should be good !