Flutter数据可视化插件plotline_engage的使用

Plotline - Flutter 插件

Plotline 是排名第一的平台，用于应用内参与，旨在帮助增长和营销团队通过应用内消息提高功能采用和激活，而无需开发人员的努力。这个 Flutter 插件允许您将 Plotline 无缝集成到您的 Flutter 应用程序中。

特性

• 最小代码实现的简单集成
• 可定制的应用内消息（教练标记、聚光灯、工具提示、底部表单、徽章等）
• 基于触发器和用户目标的消息
• 分析和性能跟踪
• 跨平台支持（iOS，Android）

API 密钥

注册 Plotline 以获取 API 密钥。

完整示例 Demo

以下是使用 plotline_engage 插件的完整示例：

import 'package:flutter/material.dart';
import 'package:plotline_engage/plotline.dart';
// 假设这些是项目中的其他依赖包
// import 'package:plugin_plotline_example/routing/delegate.dart';
// import 'package:plugin_plotline_example/routing/parser.dart';
// import 'package:plugin_plotline_example/routing/route_state.dart';

// import 'screens/home.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

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

class _MyAppState extends State<MyApp> {
  final _navigatorKey = GlobalKey<NavigatorState>();
  // 假设 RouteState, SimpleRouterDelegate 和 TemplateRouteParser 是自定义类
  // late final RouteState _routeState;
  // late final SimpleRouterDelegate _routerDelegate;
  // late final TemplateRouteParser _routeParser;

  [@override](/user/override)
  void initState() {
    // 初始化路由解析器
    // _routeParser = TemplateRouteParser(
    //   allowedPaths: [
    //     '/home',
    //     '/artists',
    //     '/songs',
    //     '/song/:songId',
    //     '/artist/:artistId',
    //   ],
    //   initialRoute: '/home',
    // );
    // _routeState = RouteState(_routeParser);

    // _routerDelegate = SimpleRouterDelegate(
    //   routeState: _routeState,
    //   navigatorKey: _navigatorKey,
    //   builder: (context) => HomePage(
    //     navigatorKey: _navigatorKey,
    //   ),
    // );

    // 开启调试模式
    Plotline.debug(true);
    // 启用 Flutter 小部件触摸
    Plotline.setShouldEnableFlutterWidgetTouch(true);
    // 初始化 Plotline，传入 API Key 和用户 ID
    Plotline.init("MDMxMjc4ZTctYTVhMi00OWY1LTgxMWItNWZlNzY2Mzg3MTll", "<userId>");

    // 检查功能标志是否启用
    Plotline.isFeatureEnabled("<featureFlag>").then((value) => print("[功能标志] ${value}"));
    // 获取功能标志负载
    Plotline.getFeatureFlagPayload("<featureFlag>").then((value) => print("[功能标志] ${value}"));
    // 获取功能标志
    Plotline.getFeatureFlag("<featureFlag>").then((value) => print("[功能标志] ${value}"));

    // 设置 Plotline 事件监听器
    Plotline.setPlotlineEventsListener((eventName, properties) => {
      // 在这里实现您的回调逻辑
      print("Plotline 回调事件: $eventName 带有属性: $properties")
    });

    // 设置 Plotline 重定向监听器
    Plotline.setPlotlineRedirectListener((properties) => {
      // 在这里实现您的回调逻辑
      print("Plotline 重定向回调带有属性: $properties")
    });
    super.initState();

  }

  [@override](/user/override)
  void dispose() {
    // _routeState.dispose();
    // _routerDelegate.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return PlotlineWrapper(
        child: 
        // 假设 RouteStateScope 是一个自定义组件
        // RouteStateScope(
        //   notifier:  _routeState,
          child: MaterialApp(
            // routerDelegate: _routerDelegate,
            // routeInformationParser: _routeParser,
          ),
        // )
    );
  }
}