CODEWITHSUNDEEP
google-mapsflutterbrowser
Mawg
Mawg

Reputation: 40140

Flutter Google Maps app throws exception and crashes in browser , but not on Android

I am using this code, which accompanies this popular YouTube tutorial. It is part of a large series, with lots of views, so I would expect it to be good code. Also, it runs just fine on Android.

I followed the official Building a web application with Flutter, but, when I launch my app in the browser, it crashes.

Here's the trace before the crash:

dart.developer.registerExtension ext.flutter.inspector.getChildren developer_patch.dart:65:72 dart.developer.registerExtension ext.flutter.inspector.getChildrenSummaryTree developer_patch.dart:65:72 dart.developer.registerExtension ext.flutter.inspector.getChildrenDetailsSubtree developer_patch.dart:65:72 dart.developer.registerExtension ext.flutter.inspector.getRootWidget developer_patch.dart:65:72 dart.developer.registerExtension ext.flutter.inspector.getRootRenderObject developer_patch.dart:65:72 dart.developer.registerExtension ext.flutter.inspector.getRootWidgetSummaryTree developer_patch.dart:65:72 dart.developer.registerExtension ext.flutter.inspector.getDetailsSubtree developer_patch.dart:65:72 dart.developer.registerExtension ext.flutter.inspector.getSelectedRenderObject developer_patch.dart:65:72 dart.developer.registerExtension ext.flutter.inspector.getSelectedWidget developer_patch.dart:65:72 dart.developer.registerExtension ext.flutter.inspector.getSelectedSummaryWidget developer_patch.dart:65:72 dart.developer.registerExtension ext.flutter.inspector.isWidgetCreationTracked developer_patch.dart:65:72 dart.developer.registerExtension ext.flutter.inspector.screenshot developer_patch.dart:65:72 dart.developer.postEvent Flutter.FrameworkInitialization {} developer_patch.dart:98:16

It crashes at the call to super() in the following code (dart_sdk.js, line 6327)

  dart.DartError = class DartError extends Error {
    constructor(error) {
      super();
      if (error == null) error = new core.NullThrownError.new();
      this[dart._thrownValue] = error;
      if (error != null && typeof error == "object" && error[dart._jsError] == null) {
        error[dart._jsError] = this;
      }
    }
    get message() {
      return dart.toString(this[dart._thrownValue]);
    }
  };

here's the call stack

console.trace() debugger eval code:1:9
debugger eval code:1
DartError dart_sdk.js:6327
throw_ errors.dart:216
decodeEnvelope message_codecs.dart:569
_invokeMethod platform_channel.dart:156
onValue async_patch.dart:47
runUnary zone.dart:1439
handleValue future_impl.dart:141
handleValueCallback future_impl.dart:686
_propagateToListeners future_impl.dart:715
_completeWithValue future_impl.dart:526
future_impl.dart:560
_microtaskLoop schedule_microtask.dart:43
_startMicrotaskLoop schedule_microtask.dart:52
_scheduleImmediateWithPromise async_patch.dart:168

Question: is there anything I can do about this? I don't see any reference to "my" code (since its asynch), nor any way to find if it is a problem in "my code". It runs just fine on Android.

[Update] I also tried it with the simplest possible static map, albeit iwht a single marker, and got the same result.

Do I have to accept that Flutter for the web is on the Beta Channel and leave it a few months to see if it stabilizes? Or, does someone have a browser based Flutter Google Maps demo?

Upvotes: 1

Views: 1532

Answers (1)

Sachin Bhankhar
Sachin Bhankhar

Reputation: 900

The offical flutter google maps plugin doesn't support web right now and it is still in developers preview

Use this plugin to works with google maps on web.

https://pub.dev/packages/flutter_google_maps

Don't forget to add script tags in index.html in body which are provided by plugin's readme. Add them and everything works fine.

Hope this will help you.

Upvotes: 1

Related Questions