[Flutter]GoogleMapの任意の場所にマーカーを置く

右上のボタンを押すと画面中央にマーカーが置かれる。

画像1

画像2

コードは以下の通り

import 'dart:async';
import 'package:myapp/utils/core.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:freezed_annotation/freezed_annotation.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

part 'mymap.freezed.dart';
// part 'mymap.g.dart';

class MyMapPage extends HookWidget {
 MyMapPage({Key key}) : super(key: key);
 
 @override
 Widget build(BuildContext context) {
   final mmsp = useProvider(myMapStateProvider);
   final mmState = useProvider(myMapStateProvider.state);
   
   useEffect(() {
     mmsp.initState();
     return () {};
   }, []);

   return Scaffold(
     body: Stack(
       children: [
         GoogleMap(
           mapType: MapType.normal,
           initialCameraPosition:
               CameraPosition(target: mmState.lastPosition, zoom: 8),
           onMapCreated: mmsp.onMapCreated,
           myLocationEnabled: true,
           compassEnabled: true,
           markers: mmState.markers,
           onCameraMove: mmsp.onCameraMove,
         ),
         Positioned(
             top: 40,
             right: 10,
             child: FloatingActionButton(
               onPressed: mmsp.addMarker,
               tooltip: 'add marker',
               backgroundColor: blue,
               child: Icon(Icons.add_location, color: white),
             ))
       ],
     ),
   );
 }
}

@freezed
abstract class MyMapState with _$MyMapState {
 const factory MyMapState({
   LatLng initialPosition,
   @Default(LatLng(35.68, 139.76)) LatLng lastPosition,
   @Default({}) Set<Marker> markers,
 }) = _MyMapState;
}

final myMapStateProvider = StateNotifierProvider((_) => MyMapStateProvider());

class MyMapStateProvider extends StateNotifier<MyMapState> {
 MyMapStateProvider() : super(const MyMapState());
 
 static const initialPosition = LatLng(35.68, 139.76);
 Completer<GoogleMapController> googleMapController;
 final Set<Marker> _markers = {};
 
 void initState() {
   googleMapController = Completer();
 }
 void onMapCreated(GoogleMapController controller) {
   googleMapController.complete(controller);
 }
 void onCameraMove(CameraPosition position) {
   state = state.copyWith(lastPosition: position.target);
 }
 void addMarker() {
   _markers.add(Marker(
       markerId: MarkerId(state.lastPosition.toString()),
       position: state.lastPosition,
       infoWindow: InfoWindow(title: 'Remember Here', snippet: 'good place'),
       icon: BitmapDescriptor.defaultMarker));
   state = state.copyWith(markers: _markers);
 }
}

この記事が気に入ったらサポートをしてみませんか?