Flutter Google Maps - Move camera to current position

Question

In my Flutter project I use the Google Maps plugin to display a map in the app. On the map I want to show the current location of the user and for this I use Geolocator.

When the map loads it will load on a static point and when the user denies the location permissions the user can still use the map without location. When the user accepts the permissions I want to move the camera to the users current location.

I have implement above in the code below but I also get the following error and I can't figure out how to solve it.

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'dart:typed_data';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:geolocator/geolocator.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:hvd_test/styling/colors.dart';
import 'package:hvd_test/models/navigation.dart';
import 'package:hvd_test/models/markers.dart';

// This page shows a Google Map plugin with all stations (HvD and Total). The markers are pulled from a Firebase database.

class StationsMap extends StatefulWidget {
  @override
  _StationsMap createState() => _StationsMap();
}

class _StationsMap extends State<StationsMap> {
  bool _isLocationGranted = false;

  var currentLocation;

  GoogleMapController mapController;

  Map<MarkerId, Marker> markers = <MarkerId, Marker>{};

// Below function initiates all HvD stations and shows them as markers on the map. It also generates a Bottom Sheet for each location with corresponding information.

  void initMarkerHvD(specify, specifyId) async {
    var markerIdVal = specifyId;
    final Uint8List markerHvD =
        await getBytesFromAsset('images/Pin-HvD.JPG', 70);
    final MarkerId markerId = MarkerId(markerIdVal);
    final Marker marker = Marker(
      markerId: markerId,
      onTap: () {
        showModalBottomSheet(
            context: context,
            builder: (context) => SingleChildScrollView(
                  child: Container(
                    padding: EdgeInsets.only(
                        bottom: MediaQuery.of(context).viewInsets.bottom),
                    child: Container(
                      color: Color(0xff757575),
                      child: Container(
                        padding: EdgeInsets.all(20.0),
                        decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.only(
                                topLeft: const Radius.circular(20.0),
                                topRight: const Radius.circular(20.0))),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.stretch,
                          children: [
                            Text(
                              specify['stationName'],
                              style: TextStyle(
                                  color: PaletteBlue.hvdblue,
                                  fontWeight: FontWeight.bold,
                                  fontSize: 16),
                              textAlign: TextAlign.center,
                            ),
                            SizedBox(height: 10),
                            Text(specify['stationAddress']),
                            Text(specify['stationZIP'] +
                                ' ' +
                                specify['stationCity']),
                            SizedBox(height: 20),
                            ElevatedButton(
                                child: Text(
                                  'Navigeer naar locatie',
                                  style: TextStyle(
                                    color: Colors.white,
                                  ),
                                ),
                                style: ButtonStyle(
                                    backgroundColor: MaterialStateProperty.all(
                                        PaletteOrange.hvdorange)),
                                onPressed: () {
                                  MapUtils.openMap(
                                      specify['stationLocation'].latitude,
                                      specify['stationLocation'].longitude);
                                }),
                          ],
                        ),
                      ),
                    ),
                  ),
                ));
      },
      position: LatLng(specify['stationLocation'].latitude,
          specify['stationLocation'].longitude),
      infoWindow: InfoWindow(),
      icon: BitmapDescriptor.fromBytes(markerHvD),
    );
    setState(() {
      markers[markerId] = marker;
    });
  }

// Below function initiates all Total stations and shows them as markers on the map. It also generates a Bottom Sheet for each location with corresponding information.

  void initMarkerTotal(specify, specifyId) async {
    var markerIdVal = specifyId;
    final Uint8List markerTotal =
        await getBytesFromAsset('images/Pin-Total.JPG', 70);
    final MarkerId markerId = MarkerId(markerIdVal);
    final Marker marker = Marker(
      markerId: markerId,
      onTap: () {
        showModalBottomSheet(
            context: context,
            builder: (context) => SingleChildScrollView(
                  child: Container(
                    padding: EdgeInsets.only(
                        bottom: MediaQuery.of(context).viewInsets.bottom),
                    child: Container(
                      color: Color(0xff757575),
                      child: Container(
                        padding: EdgeInsets.all(20.0),
                        decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.only(
                                topLeft: const Radius.circular(20.0),
                                topRight: const Radius.circular(20.0))),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.stretch,
                          children: [
                            Text(
                              specify['stationName'],
                              style: TextStyle(
                                  color: PaletteBlue.hvdblue,
                                  fontWeight: FontWeight.bold,
                                  fontSize: 16),
                              textAlign: TextAlign.center,
                            ),
                            SizedBox(height: 10),
                            Text(specify['stationAddress']),
                            Text(specify['stationZIP'] +
                                ' ' +
                                specify['stationCity']),
                            SizedBox(height: 20),
                            ElevatedButton(
                                child: Text(
                                  'Navigeer naar locatie',
                                  style: TextStyle(
                                    color: Colors.white,
                                  ),
                                ),
                                style: ButtonStyle(
                                    backgroundColor: MaterialStateProperty.all(
                                        PaletteOrange.hvdorange)),
                                onPressed: () {
                                  MapUtils.openMap(
                                      specify['stationLocation'].latitude,
                                      specify['stationLocation'].longitude);
                                }),
                          ],
                        ),
                      ),
                    ),
                  ),
                ));
      },
      position: LatLng(specify['stationLocation'].latitude,
          specify['stationLocation'].longitude),
      infoWindow: InfoWindow(),
      icon: BitmapDescriptor.fromBytes(markerTotal),
    );
    setState(() {
      markers[markerId] = marker;
    });
  }

// Below functions pulls all HvD markers from the database.

  getMarkerDataHvD() async {
    FirebaseFirestore.instance
        .collection('hvd-stations')
        .get()
        .then((myMarkers) {
      if (myMarkers.docs.isNotEmpty) {
        for (int i = 0; i < myMarkers.docs.length; i++) {
          initMarkerHvD(myMarkers.docs[i].data(), myMarkers.docs[i].id);
        }
      }
    });
  }

// Below function pulls all Total markers from the database.

  getMarkerDataTotal() async {
    FirebaseFirestore.instance
        .collection('total-stations')
        .get()
        .then((myMarkers) {
      if (myMarkers.docs.isNotEmpty) {
        for (int i = 0; i < myMarkers.docs.length; i++) {
          initMarkerTotal(myMarkers.docs[i].data(), myMarkers.docs[i].id);
        }
      }
    });
  }

// Below function initiates all previous functions on the page. This happens when the user navigates to the page.

  void initState() {
    getMarkerDataHvD();
    getMarkerDataTotal();
    super.initState();
    Geolocator.getCurrentPosition(desiredAccuracy: LocationAccuracy.high)
        .then((currloc) {
      setState(() {
        currentLocation = currloc;
        _isLocationGranted = true;
      });
      mapController.moveCamera(CameraUpdate.newLatLng(LatLng(currentLocation.latitude, currentLocation.longitude))) as CameraPosition;
    });
  }

  CameraPosition _initialCameraPosition =
      CameraPosition(target: const LatLng(51.9244201, 4.4777325), zoom: 12);
  

// Below function is used to display all previous functions to the page.

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: <Widget>[
            GoogleMap(
              onMapCreated: onMapCreated,
              markers: Set<Marker>.of(markers.values),
              gestureRecognizers: <Factory<OneSequenceGestureRecognizer>>[
                new Factory<OneSequenceGestureRecognizer>(
                  () => new EagerGestureRecognizer(),
                ),
              ].toSet(),
              mapToolbarEnabled: false,
              zoomGesturesEnabled: true,
              zoomControlsEnabled: false,
              scrollGesturesEnabled: true,
              myLocationEnabled: _isLocationGranted,
              myLocationButtonEnabled: true,
              initialCameraPosition: _initialCameraPosition,
            ),
          ],
        ),
      ),
    );
  }

  onMapCreated(GoogleMapController controller) {
    mapController = controller;
  }
}

The error I get is this:

E/flutter ( 7769): [ERROR:flutter/lib/ui/ui_dart_state.cc(199)] Unhandled Exception: type 'Future<void>' is not a subtype of type 'CameraPosition' in type cast
E/flutter ( 7769): #0      _StationsMap.initState.<anonymous closure>
E/flutter ( 7769): #1      _rootRunUnary (dart:async/zone.dart:1362:47)
E/flutter ( 7769): #2      _CustomZone.runUnary (dart:async/zone.dart:1265:19)
E/flutter ( 7769): <asynchronous suspension>

Can someone please give me some assistance?

Answer 1

Thanks to @Andy I solved the problem. I removed "as CameraPosition" from the code and then the function worked. I also implemented a zoom by using:

mapController.animateCamera(CameraUpdate.newLatLngZoom(LatLng(currentLocation.latitude, currentLocation.longitude), 14));