走ったコースを地図上に描画する

android/app/src/main/AndroidManifest.xml

@@ -1,6 +1,7 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
     package="com.cammel.the4thdayofmikkabozu">
     <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
+    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
     <!-- io.flutter.app.FlutterApplication is an android.app.Application that
          calls FlutterMain.startInitialization(this); in its onCreate method.
          In most cases you can leave this as-is, but you if you want to provide
@@ -35,5 +36,8 @@
         <meta-data
             android:name="com.google.firebase.messaging.default_notification_icon"
             android:resource="@drawable/mikkabozu_logo" />
+        <meta-data
+            android:name="com.google.android.geo.API_KEY"
+            android:value="AIzaSyC4SYGk9d7_AG9R3DCleEXKCZS-6V98oJ8"/>
     </application>
 </manifest>

lib/Pages/MeasurementPage/measurement_page.dart

@@ -8,6 +8,7 @@ import 'package:flutter/services.dart';
 import 'package:geolocator/geolocator.dart';
 import 'package:the4thdayofmikkabozu/Pages/MeasurementPage/measurement_button.dart';
 import 'package:the4thdayofmikkabozu/Pages/MeasurementPage/measurement_panel.dart';
+import 'package:google_maps_flutter/google_maps_flutter.dart';
 import 'package:the4thdayofmikkabozu/permission.dart';
 import 'package:the4thdayofmikkabozu/user_data.dart' as userData;
 
@@ -24,64 +25,97 @@ class MeasurementPageState extends State<MeasurementPage> {
   double _distance = 0;
   int _timeInt = 0;
   String _timeStr = "00:00:00";
+  GoogleMapController mapController;
+  List<LatLng> polylineCoordinates = [];
+  Map<PolylineId, Polyline> polylines = {};
   static const platform = const MethodChannel("Java.Foreground");
 
   @override
   Widget build(BuildContext context) {
+    final Size size = MediaQuery.of(context).size;
     return FutureBuilder<GeolocationStatus>(
         future: Geolocator().checkGeolocationPermissionStatus(),
         builder: (BuildContext context, AsyncSnapshot<GeolocationStatus> snapshot) {
           if (!snapshot.hasData) {
             return const Center(child: CircularProgressIndicator());
           }
-
           if (snapshot.data == GeolocationStatus.denied) {
             Permission().checkPermission();
           }
           return Scaffold(
             appBar: AppBar(
               elevation: 0,
             ),
-            body: Container(
-              decoration: BoxDecoration(color: Colors.blue),
-              child: Center(
-                child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[
-                  MeasurementPanel(_distance, _timeStr),
-                  Center(
-                    child: MeasurementButton(_value, () async {
-                      if (_value == 0) {
-                        if (Platform.isAndroid) {
-                          platform.invokeMethod<dynamic>("ON");
-                        }
-                        //countTime()を1秒ごとに実行
-                        _timer = Timer.periodic(
-                          Duration(seconds: 1),
-                          countTime,
-                        );
-                      } else if (_value == 1) {
-                        if (Platform.isAndroid) {
-                          platform.invokeMethod<dynamic>("OFF");
-                        }
-                        _timer.cancel();
-                        await _pushMessage();
-                        await _pushRecord();
-                      } else {
-                        Navigator.pop(context);
-                      }
-                      setState(() {
-                        _value++;
-                      });
-                    }),
+            body: FutureBuilder<Position>(
+              future: _getLocation(),
+              builder: (BuildContext context, AsyncSnapshot<Position> snapshot) {
+                if (!snapshot.hasData) {
+                  return const Center(child: CircularProgressIndicator());
+                }
+                _updateCamera();
+                return Container(
+                  decoration: BoxDecoration(color: Colors.blue),
+                  child: Center(
+                    child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[
+                      MeasurementPanel(_distance, _timeStr),
+                      // mapの表示
+                      Container(
+                        height: size.height / 3,
+                        padding: EdgeInsets.fromLTRB(0, 0, 0, size.height / 20),
+                        child: GoogleMap(
+                          mapType: MapType.normal,
+                          initialCameraPosition: CameraPosition(
+                            target: LatLng(snapshot.data.latitude, snapshot.data.longitude),
+                            zoom: 15,
+                          ),
+                          onMapCreated: (GoogleMapController controller) {
+                            mapController = controller;
+                          },
+                          markers: _createMarker(),
+                          polylines: Set<Polyline>.of(polylines.values),
+                          zoomGesturesEnabled: true,
+                        ),
+                      ),
+                      Center(
+                        child: MeasurementButton(_value, () async {
+                          if (_value == 0) {
+                            if (Platform.isAndroid) {
+                              platform.invokeMethod<dynamic>("ON");
+                            }
+                            //countTime()を1秒ごとに実行
+                            _timer = Timer.periodic(
+                              Duration(seconds: 1),
+                              countTime,
+                            );
+                          } else if (_value == 1) {
+                            if (Platform.isAndroid) {
+                              platform.invokeMethod<dynamic>("OFF");
+                            }
+                            _timer.cancel();
+                            await _pushMessage();
+                            await _pushRecord();
+                          } else {
+                            Navigator.pop(context);
+                          }
+                          setState(() {
+                            _value++;
+                          });
+                        }),
+                      ),
+                    ]),
                   ),
-                ]),
-              ),
+                );
+              }
             ),
           );
         });
   }
 
   void countTime(Timer timer) {
-    _getLocation();
+    // 画面の更新
+    if (this.mounted) {
+      setState(() {});
+    }
     _timeInt++;
     _convertIntToTime();
   }
@@ -102,7 +136,7 @@ class MeasurementPageState extends State<MeasurementPage> {
         second.toString().padLeft(2, "0");
   }
 
-  Future<void> _getLocation() async {
+  Future<Position> _getLocation() async {
     Position _currentPosition =
         await Geolocator().getCurrentPosition(desiredAccuracy: LocationAccuracy.high); // ここで精度を「high」に指定している
     if (position == null) {
@@ -116,8 +150,18 @@ class MeasurementPageState extends State<MeasurementPage> {
         .distanceBetween(prevPosition.latitude, prevPosition.longitude, position.latitude, position.longitude);
     //小数点2位以下を切り捨てて距離に加算する
     _distance += (distance * 10).round() / 10;
-    // 画面の更新
-    setState(() {});
+    // 緯度経度の配列に現在地を追加
+    polylineCoordinates.add(LatLng(position.latitude, position.longitude));
+    PolylineId id = PolylineId('poly');
+    // polylineを更新
+    Polyline polyline = Polyline(
+      polylineId: id,
+      points: polylineCoordinates,
+      color: Colors.red,
+      width: 3,
+    );
+    polylines[id] = polyline;
+    return position;
   }
 
   // 走った距離と時間をデータベースにプッシュする
@@ -189,4 +233,27 @@ class MeasurementPageState extends State<MeasurementPage> {
           .setData(<String, dynamic>{'message': message, "sender": '[email protected]', "timestamp": Timestamp.now()});
     }
   }
+
+  Set<Marker> _createMarker() {
+    return {
+      Marker(
+        markerId: MarkerId("marker_1"),
+        position: LatLng(position.latitude, position.longitude),
+      ),
+    };
+  }
+
+  void _updateCamera() {
+    if (mapController != null) {
+      mapController.animateCamera(
+        CameraUpdate.newCameraPosition(
+          CameraPosition(
+            target:
+            LatLng(position.latitude, position.longitude),
+            zoom: 15,
+          ),
+        ),
+      );
+    }
+  }
 }

lib/Pages/MeasurementPage/measurement_panel.dart

@@ -8,21 +8,21 @@ class MeasurementPanel extends StatelessWidget {
   Widget build(BuildContext context) {
     final Size size = MediaQuery.of(context).size;
     return Padding(
-      padding: EdgeInsets.fromLTRB(size.width / 20, size.height / 10, size.width / 20, size.height / 10),
+      padding: EdgeInsets.fromLTRB(size.width / 20, size.height / 20, size.width / 20, size.height / 20),
       child: Column(
         children: <Widget>[
           //時間表示のボックス
           Center(
             child: Text(
               _time,
-              style: TextStyle(fontSize: 100, fontFamily: 'BebasNeue', color: Colors.white),
+              style: TextStyle(fontSize: 80, fontFamily: 'BebasNeue', color: Colors.white),
             ),
           ),
           //距離表示のボックス
           Center(
             child: Text(
               _convertUnit(),
-              style: TextStyle(fontSize: 100, fontFamily: 'BebasNeue', color: Colors.white),
+              style: TextStyle(fontSize: 80, fontFamily: 'BebasNeue', color: Colors.white),
             ),
           ),
         ],

pubspec.yaml

@@ -42,6 +42,7 @@ dependencies:
   image_cropper: ^1.1.0
   audioplayer: ^0.8.1
   path_provider: ^1.6.7
+  google_maps_flutter: ^0.5.27+1
 
 dev_dependencies:
   flutter_test: