Flutter实时通信插件livecom_ios的使用

简介

livecom_ios 是 livecom 插件的 iOS 实现部分。它允许开发者在 Flutter 应用中集成实时通信功能。

使用步骤

以下是一个完整的示例，展示如何在 Flutter 中使用 livecom_ios 插件。

1. 添加依赖

在 pubspec.yaml 文件中添加 livecom_ios 和 livecom_platform_interface 依赖：

dependencies:
  livecom_ios: ^版本号
  livecom_platform_interface: ^版本号

运行 flutter pub get 安装依赖。

2. 配置插件

在应用启动时配置 livecom_ios 插件，并设置必要的参数。

示例代码

import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:livecom_ios/livecom_ios.dart';
import 'package:livecom_platform_interface/livecom_delegate.dart';

final _liveComPlugin = LiveComIOS.shared;

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

class MyApp extends StatelessWidget with LiveComDelegate {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 配置插件参数
    _liveComPlugin.configure(
        "f400270e-92bf-4df1-966c-9f33301095b3", // API Key
        "0091FF", // 主色调
        "#EF5DA8", // 辅助色
        "#0091FF", // 按钮背景色
        "#00D1FF", // 文本颜色
        "https://website.com/{video_id}", // 视频页面 URL
        "https://website.com/{video_id}?p={product_id}" // 商品页面 URL
    );

    // 设置回调委托
    _liveComPlugin.delegate = this;

    return MaterialApp(
      title: 'LiveCom Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter screen'),
    );
  }

  // 回调方法
  [@override](/user/override)
  void onCartChange(List<String> productSKUs) {
    log("[LiveCom] onCartChange productSKUs: ${productSKUs.join(", ")}");
  }

  [@override](/user/override)
  void onProductAdd(String sku, String streamId) {
    log("[LiveCom] onProductAdd sku: $sku stream_id: $streamId");
  }

  [@override](/user/override)
  void onProductDelete(String productSKU) {
    log("[LiveCom] onProductDelete sku: $productSKU");
  }

  [@override](/user/override)
  void onRequestOpenCheckoutScreen(List<String> productSKUs) {
    log("[LiveCom] onRequestOpenCheckoutScreen productSKUs: ${productSKUs.join(", ")}");
  }

  [@override](/user/override)
  void onRequestOpenProductScreen(String sku, String streamId) {
    log("[LiveCom] onRequestOpenProductScreen sku: $sku stream_id: $streamId");
  }
}

3. 展示视频列表和单个视频

通过按钮触发展示视频列表或单个视频的功能。

示例代码

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String streamId = "qQMqXx2wy";
  final TextEditingController _textFieldController =
      TextEditingController(text: "qQMqXx2wy");

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Plugin example app'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 显示视频列表
            TextButton(
              onPressed: () {
                _liveComPlugin.presentStreams();
              },
              child: const Text("Show video list"),
            ),

            // 显示单个视频
            TextButton(
              onPressed: () => showDialog(
                context: context,
                builder: (BuildContext context) => AlertDialog(
                  title: const Text('Enter stream id'),
                  content: TextField(
                    onChanged: (value) {
                      streamId = value;
                    },
                    controller: _textFieldController,
                    decoration: const InputDecoration(hintText: "stream id"),
                  ),
                  actions: [
                    TextButton(
                      onPressed: () => Navigator.pop(context, 'Cancel'),
                      child: const Text('Cancel'),
                    ),
                    TextButton(
                      onPressed: () {
                        Navigator.pop(context, 'OK');
                        _liveComPlugin.presentStream(streamId);
                      },
                      child: const Text('OK'),
                    ),
                  ],
                ),
              ),
              child: const Text("Show video"),
            ),

            // 同时显示视频列表和单个视频
            TextButton(
              onPressed: () {
                _liveComPlugin.presentStreams();
                _liveComPlugin.presentStream(streamId);
              },
              child: const Text("Show list and video"),
            ),
          ],
        ),
      ),
    );
  }
}