Flutter开发工具集成插件devtools_app_shared的使用

devtools_app_shared 是一个包含了Dart和Flutter DevTools中可以共享的UI、实用工具和服务组件的包。它可以被DevTools、DevTools扩展和其他需要相同逻辑或样式的工具表面使用。

使用方法

添加依赖

首先，将该包作为依赖添加到你的 pubspec.yaml 文件中：

dependencies:
  devtools_app_shared: ^latest_version

然后运行以下命令来获取依赖：

$ flutter pub add devtools_app_shared

导入所需的库

根据需要导入相应的组件库：

import 'package:devtools_app_shared/service.dart';
import 'package:devtools_app_shared/service_extensions.dart' as extensions;
import 'package:devtools_app_shared/ui.dart';
import 'package:devtools_app_shared/utils.dart';

示例代码

1. 设置和访问全局变量

import 'package:devtools_app_shared/utils.dart';

class MyCoolClass {
  void foo() {
    print('Hello from MyCoolClass');
  }
}

MyCoolClass get coolClass => globals[MyCoolClass] as MyCoolClass;

void main() {
  // 创建一个全局可访问的变量（`globals[ServiceManager]`）；
  setGlobal(MyCoolClass, MyCoolClass());
  coolClass.foo();
}

2. 使用实用工具如 AutoDisposeMixin

AutoDisposeMixin 支持在 StatefulWidget 生命周期中自动处理监听器。

import 'package:flutter/material.dart';
import 'package:devtools_app_shared/utils.dart';

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({super.key});

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> with AutoDisposeMixin {
  var foo = 'hi';

  @override
  void initState() {
    super.initState();
    addAutoDisposeListener(ValueNotifier(0), () {
      setState(() {
        foo = '$foo hi';
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Text(foo);
  }
}

3. 访问共享的UI组件和样式

import 'package:flutter/material.dart';
import 'package:devtools_app_shared/ui.dart';

class ExampleWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RoundedOutlinedBorder(
      child: Column(
        children: [
          AreaPaneHeader(
            roundedTopBorder: false,
            includeTopBorder: false,
            title: Text('This is a section header'),
          ),
          Expanded(
            child: Center(
              child: Text(
                'Foo',
                style: Theme.of(context).textTheme.bodyText1, // 使用主题中的样式
              ),
            ),
          ),
        ],
      ),
    );
  }
}

4. VM服务管理，包括访问隔离和扩展

import 'package:devtools_app_shared/service.dart';
import 'package:devtools_app_shared/service_extensions.dart' as extensions;
import 'package:devtools_shared/service.dart';
import 'dart:async';

void main() async {
  final serviceManager = ServiceManager();

  // 监听连接更新
  serviceManager.connectedState.addListener(() {
    if (serviceManager.connectedState.value.connected) {
      print('Manager connected to VM service');
    } else {
      print('Manager not connected to VM service');
    }
  });

  final finishedCompleter = Completer<void>();
  final vmService = await connect<VmService>(
    uri: Uri.parse('ws://localhost:8181/ws'),
    finishedCompleter: finishedCompleter,
    serviceFactory: VmService.defaultFactory,
  );

  await serviceManager.vmServiceOpened(
    vmService,
    onClosed: finishedCompleter.future,
  );

  // 获取服务扩展状态
  final ValueListenable<ServiceExtensionState> performanceOverlayEnabled =
      serviceManager.manager.serviceExtensionManager.getServiceExtensionState(
        extensions.performanceOverlay.extension,
      );

  // 设置服务扩展状态
  await serviceManager.manager.serviceExtensionManager.setServiceExtensionState(
    extensions.performanceOverlay.extension,
    enabled: true,
    value: true,
  );

  // 访问隔离
  final myIsolate = serviceManager.isolateManager.mainIsolate.value;

  // 等等...
}

问题反馈

此包是更大的 flutter/devtools 项目的一部分。请在那里报告任何问题或反馈。

支持的Flutter版本

此包遵循 flutter/packages 的支持Flutter版本策略，即支持最新的 stable 版本以及当前的 master 版本。实际上，这个包通常也支持较旧的版本，除非有特定需求，如使用新的DevTools或Flutter功能，才会更新最低版本要求。