3D Model viewer not loading

Question

I am using a flutter library called Model Viewer ModelViewer

That's a very nice plugin which works like charm on my dev version of that app. I am using it like this:

  ModelViewer(
          backgroundColor: Colors.black,
          src: 'assets/skull.glb',
          alt: "A 3D model of a skull",
          cameraControls: true,
        ),

And the .glb model is in the assets folder. My flutter is latest stable version as well as the version of this plugin.

The strange thing it that when I build the app bundle and publish the app on google play, when I navigate to the page with the model viewer the widget never loads.

I can only see a white screen.

Both the dev version and the release are tested on a physical device with android 10.

I am not sure how to debug this but would be happy for any suggestions. Can't find any solution from the original repo.

UPDATE

That's the error from the logcat:

2021-04-07 21:42:49.592 8121-8147/? E/flutter: [ERROR:flutter/lib/ui/ui_dart_state.cc(186)] Unhandled Exception: NoSuchMethodError: The getter 'address' was called on null.
    Receiver: null
    Tried calling: address
    #0      _ModelViewerState.build.<anonymous closure> (package:model_viewer/src/model_viewer.dart:127)
    #1      _ModelViewerState.build.<anonymous closure> (package:model_viewer/src/model_viewer.dart:125)
    #2      _WebViewState._onWebViewPlatformCreated (package:webview_flutter/webview_flutter.dart:375)
    #3      CupertinoWebView.build.<anonymous closure> (package:webview_flutter/src/webview_cupertino.dart:35)
    #4      AndroidViewController.create (package:flutter/src/services/platform_views.dart:746)
    <asynchronous suspension>
    #5      RenderAndroidView._sizePlatformView (package:flutter/src/rendering/platform_view.dart:195)
    <asynchronous suspension>

Thank you.

Solution 1

Found the solution to this problem.

When you use the Model Viewer you will need to add:

 <uses-permission android:name="android.permission.INTERNET"/>

to your AndroidManifest.xml file.

This way the Widget will be able to simulate the model.

Normally it does it on a local server a.k.a localhost, but when it's released this is changed.

Hope someone will find it useful.

Solution 2

Yes, you need the internet permissions,

A local server is created by the library (in model_viewer.dart) using _proxy = await HttpServer.bind(InternetAddress.loopbackIPv4, 0);. The WebView connects to this server and displays the model. The web server which we created with HttpServer.bind provides a few files: an html file, a javascript file, the model, and the favicon.ico too.

The code doesn't change based on debug/ release, but it's actually because the debug mode build automatically has this permission which allows internet access, but the Android release one does not. So the WebView successfully connects to the server only in debug. I only found out about this automatic internet permission for debug build from here. Therefore, building the release application (without uploading to the Play Store) should also catch this issue.

---

Most people won't find this an issue because their apps will need the internet permission by the time they get to adding a 3D model, or they're using a remote 3d model. I've replied to the GitHub issue about this with suggestion on adding the permission to the README. You might be interested to create a PR about that to the repo. :)

Comments

[Ben Butterworth]

Are you able to open logcat in Android Studio and see any errors? If its too spammy, I suggest trying pidcat to read the logs to diagnose this.

[Top4o]

If you are talking about debugging it locally I don't have any issues when I run it from the Android Studio on my device. The issue appears when I build the Flutter App Bundle, upload it to Google Play, download the app and run it. (So after release). During the development process this issue is not showing off.

[Ben Butterworth]

Plug the device running the google play release and see the logcat to check for the errors.

[Top4o]

I updated the question with the error related to why the Model is not loaded. Thank you for the great advice.

[Ben Butterworth]

I'm happy to help, I did a bit more digging into the repo and realised its a Android feature that the debug builds have Internet permissions automatically.

[Ben Butterworth]

I'm curious how you determined it was an internet permissions error based off that logcat error, NoSuchMethodError: The getter 'address' was called on null..

[Top4o]

I actually found a different error a little bit later and this was released to internet connection. I decided to directly share the solution. It was just internet connection problem (the error message).