Flutter中如何使用model_viewer_plus: ^1.9.3插件

在Flutter项目中集成model_viewer_plus: ^1.9.3插件时遇到问题，按照文档添加依赖后运行报错。具体表现为：导入插件后无法识别ModelViewer组件，Android端构建失败并提示"Minimum supported Gradle version is X.X.X"。已尝试清理缓存和升级Gradle版本，但问题依旧。请问正确的集成步骤是什么？是否需要额外配置AndroidManifest.xml或build.gradle？能否提供一个完整的示例代码？

2 回复

在Flutter中使用model_viewer_plus插件：

  1. 添加依赖到pubspec.yaml：
dependencies:
  model_viewer_plus: ^1.9.3
  1. 导入包：
import 'package:model_viewer_plus/model_viewer_plus.dart';
  1. 使用组件：
ModelViewer(
  src: 'assets/model.glb',
  ar: true,
  autoRotate: true,
  cameraControls: true,
)

支持glTF/GLB格式的3D模型，可开启AR功能。

更多关于Flutter中如何使用model_viewer_plus: ^1.9.3插件的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中使用 model_viewer_plus: ^1.9.3 插件非常简单，它允许你在应用中显示 3D 模型（如 glTF 和 GLB 格式）。以下是基本步骤和示例代码：

1. 添加依赖

在 pubspec.yaml 文件的 dependencies 部分添加：

dependencies:
  model_viewer_plus: ^1.9.3

然后运行 flutter pub get 安装插件。

2. 配置平台权限（仅 Android）

  • Android：在 android/app/src/main/AndroidManifest.xml 的 <application> 标签内添加：
<uses-permission android:name="android.permission.INTERNET" />

3. 基本使用示例

在 Flutter 页面中导入包并使用 ModelViewer 组件：

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

class ModelViewerPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('3D 模型查看器')),
      body: ModelViewer(
        src: 'https://modelviewer.dev/shared-assets/models/Astronaut.glb', // 模型 URL 或本地路径
        alt: '宇航员 3D 模型',
        ar: true, // 启用 AR
        autoRotate: true, // 自动旋转
        cameraControls: true, // 允许用户控制相机
      ),
    );
  }
}

4. 主要参数说明

  • src：模型文件路径（支持网络 URL 或本地 assets，如 'assets/model.glb'）。
  • alt：模型的替代文本。
  • ar：是否启用 AR 模式（需设备支持）。
  • autoRotate：模型自动旋转。
  • cameraControls：允许用户通过手势调整视角。

5. 加载本地模型

将模型文件（如 .glb）放入 assets 文件夹，并在 pubspec.yaml 中声明：

flutter:
  assets:
    - assets/model.glb

代码中使用：

ModelViewer(
  src: 'assets/model.glb',
  // 其他参数...
)

注意事项

  • 确保模型文件格式兼容（glTF/GLB）。
  • 网络模型需要互联网权限。
  • 测试时建议使用真机，部分功能在模拟器上可能受限。

通过以上步骤，你可以快速集成 3D 模型查看功能。如需更多高级配置（如自定义背景、缩放限制等），可参考插件的官方文档。

回到顶部