Flutter控制面板插件 dash_kit_control_panel 的使用

dash_kit_control_panel 是一个为方便应用开发而设计的调试工具，提供了诸如网络请求、应用日志和布局预览等功能。本文将详细介绍如何在Flutter项目中集成并使用这个插件。

安装

首先，在你的 pubspec.yaml 文件中添加 dash_kit_control_panel 作为依赖项：

dependencies:
  dash_kit_control_panel: ^latest_version

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

描述

当开发应用程序时，通常需要访问一些“开发者功能”，例如查看网络请求、应用日志或在不同屏幕尺寸上预览布局。有时还需要获取设备令牌、使用代理IP地址或启用特定的应用配置模式。为此，我们创建了专门的控制面板，可以通过多次点击手势从应用中的任何位置访问。

以下是控制面板的一些截图示例：

快速开始

基本用法

要启用控制面板，可以将任意小部件包裹在 ControlPanelGate 小部件中，这样就可以通过多次点击来访问控制面板：

const ControlPanelGate(
  child: Text(
    'Control Panel',
    style: TextStyle(
      fontSize: 36,
      color: Colors.blue,
      decoration: TextDecoration.none,
    ),
  ),
),

自定义设置

你可以根据自己的需求自定义控制面板。这需要准备一个继承自 ControlPanelSettingsProvider 的 SettingsProvider 类，并在 buildSettings() 方法中返回所有将在面板中使用的控件。这些控件都应实现 ControlPanelSetting 接口。

下面是一个示例代码，展示了如何结合 dio HTTP客户端和 alice_lightweight 处理网络请求：

class ExampleSettingsProvider extends ControlPanelSettingsProvider {
  ExampleSettingsProvider({
    required this.alice,
    required this.dios,
  }) {
    _configureProxy(dios);
    _initLogger();

    ProxySettingProps.init((proxyIpAddress) {
      _proxyIp = proxyIpAddress;
    });
  }

  final Alice alice;
  final List<Dio> dios;

  String _proxyIp = '';

  @override
  Future<List<ControlPanelSetting>> buildSettings() async {
    final demoProps = DemoSettingProps(
      onDemoModeChanged: (value) {
        print('Demo mode is ${value ? 'enabled' : 'disabled'}');
      },
    );

    final proxyProps = await ProxySettingProps.standart((proxyIpAddress) {
      _proxyIp = proxyIpAddress;
    });

    final networkProps = NetworkSettingProps(
      alice: alice,
    );

    final pushProps = PushNotificationsSettingProps(
      getToken: Future.value('token'),
    );

    return [
      VersionSetting(),
      DemoSetting(demoProps),
      const DevicePreviewSetting(),
      ProxySetting(proxyProps),
      PushNotificationsSetting(pushProps),
      NetworkSetting(networkProps),
      const LicenseSetting(),
      LogConsoleButton(),
    ];
  }

  void _configureProxy(List<Dio> dios) {
    for (final dio in dios) {
      final adapter = dio.httpClientAdapter;

      if (adapter is DefaultHttpClientAdapter) {
        adapter.onHttpClientCreate = (HttpClient client) {
          client.findProxy = (uri) {
            return _proxyIp.isNotEmpty == true
                ? 'PROXY $_proxyIp:8888'
                : 'DIRECT';
          };

          client.badCertificateCallback =
              (cert, host, port) => _proxyIp.isNotEmpty == true;
        };
      }
    }
  }

  void _initLogger() {
    logger.v('Verbose log');
    logger.d('Debug log');
    logger.i('Info log');
    logger.w('Warning log');
    logger.e('Error log');
  }
}

初始化控制面板

在 main.dart 文件中初始化控制面板，并将其与 Application 小部件一起使用以激活设备预览模式：

import 'package:alice_lightweight/alice.dart';
import 'package:dash_kit_control_panel/dash_kit_control_panel.dart';
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';

final alice = Alice();
final navigatorKey = alice.getNavigatorKey();
final dio = Dio();

void main() {
  dio.interceptors.add(alice.getDioInterceptor());
  dio.options = BaseOptions(
    connectTimeout: const Duration(seconds: 15),
    receiveTimeout: const Duration(seconds: 15),
  );

  runApp(Application(
    child: ExampleApp(
      navigatorKey: navigatorKey,
      sendTestRequest: _sendTestRequest,
    ),
  ));

  final settingsProvider = ExampleSettingsProvider(
    alice: alice,
    dios: [dio],
  );

  ControlPanel.initialize(
    navigatorKey: navigatorKey,
    settingsProvider: settingsProvider,
  );

  _sendTestRequest();
}

void _sendTestRequest() {
  dio
      .get('https://www.google.org')
      .then(logger.i)
      .catchError((e, st) => logger.e('Error loading request', e, st));
}

以上就是 dash_kit_control_panel 插件的基本使用方法。你还可以参考官方示例项目了解更多详细信息。