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

Question

実現したいこと

地点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..

該当のソースコード

//インポート
import 'package:flutter/material.dart';
import 'package:flutter_polyline_points/flutter_polyline_points.dart';
import 'package:geolocator/geolocator.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

//メイン
void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  Future(
    () async {
      LocationPermission permission = await Geolocator.checkPermission();
      if (permission == LocationPermission.denied) {
        await Geolocator.requestPermission();
      }
    },
  );
  runApp(const MyApp());
}

//ロードさせる
class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

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

//基本
class _MyAppState extends State<MyApp> {
  static const String API_KYE = "私のGoogleMapのAPIキー";

  late GoogleMapController mapController;
  
  final Set<Polyline> polyline = {};

  final LatLng _center = const LatLng(34.720880534338605, 135.52205329786585);

  final LatLng start = const LatLng(34.70341664798789, 135.497613088314);
  final LatLng destination = const LatLng(34.73306557979083, 135.5571219134344);
  
  void _onMapCreated(GoogleMapController controller) {
    mapController = controller;
  }

  @override
  void initState() {
    super.initState();
    GetRoutes();
  }

  //経路の配列を受け取って経路の設定をするメソッド
  Future<void> GetRoutes() async {
    List<LatLng> points = await CreatePolyline();
    setState(() {
      polyline.add(Polyline(
          polylineId: const PolylineId("Route"),
          visible: true,
          color: Colors.blue,
          width: 5,
          points: points));
    });
  }

  //経路の配列を返すメソッド
  Future<List<LatLng>> CreatePolyline() async {
    List<LatLng> polylineCoordinates = [];
    PolylinePoints polylinePoints = PolylinePoints();
    //
    //
    //下の行がエラーを吐いたとき黄色い線が引かれる
    //
    //
    PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
      API_KYE,
      PointLatLng(start.latitude, start.longitude),
      PointLatLng(destination.latitude, destination.longitude),
    );

    if (result.points.isNotEmpty) {
      result.points.forEach((PointLatLng point) {
        polylineCoordinates.add(LatLng(point.latitude, point.longitude));
      });
    }

    return polylineCoordinates;
  }

  //マップの表示を切り替えるためのウィジェット
  Widget CreateMap() {
    return GoogleMap(
      mapType: MapType.normal,
      onMapCreated: _onMapCreated,
      initialCameraPosition: CameraPosition(target: _center, zoom: 8),
      polylines: polyline,
      markers: {
        Marker(markerId: const MarkerId("origin"), position: start),
        Marker(markerId: const MarkerId("destination"), position: destination)
      },
    );
  }

  //身体の部分（読み込みするとこ）
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        useMaterial3: true,
        colorSchemeSeed: Colors.green[700],
      ),
      home: Scaffold(
          appBar: AppBar(
            title: const Text('Maps Sample App'),
            elevation: 2,
          ),
          body: Stack(
            children: <Widget>[
              GoogleMap(
                onMapCreated: _onMapCreated,
                initialCameraPosition: CameraPosition(
                  target: _center,
                  zoom: 18.0,
                ),
                myLocationEnabled: true,
                markers: {
                  Marker(
                      markerId: (MarkerId('marker1')),
                      position: LatLng(34.663694401896244, 135.5185330148645))
                },
              ),
              SafeArea(
                  child: Align(
                alignment: Alignment.centerRight,
                child: Padding(
                  padding: const EdgeInsets.only(right: 10.0, bottom: 100.0),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      ClipOval(
                        child: Material(
                          color: Colors.green.shade100,
                          child: InkWell(
                            splashColor: Colors.green,
                            child: SizedBox(
                              width: 50,
                              height: 50,
                              child: Icon(Icons.add),
                            ),
                            onTap: () {
                              mapController.animateCamera(
                                CameraUpdate.zoomIn(),
                              );
                            },
                          ),
                        ),
                      ),
                      SizedBox(height: 20),
                      ClipOval(
                        child: Material(
                          color: Colors.green.shade100,
                          child: InkWell(
                            splashColor: Colors.green,
                            child: SizedBox(
                              width: 50,
                              height: 50,
                              child: Icon(Icons.remove),
                            ),
                            onTap: () {
                              mapController
                                  .animateCamera(CameraUpdate.zoomOut());
                            },
                          ),
                        ),
                      ),
                      SizedBox(height: 20),
                      ClipOval(
                        child: Material(
                          color: Colors.green.shade100,
                          child: InkWell(
                            splashColor: Colors.green,
                            child: SizedBox(
                              width: 50,
                              height: 50,
                              child: Icon(Icons.search),
                            ),
                            onTap: () {
                              setState(() {
                                CreateMap();
                              });
                            },
                          ),
                        ),
                      )
                    ],
                  ),
                ),
              ))
            ],
          )),
    );
  }
}

依存関係

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

Answer 1

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

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

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

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

  //経路の配列を受け取って経路の設定をするメソッド
  void GetRoutes() {
    PolylinePoints polylinePoints = PolylinePoints();
    polylinePoints
        .getRouteBetweenCoordinates(
      API_KYE,
      PointLatLng(start.latitude, start.longitude),
      PointLatLng(destination.latitude, destination.longitude),
    )
        .then((result) {
      List<LatLng> polylineCoordinates = [];
      if (result.points.isNotEmpty) {
        result.points.forEach((PointLatLng point) {
          polylineCoordinates.add(LatLng(point.latitude, point.longitude));
        });
        setState(() {
          polyline.add(Polyline(
              polylineId: const PolylineId("Route"),
              visible: true,
              color: Colors.blue,
              width: 5,
              points: polylineCoordinates));
        });
      }
    });
  }

  //マップの表示を切り替えるためのウィジェット
  void CreateMap() {
    isVisiblePolyline = !isVisiblePolyline;
    GetRoutes();
  }

  bool isVisiblePolyline = false;

  //身体の部分（読み込みするとこ）
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        useMaterial3: true,
        colorSchemeSeed: Colors.green[700],
      ),
      home: Scaffold(
          appBar: AppBar(
            title: const Text('Maps Sample App'),
            elevation: 2,
          ),
          body: Stack(
            children: <Widget>[
              GoogleMap(
                onMapCreated: _onMapCreated,
                initialCameraPosition: CameraPosition(
                  target: _center,
                  zoom: 18.0,
                ),
                polylines: isVisiblePolyline ? polyline : const <Polyline>{},
                myLocationEnabled: true,
                markers: isVisiblePolyline
                    ? {
                        Marker(
                            markerId: const MarkerId("origin"),
                            position: start),
                        Marker(
                            markerId: const MarkerId("destination"),
                            position: destination)
                      }
                    : {
                        const Marker(
                            markerId: (MarkerId('marker1')),
                            position:
                                LatLng(34.663694401896244, 135.5185330148645))
                      },
              ),

---

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

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

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

              GoogleMap(
                onMapCreated: _onMapCreated,
                initialCameraPosition: CameraPosition(
                  target: _center,
                  zoom: 18.0,
                ),
                polylines: isVisiblePolyline ? polyline : const <Polyline>{},
                myLocationEnabled: true,
                markers: isVisiblePolyline
                    ? {
                        Marker(
                            markerId: const MarkerId("origin"),
                            position: start),
                        Marker(
                            markerId: const MarkerId("destination"),
                            position: destination)
                      }
                    : {
                        Marker(
                            markerId: (MarkerId('marker1')),
                            position:
                                LatLng(34.663694401896244, 135.5185330148645))
                      },

tap処理はこんな感じ。

                            onTap: () {
                              setState(() {
                                isVisiblePolyline = true;
                              });
                            },

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

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

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

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

Comments

[C2105]

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

[C2105]

返信が遅れてしまい申し訳ありません。
丁寧に説明も添えていただけてとてもありがたいです。
ありがとうございます。
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]

さすがにどんなエラーが出ているのか不明なので、答えようがないです。
回答を求めたいのであれば、情報は正しく出してください。

エラーがあります。動きません。強調表示される。というだけでは、何の情報にもなっていません。

[C2105]

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

[ta.fu]

私の方では特に問題ないので、実行環境のせいかな。

https://github.com/flutter/flutter/issues/121798
上の奥の方で --web-renderer html にするとうまくいったという報告がありました。
キャンバスキットのローディングが阻害されていたためだそうです。

あとはバージョン依存か。
私はFlutterの3.10.0を使ってます。

これで改善が無いようであれば、私ではお手上げですね。