【Flutter】Google Mapで位置情報権限を許可した後に現在地を示す青丸が表示されない

Question

Flutterで初期地点を東京駅にしてGoogle Map表示した後に位置情報権限のウィンドウを表示し、許可された場合はGoogle MapのzoomControlsEnabledオプションを使用し現在地を表示されるよう実装したいと考えています。
Google Mapの表示、位置情報権限のウィンドウ表示、許可されたら現在地を取得する所までは実装できたのですが、現在地を表示することができません。

他の画面からマップ画面に移動するとGoogle Mapが再描画され現在地が表示される為、おそらくGoogle Mapが位置情報権限の許可前に描画した時のままで再描画ができていないのが原因だと思われるのですが、どのように修正すればいいのでしょうか。

コードは以下になります。

import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:geolocator/geolocator.dart';

import 'package:location_sharing_sns/model/map.dart';

class MapPage extends ConsumerStatefulWidget {
  const MapPage({Key? key}) : super(key: key);

  @override
  _MapPageState createState() => _MapPageState();
}

class _MapPageState extends ConsumerState<MapPage> {
  final Completer<GoogleMapController> _controller = Completer();
  StreamSubscription? positionStream;
  bool _changePosition = false;

  @override
  void initState() {
    super.initState();
    final map = ref.read(mapProvider);

    map.markers = {};
    map.circles = {};

    _getLocation();
  }

  @override
  void dispose() {
    positionStream?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final map = ref.watch(mapProvider);

    return Scaffold(
      body: FutureBuilder(
        future: map.checkInitialPosition(),
        builder: (context, initialPositionSnapshot) {
          if(!initialPositionSnapshot.hasData) {
            return const Center(
              child: CupertinoActivityIndicator(
                radius: 20,
              ),
            );
          }

          final isSetInitialPosition = initialPositionSnapshot.data as bool;

          return Stack(
            children: [
              GoogleMap(
                mapType: MapType.normal,
                initialCameraPosition: CameraPosition(
                  target: map.currentPosition,
                  zoom: isSetInitialPosition ? 18 : 5,
                ),
                onMapCreated: (GoogleMapController controller) {
                  _controller.complete(controller);
                },
                onCameraMove: (CameraPosition position) {
                  map.centerPosition = position.target;
                },
                onCameraIdle: () {
                  setState(() {
                    _changePosition = true;
                  });
                },
                markers: map.markers,
                circles: map.circles,
                myLocationEnabled: true,
                myLocationButtonEnabled: false,
                zoomControlsEnabled: false,
              ),
              SafeArea(
                child: Align(
                  alignment: Alignment.topCenter,
                  child: AnimatedOpacity(
                    opacity: _changePosition ? 1.0 : 0.0,
                    duration: const Duration(milliseconds: 300),
                    child: ElevatedButton(
                      style: ElevatedButton.styleFrom(
                        primary: Colors.white,
                        onPrimary: Colors.black,
                        shape: const StadiumBorder(),
                        splashFactory: InkRipple.splashFactory,
                      ),
                      onPressed: () => _getMarkers(),
                      child: const Text(
                        'このエリアを検索',
                        style: TextStyle(
                          color: Colors.black,
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          );
        },
      ),
      floatingActionButton: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            height: 50.0,
            width: 50.0,
            margin: const EdgeInsets.only(bottom: 10),
            child: FloatingActionButton(
              heroTag: "currentPosition",
              backgroundColor: Colors.white,
              foregroundColor: Colors.black87,
              onPressed: () => _getLocation(),
              child: const Icon(Icons.my_location_outlined),
            ),
          ),
        ],
      ),
    );
  }

  _getLocation() async {
    final SharedPreferences prefs = await SharedPreferences.getInstance();
    final map = ref.read(mapProvider);

    // 位置情報のアクセス許可
    final checkLocation = await map.checkLocation();

    if (checkLocation) {
      final currentPosition = await Geolocator.getCurrentPosition(
          desiredAccuracy: LocationAccuracy.best);

      prefs.setDouble('currentPositionLatitude', currentPosition.latitude);
      prefs.setDouble('currentPositionLongitude', currentPosition.longitude);

      final latLngCurrentPosition =
          LatLng(currentPosition.latitude, currentPosition.longitude);

      setState(() {
        map.currentPosition = latLngCurrentPosition;
      });

      setState(() {});

      _moveCamera(latLngCurrentPosition);
      _getMarkers();

      _getLocationStream();
    }
  }

  _getLocationStream() async {
    final map = ref.read(mapProvider);

    const locationSettings = LocationSettings(
      accuracy: LocationAccuracy.best,
    );

    positionStream =
        Geolocator.getPositionStream(locationSettings: locationSettings)
            .listen((Position position) async {
      final SharedPreferences prefs = await SharedPreferences.getInstance();

      prefs.setDouble('currentPositionLatitude', position.latitude);
      prefs.setDouble('currentPositionLongitude', position.longitude);

      final currentPosition = LatLng(position.latitude, position.longitude);

      await map.setUserCircle(currentPosition);

      if (map.currentPosition != currentPosition) {
        map.currentPosition = currentPosition;
        await _getMarkers();
      }
    });
  }

  _getMarkers() async {
    final map = ref.watch(mapProvider);
    final GoogleMapController controller = await _controller.future;

    final region = await controller.getVisibleRegion();

    setState(() {
      map.getMarkers(context, map.centerPosition!, region);
      _changePosition = false;
    });
  }

  _moveCamera(position) async {
    try {
      final GoogleMapController controller = await _controller.future;

      await controller.animateCamera(
        CameraUpdate.newCameraPosition(
          CameraPosition(
            target: position,
            zoom: 18.0,
          ),
        ),
      );

      return true;
    } catch (e) {
      return false;
    }
  }
}

Answer 1

現在地を表示したいタイミングでControllerのanimateCamera関数で移動するのはいかがでしょうか？

_controller.animateCamera(CameraUpdate.newCameraPosition(map.currentPosition));

Comments

[dauto]

回答ありがとうございます。
ご指摘いただいたanimateCameraはコード下部のmoveCameraという関数で実行しており、正常にGoogle mapの視点は移動しています。
ですが視点が移動のみでユーザーの現在地を表す青い丸は表示されない状況です。

[harakazu]

質問の意味を取り違えていました。

_moveCamera(latLngCurrentPosition);

をsetStateの中で実行してみたらいかがでしょうか？