Flutter界面美化与清晰度增强插件flutter_clarity的使用

flutter_clarity

一个允许在应用程序中集成Microsoft Clarity的Flutter插件。

安装

flutter pub add flutter_clarity

使用

import 'package:flutter_clarity/flutter_clarity.dart';

// 初始化Clarity。
FlutterClarityPlugin.initialize("<ProjectId>");

// 设置自定义用户ID。
FlutterClarityPlugin.setCustomUserId("<UserID>");

// 获取当前会话ID以与其他工具关联。
FlutterClarityPlugin.getCurrentSessionId().then((id) => {...});

初始化参数

/**
 * 使用提供的参数初始化Clarity插件。
 *
 * @param projectId     发送数据的目标Clarity项目ID。
 * @param userId        当前用户的自定义标识符。如果传递为undefined，则将自动生成用户ID。用户ID通常在会话之间保持一致。提供的用户ID必须满足以下条件：
 *                          1. 不能为空字符串。
 *                          2. 应该是base36且小于"1Z141Z4"。
 * @param logLevel      在设备日志流中显示的日志级别（"Verbose", "Debug", "Info", "Warning", "Error", "None"）。
 * @param allowMeteredNetworkUsage  允许在设备计量网络上上传会话数据到服务器。
 * @param enableWebViewCapture    允许Clarity捕获web视图的DOM内容。
 * @param allowedDomains    白名单域名列表，允许Clarity捕获其DOM内容。如果包含"*"作为元素，则所有域名都将被捕获。
 */
function initialize(
  projectId: string,
  userId?: string,
  logLevel: string = "None",
  allowMeteredNetworkUsage: boolean = false,
  enableWebViewCapture: boolean = true,
  allowedDomains: string[] = ["*"],
)

许可证

MIT

完整示例Demo

以下是完整的示例代码，展示如何在Flutter应用中使用flutter_clarity插件：

import 'package:flutter/material.dart';
import 'dart:async';

import 'package:flutter/services.dart';
import 'package:flutter_clarity/flutter_clarity.dart';

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final _flutterClarityPlugin = FlutterClarityPlugin();
  String _sessionId = 'Unknown';

  [@override](/user/override)
  void initState() {
    super.initState();
    initClarityState();
  }

  // 平台消息是异步的，所以我们通过异步方法进行初始化。
  Future<void> initClarityState() async {
    String sessionId;
    // 平台消息可能会失败，所以我们使用try/catch处理PlatformException。
    // 我们还处理了消息可能返回null的情况。
    try {
      // 示例项目ID : fwof4hmuvb
      await _flutterClarityPlugin.initialize(projectId: 'fwof4hmuvb');

      sessionId = await _flutterClarityPlugin.getCurrentSessionId() ?? 'Unknown clarity session';
    } on PlatformException {
      sessionId = 'Failed to get clarity session.';
    }

    // 如果在异步平台消息飞行期间小部件从树中移除，我们希望丢弃回复而不是调用setState来更新我们的不存在的外观。
    if (!mounted) return;

    setState(() {
      _sessionId = sessionId;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Clarity示例应用'),
        ),
        body: Center(
          child: Text('Clarity会话: $_sessionId\n'),
        ),
      ),
    );
  }
}