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 */,
),
)