Flutter插件qioqioqr的使用指南

在本篇博客中，我们将探讨如何使用一个名为qioqioqr的未知功能插件。此插件似乎与实验功能管理和特性标记相关，并且可能用于动态调整应用中的功能。我们将通过一个完整的示例来展示其基本用法。

使用场景

假设我们正在开发一个新闻应用程序，其中包含多个类别（如旅行、生活方式、健身等）。我们希望通过qioqioqr插件实现以下功能：

1. 动态启用或禁用某些类别的显示。
2. 根据用户属性（如设备类型）调整实验规则。

安装插件

首先，在pubspec.yaml文件中添加qioqioqr依赖：

dependencies:
  qioqioqr: ^latest-version

然后运行flutter pub get以安装依赖。

初始化插件

在应用启动时初始化插件。我们需要提供API密钥和其他配置信息。

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:qioqioqr/qioqioqr.dart';

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

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

  @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
  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": Platform.isIOS ? "foo" : "foo_bar"};
  GrowthBookSDK? gb;

  @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: (exp, rst) {},
      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
  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]),
                      ],
                    ),
                  ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

//// To create dot shaped indicator.
class CircleTabIndicator extends Decoration {
  final BoxPainter _painter;

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

  @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
  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);
  }
}

关键代码解析

1. 初始化SDK

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

• apiKey: 提供GrowthBook的API密钥。
• hostURL: 指定GrowthBook服务器地址。
• attributes: 用户属性，用于动态调整实验规则。
• gbFeatures: 定义特性标志及其默认值。

2. 动态启用/禁用选项卡

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,
  );
}