Flutter产品引导插件flukki_product_tours的使用

Flutter产品引导插件flukki_product_tours的使用

介绍

Flukki 是一个无需代码的产品引导构建工具，专为 Flutter 应用设计。它允许你在应用内创建产品引导，而无需编写任何代码。通过 Flukki，你可以轻松地为用户提供交互式引导，帮助他们更好地理解和使用你的应用。

用户视角

用户在使用产品引导时的体验如下所示：

构建器

通过 Flukki 的构建器，你可以轻松创建和编辑产品引导：

用户示例

以下是用户创建的产品引导示例：

优势

• 无需编码：你可以在应用内创建产品引导，而无需编写任何代码。
• 统计分析：你可以测量跳过率或成功率等统计数据。
• 即时更新：你可以随时向用户推送新的或更新的产品引导，而无需重新发布应用。

工作原理

整个机制非常简单。你只需配置插件并开始使用构建器创建产品引导。构建器的输出会发送到 Flukki 的服务器并保存在那里。插件初始化时会获取最新的产品引导并显示给用户，确保用户始终看到最新版本的引导。

获取 API Key

1. 在 Flukki 官网 创建一个账户。
2. 点击左侧的绿色按钮，标题为 “API KEY”。
3. API Key 会自动复制到剪贴板。

配置

1. 添加 Flukki 到项目中

   在 pubspec.yaml 文件中添加以下依赖：

   dependencies:
     flukki_product_tours: ^2.0.4
   

2. 添加环境变量

   在运行 Flutter 应用时，添加以下环境变量以启用内存分配（这对于分析应用的 widget 树变化非常重要）：

   --dart-define=flutter.memory_allocations=true
   

3. 初始化插件

   在应用启动时初始化 Flukki 插件：

   await Flukki.instance.initialize(appName: 'Awesome app', key: 'your_api_key');
   

4. 登录用户

   你可以选择匿名登录或使用用户 ID 登录：

   await Flukki.instance.signInAnonymous();
   // 或者
   await Flukki.instance.signInUser(userID);
   

5. 包裹应用

   使用 FlukkiProductTour 包裹你的应用：

   return MaterialApp(
     home: FlukkiProductTour(
       child: Scaffold(
         appBar: AppBar(
           title: Text('Product tour creator demo'),
         ),
         body: Center(
           child: ElevatedButton(
             child: Text('Open builder'),
             onPressed: () => Flukki.instance.turnOnBuilder(),
           ),
         ),
       ),
     ),
   );
   

6. 启用构建器

   启用构建器的方法应仅限于超级管理员使用。你可以将其绑定到超级管理员面板中的按钮，或创建一个手势来启用构建器。普通用户不应能够运行此方法，因为任何人都可以修改产品引导。

   Flukki.instance.turnOnBuilder()
   

7. 登出用户

   当用户需要登出时，调用以下方法：

   await Flukki.instance.signOut();
   

限制

• Widget 树变化敏感：如果你对指向的 Widget 进行了包装（例如使用 Center 或其他 Widget），插件可能无法识别原始 Widget。
• Web 渲染器：在 Web 上，建议使用 CanvasKit 渲染器，因为 HTML 渲染器在处理覆盖层时可能会出现问题。
• 调试模式与发布模式：在调试模式下创建的产品引导在发布模式下可能无法正常工作，反之亦然。

完整示例 Demo

以下是一个完整的示例代码，展示了如何使用 flukki_product_tours 插件创建一个简单的 Flutter 应用，并启用产品引导构建器。

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

Future<void> printAsync() async {
  await Future.delayed(const Duration(milliseconds: 0))
      .then((value) => print('Hello world async'));
}

Future m2(Future f) async {
  await f;
}

Future m1(Future f) async {
  await m2(f);
}

Future<void> main() async {
  final future = m1(printAsync());
  print('First');
  await future;
  print('Second');
  print('Third');

  WidgetsFlutterBinding.ensureInitialized();

  // 初始化 Flukki 插件
  await Flukki.instance.initialize(appName: 'Awesome app', key: 'your_api_key');

  // 匿名登录
  await Flukki.instance.signInAnonymous();

  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FlukkiProductTour(
        child: Scaffold(
          appBar: AppBar(
            title: const Text('Product tour creator demo'),
          ),
          body: Center(
            child: ElevatedButton(
              child: const Text('Open builder'),
              onPressed: () => Flukki.instance.turnOnBuilder(), // 启用构建器
            ),
          ),
        ),
      ),
    );
  }
}