Flutter灯光秀控制插件flutter_cue_light_show_sdk的使用

Flutter灯光秀控制插件flutter_cue_light_show_sdk的使用

获取开始

iOS

安装

CUE SDK 使用 CocoaPods 和 Artifactory 来托管和分发。为了通过 Artifactory 进行身份验证，在您的本地文件系统中，找到或创建文件 ~/.netrc 并插入由 CUE 提供的凭据：

machine cueaudio.jfrog.io
login REPLACE_WITH_YOUR_USERNAME
password REPLACE_WITH_YOUR_PASSWORD
always-auth = true

安装 CocoaPods 和 CocoaPods Artifactory 插件：

brew install cocoapods
gem install cocoapods-art

如果尚未使用 CocoaPods，请参考 CocoaPods Getting Started Guide 获取更多信息。

一旦你的 iOS 项目有了 Podfile，你需要在 Podfile 中添加 “cocoapods-art” 插件。这将允许你访问 Artifactory 上的 CUE 框架。在 Podfile 的顶部添加以下行：

plugin 'cocoapods-art', :sources => [
  'cocoapods-local'
]

然后你还需要在 Podfile 的底部添加以下 post_install 脚本：

post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
    end
  end
end

接下来，导航到你的 ios 目录并在命令行中执行以下命令以获取 CUE 框架并安装 pod：

pod repo-art update cocoapods-local
pod install

配置

创建文件 ios/Runner/CUEConfig.plist 并将其添加到 Xcode 项目中。此文件包含可以自定义的应用程序参数，并包含 apiKey 和 primaryColor 等重要键。参考以下示例：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>primaryColor</key>
    <string>#FF0000</string>
    <key>apiKey</key>
    <string>REPLACE_WITH_YOUR_API_KEY</string>
    <key>hasExit</key>
    <true/>
    <key>hasExitOnHomescreen</key>
    <false/>
    <key>shouldShowNotificationOnboarding</key>
    <false/>
</dict>
</plist>

Android

对于 Android，您需要在 android/app/build.gradle 文件中定义 CUE SDK 的 apiKey 和 primary color，如下所示：

buildTypes {
    all {
        resValue "string", "cue_client_api_key", 'REPLACE_WITH_YOUR_API_KEY'
        resValue "color", "cue_primary_color", '#00AEFF'
    }
}

Flutter 示例

要从应用程序启动 CUE SDK，您可以调用 launchCue() 方法。以下是一个简单的示例：

import 'package:flutter/material.dart';
import 'package:flutter_cue_light_show_sdk/flutter_cue_light_show_sdk.dart';

void launchCueLightShow() {
  FlutterCueLightShowSdk.launchCue();
}

为了让 CUE SDK 在启动前获取主题，您可以尽早调用 fetchTheme() 方法。建议在应用启动后立即调用此方法。

import 'package:flutter/material.dart';
import 'package:flutter_cue_light_show_sdk/flutter_cue_light_show_sdk.dart';

void fetchCueLightShowTheme() {
    FlutterCueLightShowSdk.fetchTheme();
}

原生示例供参考

有关更多信息，请参阅 iOS 和 Android 的原生演示应用程序及其各自的 README：

• iOS 示例
• Android 示例

以下是一个完整的示例代码，展示了如何在 Flutter 应用程序中使用 flutter_cue_light_show_sdk 插件：

import 'package:flutter/material.dart';
import 'package:flutter_cue_light_show_sdk/flutter_cue_light_show_sdk.dart';

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('CUE Plugin'),
        ),
        body: Column(
          children: <Widget>[
            TextButton(
              child: const Text('Fetch Theme'),
              onPressed: () async {
                try {
                  await FlutterCueLightShowSdk.fetchTheme();
                } catch (e) {
                  print(e);
                }
              },
            ),
            TextButton(
              child: const Text('Launch CUE'),
              onPressed: () async {
                try {
                  await FlutterCueLightShowSdk.launchCue();
                } catch (e) {
                  print(e);
                }
              },
            ),
          ],
        ),
      ),
    );
  }
}