[Flutter]GoogleMapで現在地を表示させる

やっていることはlocationパッケージを使って自分の現在地を取得し、

その位置情報をGoogleMapに反映させる。

以下の２つをpubspec.yamlに追加しています。

location | Flutter Package

google_maps_flutter | Flutter Package

google_mapのサンプルを少し変えただけになります。

google_mapのどこを表示させるかの情報_kGooglePlexの値を自分の現在地を取得し代入したものになっている。 

​
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:flutter/foundation.dart'; // *.freezed.dartで必要なのでimportしておく
import 'package:freezed_annotation/freezed_annotation.dart';
import 'package:listview/widget/my_location.dart';

part 'googlemap.freezed.dart';

@freezed
abstract class GoogleMapState with _$GoogleMapState {
 const factory GoogleMapState({
   Completer<GoogleMapController> controller,
   CameraPosition cameraPosition,
 }) = _GoogleMapState;
}

final googleMapStateProvider =
   StateNotifierProvider((_) => GoogleMapStateProvider());

class GoogleMapStateProvider extends StateNotifier<GoogleMapState> {
 GoogleMapStateProvider() : super(const GoogleMapState());
 Reader read;
 
 void initState(reader) async {
   read = reader;
   state = state.copyWith(controller: Completer());
 }
 
 void dispose() {}
 
 Future<void> goToTheLake(pos) async {
   final GoogleMapController controller = await state.controller.future;
   controller.animateCamera(CameraUpdate.newCameraPosition(pos));
 }
 
 Future<void> goToMyLocation(latlng) async {
   final pos = getCameraPosition(latlng);
   final GoogleMapController controller = await state.controller.future;
   controller.animateCamera(CameraUpdate.newCameraPosition(pos));
 }
 
 CameraPosition getCameraPosition(latlng) {
   final CameraPosition pos = CameraPosition(
     target:
         LatLng(double.parse(latlng.latitude), double.parse(latlng.longitude)),
     zoom: 15.0,
   );
   return pos;
 }
}

class MapSample extends HookWidget {
 CameraPosition _kGooglePlex = CameraPosition(
   target: LatLng(37.42796133580664, -122.085749655962),
   zoom: 14.4746,
 );
 
 static final CameraPosition _kLake = CameraPosition(
     bearing: 192.8334901395799,
     target: LatLng(37.43296265331129, -122.08832357078792),
     tilt: 59.440717697143555,
     zoom: 19.151926040649414);
 
 @override
 Widget build(BuildContext context) {
   final gmsp = useProvider(googleMapStateProvider);
   final gmState = useProvider(googleMapStateProvider.state);
   final mlState = useProvider(myLocationStateProvider.state);
   
   useEffect(() {
     Future.microtask(() => gmsp.initState(context.read));
     if (mlState.longitude != '0') {
       print(double.parse(mlState.latitude));
       _kGooglePlex = gmsp.getCameraPosition(mlState);
     }
     return () {};
   }, []);
   
   return new Scaffold(
     body: GoogleMap(
       mapType: MapType.hybrid,
       initialCameraPosition: _kGooglePlex,
       onMapCreated: (GoogleMapController controller) {
         gmState.controller.complete(controller);
       },
     ),
     floatingActionButton: FloatingActionButton.extended(
       onPressed: () {
         gmsp.goToTheLake(_kLake);
       },
       label: Text('To the lake!'),
       icon: Icon(Icons.directions_boat),
     ),
   );
 }
}