Round Spot

可定制的热力图接口分析库。

Round Spot 通过处理数据收集和处理,简化了 Flutter 应用程序的 UI 可访问性和行为分析。它生成漂亮的熱力圖可视化,旨在轻松直观地改进 UI 和进行故障排除。

用法

在您的主文件中导入包

import 'package:round_spot/round_spot.dart' as round_spot;

⚠️ 注意:强烈建议使用 round_spot 前缀,以避免潜在的名称冲突并提高可读性

设置

包装您的 MaterialApp 小部件以初始化库

void main() {
  runApp(round_spot.initialize(
    child: Application()
  ));
}

添加一个观察者来监控导航器

MaterialApp(
  navigatorObservers: [ round_spot.Observer() ]
)

配置

提供用于保存已处理输出的回调

round_spot.initialize(
  heatMapCallback: (data, info) => sendHeatMapImage(data)
)

配置工具以更好地满足您的需求

round_spot.initialize(
  config: round_spot.Config(
    minSessionEventCount: 5,
    uiElementSize: 15,
    heatMapPixelRatio: 2.0,
  )
)

UI 仪表盘

路由命名

路由名称用于区分页面。
确保您始终同时指定它们
使用 命名路由
推送 PageRoute
(在 RouteSetting 中)

可滚动小部件

为了正确监控与任何可滚动空间的交互,需要将 Detector
作为该小部件的直接父级放置

round_spot.Detector(
  areaID: id,
  child: ListView(
    children: /* children */,
  ),
)

GitHub

https://github.com/stasgora/round-spot