explo

Description:

explo

⚠️ This package is experimental.

Explo allows you to explore the render tree of a Flutter app in 3D, through an
exploded representation.

Getting Started #
Capturing the render tree #
The app, whose render tree you want to capture for visualization, needs to be
instrumented with explo_capture.
Exploring the render tree #
After you have setup your app to capture the render tree, you can explore it
either by using an IDE extension, or by embedding the ManualConnectExploView
into a Flutter app.
IDE extension #
This is the easiest way to explore the render tree. The extension allows you to
open a new panel, showing the render tree of any app that has been launched
through the IDE.
Currently, there is only support for VS Code, through the
explo-code extension.
Embedded Explo view #
Add explo as a dependency:
flutter pub add explo
copied to clipboard
Then display the ManualConnectExploView in a Flutter app. You could for
example, create a mini app, in explo.dart in your lib folder, and add the
following code:
import 'package:flutter/material.dart';
import 'package:explo/explo.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: ManualConnectExploView(),
);
}
}
copied to clipboard
Launch both your main app and the app containing ManualConnectExploView. When
you open this view, you will be asked to enter the VM service URL of the app you
want to visualize. This URL is logged early on when an app is launched.