Flutter插件explo的介绍与使用

⚠️ 此插件为 实验性 插件。

Explo 允许您通过爆炸式的表示方法在三维空间中探索 Flutter 应用的渲染树。

开始使用

捕获渲染树

要捕获您想要可视化的应用的渲染树，您需要使用 explo_capture 插件对应用程序进行配置。

探索渲染树

在您的应用已设置好以捕获渲染树后，您可以使用 IDE 扩展或嵌入 ManualConnectExploView 到 Flutter 应用中来探索它。

IDE 扩展

这是最简单的方式探索渲染树。扩展允许您打开一个新面板，展示通过 IDE 启动的任何应用的渲染树。

目前，仅支持通过 Visual Studio Code 的 explo-code 扩展。

嵌入 Explo 视图

1. 将 explo 添加为依赖项：

flutter pub add explo

1. 在 Flutter 应用中显示 <code>ManualConnectExploView</code>。例如，可以在 lib 文件夹中创建一个名为 explo.dart 的小应用程序，并添加以下代码：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: ManualConnectExploView(),
    );
  }
}

运行主应用和包含 <code>ManualConnectExploView</code> 的应用。当打开此视图时，您将被要求输入您要可视化的应用的 VM 服务 URL。该 URL 会在应用启动时早期记录下来。

完整示例代码

以下是一个完整的示例代码，展示如何使用 Explo 插件：

// example/lib/main.dart
import 'package:explo/explo.dart'; // 引入 Explo 插件
import 'package:flutter/material.dart'; // 引入 Flutter 基础库

void main() {
  runApp(const MyApp()); // 运行应用
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key); // 构造函数

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp( // 配置 Material App
      debugShowCheckedModeBanner: false, // 关闭调试标志
      title: 'Explo', // 设置应用标题
      home: ManualConnectExploView(), // 主页设置为 Explo 视图
    );
  }
}