FlutterとDartとGoogleMapのAPIで地点Aと地点Bの経路を示したいがデバッグ時にエラーを吐いてしまう

実現したいこと

地点Aから地点Bへの経路を表示させたいのですが、うまくいきません。

前提

FlutterとDart、GoogleMapのAPIでマップのアプリを作成しています。
地図を表示させるまではうまく行けたのですが、地点Aから地点Bの経路を表示することがうまくできません。
コードのエラーは出ていないのですが、Flutter（Chrome）でデバッグを始めると起動時にエラーメッセージを吐いて止まってしまいます（下部参照）。
勉強したてで分からないことが多く、どなたかのお手をお借りしたいです。

発生している問題・エラーメッセージ

ChromeProxyService: Failed to evaluate expression 'polylinePoints':
InternalError: Expression evaluation in async frames is not supported.
No frame with index 77..

該当のソースコード

Dart
1//インポート
2import 'package:flutter/material.dart';
3import 'package:flutter_polyline_points/flutter_polyline_points.dart';
4import 'package:geolocator/geolocator.dart';
5import 'package:google_maps_flutter/google_maps_flutter.dart';
6
7//メイン
8void main() async {
9  WidgetsFlutterBinding.ensureInitialized();
10
11  Future(
12    () async {
13      LocationPermission permission = await Geolocator.checkPermission();
14      if (permission == LocationPermission.denied) {
15        await Geolocator.requestPermission();
16      }
17    },
18  );
19  runApp(const MyApp());
20}
21
22//ロードさせる
23class MyApp extends StatefulWidget {
24  const MyApp({Key? key}) : super(key: key);
25
26  @override
27  _MyAppState createState() => _MyAppState();
28}
29
30//基本
31class _MyAppState extends State<MyApp> {
32  static const String API_KYE = "私のGoogleMapのAPIキー";
33
34  late GoogleMapController mapController;
35  
36  final Set<Polyline> polyline = {};
37
38  final LatLng _center = const LatLng(34.720880534338605, 135.52205329786585);
39
40  final LatLng start = const LatLng(34.70341664798789, 135.497613088314);
41  final LatLng destination = const LatLng(34.73306557979083, 135.5571219134344);
42  
43  void _onMapCreated(GoogleMapController controller) {
44    mapController = controller;
45  }
46
47  @override
48  void initState() {
49    super.initState();
50    GetRoutes();
51  }
52
53  //経路の配列を受け取って経路の設定をするメソッド
54  Future<void> GetRoutes() async {
55    List<LatLng> points = await CreatePolyline();
56    setState(() {
57      polyline.add(Polyline(
58          polylineId: const PolylineId("Route"),
59          visible: true,
60          color: Colors.blue,
61          width: 5,
62          points: points));
63    });
64  }
65
66  //経路の配列を返すメソッド
67  Future<List<LatLng>> CreatePolyline() async {
68    List<LatLng> polylineCoordinates = [];
69    PolylinePoints polylinePoints = PolylinePoints();
70    //
71    //
72    //下の行がエラーを吐いたとき黄色い線が引かれる
73    //
74    //
75    PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
76      API_KYE,
77      PointLatLng(start.latitude, start.longitude),
78      PointLatLng(destination.latitude, destination.longitude),
79    );
80
81    if (result.points.isNotEmpty) {
82      result.points.forEach((PointLatLng point) {
83        polylineCoordinates.add(LatLng(point.latitude, point.longitude));
84      });
85    }
86
87    return polylineCoordinates;
88  }
89
90  //マップの表示を切り替えるためのウィジェット
91  Widget CreateMap() {
92    return GoogleMap(
93      mapType: MapType.normal,
94      onMapCreated: _onMapCreated,
95      initialCameraPosition: CameraPosition(target: _center, zoom: 8),
96      polylines: polyline,
97      markers: {
98        Marker(markerId: const MarkerId("origin"), position: start),
99        Marker(markerId: const MarkerId("destination"), position: destination)
100      },
101    );
102  }
103
104  //身体の部分（読み込みするとこ）
105  @override
106  Widget build(BuildContext context) {
107    return MaterialApp(
108      theme: ThemeData(
109        useMaterial3: true,
110        colorSchemeSeed: Colors.green[700],
111      ),
112      home: Scaffold(
113          appBar: AppBar(
114            title: const Text('Maps Sample App'),
115            elevation: 2,
116          ),
117          body: Stack(
118            children: <Widget>[
119              GoogleMap(
120                onMapCreated: _onMapCreated,
121                initialCameraPosition: CameraPosition(
122                  target: _center,
123                  zoom: 18.0,
124                ),
125                myLocationEnabled: true,
126                markers: {
127                  Marker(
128                      markerId: (MarkerId('marker1')),
129                      position: LatLng(34.663694401896244, 135.5185330148645))
130                },
131              ),
132              SafeArea(
133                  child: Align(
134                alignment: Alignment.centerRight,
135                child: Padding(
136                  padding: const EdgeInsets.only(right: 10.0, bottom: 100.0),
137                  child: Column(
138                    mainAxisAlignment: MainAxisAlignment.end,
139                    children: <Widget>[
140                      ClipOval(
141                        child: Material(
142                          color: Colors.green.shade100,
143                          child: InkWell(
144                            splashColor: Colors.green,
145                            child: SizedBox(
146                              width: 50,
147                              height: 50,
148                              child: Icon(Icons.add),
149                            ),
150                            onTap: () {
151                              mapController.animateCamera(
152                                CameraUpdate.zoomIn(),
153                              );
154                            },
155                          ),
156                        ),
157                      ),
158                      SizedBox(height: 20),
159                      ClipOval(
160                        child: Material(
161                          color: Colors.green.shade100,
162                          child: InkWell(
163                            splashColor: Colors.green,
164                            child: SizedBox(
165                              width: 50,
166                              height: 50,
167                              child: Icon(Icons.remove),
168                            ),
169                            onTap: () {
170                              mapController
171                                  .animateCamera(CameraUpdate.zoomOut());
172                            },
173                          ),
174                        ),
175                      ),
176                      SizedBox(height: 20),
177                      ClipOval(
178                        child: Material(
179                          color: Colors.green.shade100,
180                          child: InkWell(
181                            splashColor: Colors.green,
182                            child: SizedBox(
183                              width: 50,
184                              height: 50,
185                              child: Icon(Icons.search),
186                            ),
187                            onTap: () {
188                              setState(() {
189                                CreateMap();
190                              });
191                            },
192                          ),
193                        ),
194                      )
195                    ],
196                  ),
197                ),
198              ))
199            ],
200          )),
201    );
202  }
203}
204

依存関係

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.2.8
  google_maps_flutter_web: ^0.5.0
  flutter_polyline_points: ^1.0.0
  geolocator:

試したこと

PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
      API_KYE,
      PointLatLng(start.latitude, start.longitude),
      PointLatLng(destination.latitude, destination.longitude),
    );

のawaitを消してみましたが、別のエラーが発生してしまいました。（以下エラー）

A value of type 'Future<PolylineResult>' can't be assigned to a variable of type 'PolylineResult'.
Try changing the type of the variable, or casting the right-hand type to 'PolylineResult'.

また、海外の質問サイト（https://github.com/flutter/flutter/issues/121798 ）でメイン関数からasyncを削除することで動く、とあったので試してみましたが、変わらず同じエラーが出てしまいました。

補足情報（FW/ツールのバージョンなど）

作成環境はVSCodeです。

作成時に参考にしたサイト様
https://isub.co.jp/flutter/flutter-map-app-googlemap-4/
https://note.com/_hi/n/ncdcaf17a8270

行動規範の内容に同意します

回答1件

提示されたコードの一部を以下の様に変更したらどうでしょう。

ルート探索は、サーチアイコンのタップ時に処理し、探索終了後Widgetの再更新をするようにしています。
awaitを使わず、thenで非同期処理の結果でpolylineを更新して、完了後再描画するといった感じです。

initState内でルート探索を非同期で行うと、ウィジェットビルド前に何か処理を行おうとして問題となったのかな？
Chromeで試したのですが、ChromeProxyServiceのエラーが出なかったので、以下の対応も、想像での対応になってしまいますが。

dart
1  void _onMapCreated(GoogleMapController controller) {
2    mapController = controller;
3  }
4
5  //経路の配列を受け取って経路の設定をするメソッド
6  void GetRoutes() {
7    PolylinePoints polylinePoints = PolylinePoints();
8    polylinePoints
9        .getRouteBetweenCoordinates(
10      API_KYE,
11      PointLatLng(start.latitude, start.longitude),
12      PointLatLng(destination.latitude, destination.longitude),
13    )
14        .then((result) {
15      List<LatLng> polylineCoordinates = [];
16      if (result.points.isNotEmpty) {
17        result.points.forEach((PointLatLng point) {
18          polylineCoordinates.add(LatLng(point.latitude, point.longitude));
19        });
20        setState(() {
21          polyline.add(Polyline(
22              polylineId: const PolylineId("Route"),
23              visible: true,
24              color: Colors.blue,
25              width: 5,
26              points: polylineCoordinates));
27        });
28      }
29    });
30  }
31
32  //マップの表示を切り替えるためのウィジェット
33  void CreateMap() {
34    isVisiblePolyline = !isVisiblePolyline;
35    GetRoutes();
36  }
37
38  bool isVisiblePolyline = false;
39
40  //身体の部分（読み込みするとこ）
41  @override
42  Widget build(BuildContext context) {
43    return MaterialApp(
44      theme: ThemeData(
45        useMaterial3: true,
46        colorSchemeSeed: Colors.green[700],
47      ),
48      home: Scaffold(
49          appBar: AppBar(
50            title: const Text('Maps Sample App'),
51            elevation: 2,
52          ),
53          body: Stack(
54            children: <Widget>[
55              GoogleMap(
56                onMapCreated: _onMapCreated,
57                initialCameraPosition: CameraPosition(
58                  target: _center,
59                  zoom: 18.0,
60                ),
61                polylines: isVisiblePolyline ? polyline : const <Polyline>{},
62                myLocationEnabled: true,
63                markers: isVisiblePolyline
64                    ? {
65                        Marker(
66                            markerId: const MarkerId("origin"),
67                            position: start),
68                        Marker(
69                            markerId: const MarkerId("destination"),
70                            position: destination)
71                      }
72                    : {
73                        const Marker(
74                            markerId: (MarkerId('marker1')),
75                            position:
76                                LatLng(34.663694401896244, 135.5185330148645))
77                      },
78              ),

タップ後にエラーが出ると仮定してです。
もしエラーが出た操作方法が違うのであれば、どういった状況でエラーが出たかも書いて下さい。
例えば起動直後とかどうかとか。

_MyAppStateにbool isVisiblePolyline = false;を設ける。

buildの中のGoogleMapはこんな感じ。

dart
1              GoogleMap(
2                onMapCreated: _onMapCreated,
3                initialCameraPosition: CameraPosition(
4                  target: _center,
5                  zoom: 18.0,
6                ),
7                polylines: isVisiblePolyline ? polyline : const <Polyline>{},
8                myLocationEnabled: true,
9                markers: isVisiblePolyline
10                    ? {
11                        Marker(
12                            markerId: const MarkerId("origin"),
13                            position: start),
14                        Marker(
15                            markerId: const MarkerId("destination"),
16                            position: destination)
17                      }
18                    : {
19                        Marker(
20                            markerId: (MarkerId('marker1')),
21                            position:
22                                LatLng(34.663694401896244, 135.5185330148645))
23                      },

tap処理はこんな感じ。

dart
1                            onTap: () {
2                              setState(() {
3                                isVisiblePolyline = true;
4                              });
5                            },

私の環境では、ルートが求められず連続線を求められずとりあえずstart-destinationの線を作って表示しましたが、エラーは出ませんでした。

後はGetRoutes内のsetStateでの更新要求メソッドはいらないかもしれない。
ポリラインを表示するのはタップ後だから。
ポリライン計算前にタップするというケースがあれば必要かもだけど、たぶんないと思うので。

問題と思われるところ
タップで単独のウィジェットを作ろうとしたところなのかな。

タップでGoogleMapに渡す引数を変更する場合は、提示されたように単独でウィジェットを作成するようなメソッドを呼ぶのではなく、buildの中のGoogleMapへ渡す引数を変化させる必要があります。

投稿2023/06/09 02:31

編集2023/06/09 04:53

ta.fu

総合スコア1580

回答へのコメント

C2105

2023/06/09 02:48

回答ありがとうございます。とっても嬉しいです。エラーの出るタイミングの件、言葉足らずで申し訳ありません。エラーは起動直後に出てしまいます。質問文を修正しておきます。 ta.fu様が使ってるのはたぶん三項演算子ですよね（間違えてたらすみません）最近覚えたことだというのに頭から抜け落ちていました。新たな発想をありがとうございます。しかし試してみたところ、やはりエラーが出てしまいました。私の言葉足らずが原因なのでとても申し訳ないです。

C2105

2023/06/12 02:42

返信が遅れてしまい申し訳ありません。丁寧に説明も添えていただけてとてもありがたいです。ありがとうございます。 ta.fu様のコードを試してみたのですが、やはりエラーが出てしまいました。しかし出る場所が ``` Future<void> _getRoutes() async { PolylinePoints polylinePoints = PolylinePoints(); 　 //この下の行が強調表示される polylinePoints .getRouteBetweenCoordinates( API_KYE, PointLatLng(start.latitude, start.longitude), PointLatLng(destination.latitude, destination.longitude)) .then((result) { ``` に変わりました。これはもう無理なのでしょうか…

ta.fu

2023/06/12 06:10

さすがにどんなエラーが出ているのか不明なので、答えようがないです。回答を求めたいのであれば、情報は正しく出してください。エラーがあります。動きません。強調表示される。というだけでは、何の情報にもなっていません。

C2105

2023/06/14 02:52

ta.fu様、申し訳ございません。また言葉足らずになってしまいました。エラーの内容は今まで出ていたものと同じで ``` ChromeProxyService: Failed to evaluate expression 'polylinePoints': InternalError: Expression evaluation in async frames is not supported. No frame with index 77.. ``` です。

ta.fu

2023/06/14 06:54

私の方では特に問題ないので、実行環境のせいかな。 https://github.com/flutter/flutter/issues/121798 上の奥の方で --web-renderer html にするとうまくいったという報告がありました。キャンバスキットのローディングが阻害されていたためだそうです。あとはバージョン依存か。私はFlutterの3.10.0を使ってます。これで改善が無いようであれば、私ではお手上げですね。

行動規範の内容に同意します