【flutter】タップすると、画面の中心に現在地が来るようなボタンの作成

Question

前提

google_maps_flutter というflutterパッケージを利用しています

実現したいこと

myLocationButtonEnabled = true にすることで表示されるボタンの位置を変更
もしくは
そのボタンと同様のものを自作

質問（追記）

「実現したいこと」に記載している内容の方法をお聞きしたいです。
ヒントでも良いのでコメントお待ちしています。

Comments

[y_waiwai]

で、しつもんはなんでしょうか

[shinc]

内容が不足していてすみません。
質問は、実現したいことに記載している内容の実装方法はどうするのか？です。

Answer 1

https://github.com/flutter/flutter/issues/29753
「表示されるボタンの位置を変更」については上記ページによると結局pluginの守備範囲を超えているので難しい、ということのようです。

---

https://stackoverflow.com/questions/55273101/how-to-change-google-map-apis-my-location-button-postion-in-flutter
「同様のものを自作」については上記ページを参考にして下記のコードで、一応デフォルトのボタンと同じ挙動のボタンとして動きました。
https://pub.dev/packages/location/install
Locationパッケージのメソッドで現在位置を取得しています。

https://codelabs.developers.google.com/codelabs/google-maps-in-flutter#4
マップ自体は上記ページに従って表示させているのでコード自動生成が必要です。
11/20追記 : コードを編集したのでコード自動生成は不要になりました。
よければ参考にされてください。

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:location/location.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late GoogleMapController mapController;
  late Location locationService = Location();
  LocationData? currentLocation;

  final LatLng _center = const LatLng(45.521563, -122.677433);

  void _onMapCreated(GoogleMapController controller) {
    mapController = controller;
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    locationService.onLocationChanged.listen((event) {
      currentLocation = event;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Maps Sample App'),
          backgroundColor: Colors.green[700],
        ),
        body: GoogleMap(
          myLocationEnabled: true,
          myLocationButtonEnabled: true,
          onMapCreated: _onMapCreated,
          initialCameraPosition: CameraPosition(
            target: _center,
            zoom: 11.0,
          ),
        ),
        floatingActionButton: FloatingActionButton.extended(
          onPressed: _currentLocation,
          label: Text('My Location'),
          icon: Icon(Icons.location_on),
        ),
      ),
    );
  }

  void _currentLocation() async {

    mapController.animateCamera(CameraUpdate.newCameraPosition(
      CameraPosition(
        bearing: 0,
        target: LatLng(currentLocation?.latitude ?? 0.0,
            currentLocation?.longitude ?? 0.0),
        zoom: 17.0,
      ),
    ));
  }
}

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  google_maps_flutter: ^2.2.1
  google_maps_flutter_web: ^0.4.0+3
  http: ^0.13.5
  location: ^4.4.0

Comments

[shinc]

ありがとうございます！！
自作した場合のコード例まで教えていただきとても助かります。こちらで試してみます！

[shinc]

追記ありがとうございます！！