How to hide the border around the ModelViewer widget?

[PeterTF656]

(Running on Android 10) I put the ModelViewer widget inside a SizedBox:

                SizedBox(
                    height: MediaQuery.of(context).size.width * 0.6,
                    width: MediaQuery.of(context).size.width * 0.6,
                    child: ModelViewer(
                      // backgroundColor: Colors.white,
                      src:
                          'https://modelviewer.dev/shared-assets/models/Astronaut.glb',
                      // src: 'assets/Astronaut.glb', // a bundled asset file
                      alt: "A 3D model of an astronaut",
                      ar: true,
                      arModes: ['scene-viewer', 'webxr', 'quick-look'],
                      autoRotate: true,
                      cameraControls: true,
                      iosSrc:
                          'https://modelviewer.dev/shared-assets/models/Astronaut.usdz',
                    ),
                  ),

and I see a border around the ModelViewer widget when it is clicked:

Is it possible to get rid of that border?

[Foldblade]

Sorry but I cannot reproduce this problem with the following code on my Android 11:

import 'package:flutter/material.dart';
import 'package:model_viewer_plus/model_viewer_plus.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(title: Text("Model Viewer")), body: TestChild()),
    );
  }
}

class TestChild extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        width: 400,
        height: 300,
        child: Card(
          child: Center(
            child: SizedBox(
              height: MediaQuery.of(context).size.width * 0.6,
              width: MediaQuery.of(context).size.width * 0.6,
              child: ModelViewer(
                // backgroundColor: Colors.white,
                src:
                    'https://modelviewer.dev/shared-assets/models/Astronaut.glb',
                // src: 'assets/Astronaut.glb', // a bundled asset file
                alt: "A 3D model of an astronaut",
                ar: true,
                arModes: ['scene-viewer', 'webxr', 'quick-look'],
                autoRotate: true,
                cameraControls: true,
                iosSrc:
                    'https://modelviewer.dev/shared-assets/models/Astronaut.usdz',
              ),
            ),
          ),
        ));
  }
}

https://user-images.githubusercontent.com/25426917/159424219-4234f773-2c54-4894-9e83-f4a3d5911ae3.mp4

May you post more code and record a screen video for it?

[PeterTF656]

@Foldblade Thank you for your response!

here is a video showing what I was talking about:

https://user-images.githubusercontent.com/71594839/159489254-6364e9be-9471-489f-97e7-ca2be8339684.mp4

It seems the border only occurs when the widget is clicked.

BTW, I am using HUAWEI MATE X2 and Harmony OS, not exactly android 10, I think that might cause some issues.

[fishofeyes]

Same bug on iPhoneX

SizedBox(
        width: 500,
        height: 500,
        child: ModelViewer(
          src: "https://modelviewer.dev/shared-assets/models/RocketShip.glb",
          disablePan: true,
          disableTap: true,
          scale: "1 1 1",
          disableZoom: true,
          autoPlay: false,
          minHotspotOpacity: 0,
          maxHotspotOpacity: 1,
          alt: "A 3D model of a Shoe",
          ar: true,
          arModes: ['scene-viewer', 'webxr', 'quick-look'],
        ),
      ),

https://github.com/omchiii/model_viewer_plus.dart/assets/18106623/9576bf77-d1d4-4822-95b7-be79851a2331