FlutterでGoogleマップ上の現在の位置を表示する方法

方法1: google_maps_flutterパッケージを使用する方法

1. プロジェクトのpubspec.yamlファイルに、google_maps_flutterパッケージを追加します。

dependencies:
  google_maps_flutter: ^2.0.0

2. パッケージをインストールします。

flutter pub get

3. マップを表示するウィジェットを作成します。

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:location/location.dart';
class MapScreen extends StatefulWidget {
  @override
  _MapScreenState createState() => _MapScreenState();
}
class _MapScreenState extends State<MapScreen> {
  GoogleMapController? _controller;
  LocationData? _currentLocation;
  @override
  void initState() {
    super.initState();
    _getCurrentLocation();
  }
  void _getCurrentLocation() async {
    var location = Location();
    _currentLocation = await location.getLocation();
    setState(() {});
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Map Screen'),
      ),
      body: GoogleMap(
        onMapCreated: (controller) {
          _controller = controller;
        },
        initialCameraPosition: CameraPosition(
          target: LatLng(
            _currentLocation?.latitude ?? 0.0,
            _currentLocation?.longitude ?? 0.0,
          ),
          zoom: 15.0,
        ),
        markers: Set<Marker>.from([
          Marker(
            markerId: MarkerId('currentLocation'),
            position: LatLng(
              _currentLocation?.latitude ?? 0.0,
              _currentLocation?.longitude ?? 0.0,
            ),
          ),
        ]),
      ),
    );
  }
}

4. MapScreenウィジェットを使用して、現在の位置を表示する画面を作成します。

import 'package:flutter/material.dart';
import 'map_screen.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Google Maps Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MapScreen(),
    );
  }
}

この方法では、google_maps_flutterパッケージを使用してマップを表示し、locationパッケージを使用して現在の位置情報を取得します。

方法2: webview_flutterパッケージを使用する方法

1. プロジェクトのpubspec.yamlファイルに、webview_flutterパッケージを追加します。

dependencies:
  webview_flutter: ^3.0.0

2. パッケージをインストールします。

flutter pub get

3. WebViewを表示するウィジェットを作成します。

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
class MapScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Map Screen'),
      ),
      body: WebView(
        initialUrl: 'https://www.google.com/maps',
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  }
}

4. MapScreenウィジェットを使用して、現在の位置を表示する画面を作成します（方法1と同じ）。

この方法では、webview_flutterパッケージを使用してGoogleマップのウェブビューを表示します。

以上の方法は、FlutterでGoogleマップ上の現在の位置を表示するためのいくつかの例です。選択した方法に応じて、必要なパッケージをインストールし、適切なウィジェットを作成してください。