Flutter功能集成插件growthbook_sdk_flutter的使用

Flutter功能集成插件growthbook_sdk_flutter的使用

概述

GrowthBook 是一个开源的功能标记和实验平台，可以帮助开发者轻松调整显示给用户的功能，并运行 A/B 测试，而无需部署新代码。GrowthBook 由两部分组成：GrowthBook 应用程序和 SDK。Flutter SDK 允许你在基于 Flutter 的移动应用中使用 GrowthBook。

主要特性

• 轻量级且快速
• 支持平台：
  • Android
  • iOS
  • Mac
  • Windows
• 支持现有的事件跟踪（GA、Segment、Mixpanel、自定义）
• 无需部署新代码即可调整变体权重和目标

安装

1. 在 pubspec.yaml 文件中添加 GrowthBook SDK 作为依赖项：

dependencies:
  growthbook_sdk_flutter: ^latest-version

集成

集成非常简单，只需按照以下步骤操作：

1. 从 GrowthBook 应用程序中创建一个 API 密钥。
2. 使用 API 密钥在应用程序启动时初始化 SDK。

final GrowthBookSDK sdkInstance = await GBSDKBuilderApp(
  apiKey: "<API_KEY>",
  attributes: {
    /// 指定用户属性
  },
  growthBookTrackingCallBack: (gbExperiment, gbExperimentResult) {},
  hostURL: '<GrowthBook_URL>',
  backgroundSync: true, // 可选：启用背景同步
).initialize();

你还可以在初始化时设置其他属性：

final GrowthBookSDK newSdkInstance = GBSDKBuilderApp(
  apiKey: "<API_KEY>",
  attributes: {
    /// 指定用户属性
  },
  client: NetworkClient(), // 提供网络调度器
  growthBookTrackingCallBack: (gbExperiment, gbExperimentResult) {},
  hostURL: '<GrowthBook_URL>',
  forcedVariations: {}, // 可选：强制变体
  qaMode: true, // 设置 QA 模式
).initialize();

newSdkInstance.setStickyBucketService(stickyBucketService: GBStickyBucketingService());

await newSdkInstance.initialize();

使用

初始化后，你可以使用 sdkInstance 来消费以下功能：

• 获取功能：

  GBFeatureResult feature(String id)
  

• 运行实验：

  GBExperimentResult run(GBExperiment experiment)
  

• 获取上下文：

  GBContext getGBContext()
  

• 获取所有功能：

  GBFeatures getFeatures()
  

模型

以下是 GrowthBook SDK 中的一些重要模型类：

• GBContext：定义了 GrowthBook 上下文。
• GBFeature：定义了功能对象，包含可能的值和分配规则。
• GBFeatureRule：定义了规则对象，用于计算功能值。
• GBFeatureSource：定义了功能值的来源。
• GBFeatureResult：定义了功能结果。
• GBExperiment：定义了单个实验。
• GBExperimentResult：定义了实验结果。
• GBVariationMeta：定义了变体的元信息。
• GBTrackData：用于触发 TrackingCallback。

流式更新

要启用流式更新，设置 backgroundSync 变量为 true 并添加流式更新 URL：

final GrowthBookSDK sdkInstance = GBSDKBuilderApp(
  backgroundSync: true,
  apiKey: "<API_KEY>",
  attributes: {
    /// 指定用户属性
  },
  growthBookTrackingCallBack: (gbExperiment, gbExperimentResult) {},
).initialize();

父条件

父条件定义了一个先决条件，包含父功能的 ID、条件和可选的门控标志。条件会评估父功能的返回值，而不是属性。例如，以下是一个要求父功能必须开启的门控先决条件：

{
  "id": "parent-feature",
  "condition": {
    "value": {
      "$exists": true
    }
  },
  "gate": true
}

远程评估

远程评估模式通过在私有服务器上评估功能标记，带来了后端 SDK 的安全性优势。使用远程评估可以确保任何敏感信息不会被客户端看到。要在 SDK 实例中启用远程评估，添加 remoteEval: true 属性：

var sdkInstance = GrowthBookBuilder(
  apiHost: "<GrowthBook_API_KEY>",
  clientKey: "<GrowthBook_ClientKey>",
  attributes: <String, dynamic>{},
  trackingCallback: (experiment, experimentResult) {},
  remoteEval: true,
  cacheKeyAttributes: ["user_id", "environment"], // 可选：限制 API 调用
).initialize();

粘性分桶

粘性分桶确保用户即使在用户会话、登录状态或实验参数发生变化时，也能看到相同的实验变体。如果你的组织和实验支持粘性分桶，你需要实现 GBStickyBucketingService 的实例。

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中集成 GrowthBook SDK：

import 'dart:io';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:growthbook_sdk_flutter/growthbook_sdk_flutter.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      darkTheme: ThemeData.dark(),
      themeMode: ThemeMode.dark,
      home: const Home(),
    );
  }
}

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

  [@override](/user/override)
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> with SingleTickerProviderStateMixin {
  List<String> tabNames = [
    'All',
    'Travel',
    'Lifestyle',
    'Fitness',
    'Education',
    'Elections',
    'Original',
    'World',
    'Travel'
  ];
  late List<Tab> tabs;

  /// 初始化控制器
  late TabController _tabController;
  final userAttr = {"id": (!kIsWeb && Platform.isIOS) ? "foo" : "foo_bar"};
  GrowthBookSDK? gb;

  [@override](/user/override)
  void initState() {
    super.initState();
    _tabController = TabController(length: tabNames.length, vsync: this);
    tabs = tabNames.map((e) => Tab(text: e)).toList();
    initializeSDK();
  }

  void initializeSDK() async {
    gb = await GBSDKBuilderApp(
      apiKey: kReleaseMode ? '<PROD_KEY>' : '<DEV_KEY>',
      hostURL: 'https://example.growthbook.io/',
      attributes: userAttr,
      growthBookTrackingCallBack: (trackData) {},
      gbFeatures: {
        'some-feature': GBFeature(defaultValue: true),
      },
    ).initialize();
    setState(() {});
  }

  Widget _getRightWidget() {
    if (gb?.feature('some-feature').on! ?? false) {
      return TabBar(
        isScrollable: true,
        tabs: tabs,
        controller: _tabController,
        indicator: CircleTabIndicator(
          color: Theme.of(context).colorScheme.primary,
          radius: 4,
        ),
      );
    } else {
      return TabBar(
        isScrollable: true,
        tabs: tabs,
        controller: _tabController,
      );
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('GrowthBook SDK'),
      ),
      body: Column(
        children: [
          _getRightWidget(),
          Expanded(
            child: TabBarView(
              controller: _tabController,
              children: [
                for (var i = 0; i < tabNames.length; i++)
                  Center(
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Text(tabNames[i]),
                      ],
                    ),
                  ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

/// 创建圆形指示器
class CircleTabIndicator extends Decoration {
  final BoxPainter _painter;

  CircleTabIndicator({required Color color, required double radius})
      : _painter = _CirclePainter(color, radius);

  [@override](/user/override)
  BoxPainter createBoxPainter([VoidCallback? onChanged]) => _painter;
}

class _CirclePainter extends BoxPainter {
  final Paint _paint;
  final double radius;

  _CirclePainter(Color color, this.radius)
      : _paint = Paint()
          ..color = color
          ..isAntiAlias = false;

  [@override](/user/override)
  void paint(Canvas canvas, Offset offset, ImageConfiguration cfg) {
    final Offset circleOffset =
        offset + Offset(cfg.size!.width / 2, cfg.size!.height - radius);
    canvas.drawCircle(circleOffset, radius, _paint);
  }
}