Flutter集成CMP SDK插件cmp_sdk_v3的使用

cmp_sdk_v3

一个用于在Flutter应用中集成和管理同意管理平台（CMP）功能的插件。cmp_sdk 提供了一种简单且高效的方式来处理用户数据收集和使用的同意问题，以符合GDPR等隐私法规。

特性

• 使用自定义配置初始化CMP。
• 以可配置的展示样式打开同意层UI。
• 检查和管理用户对供应商和用途的同意状态。
• 导入/导出CMP配置字符串。
• 完整支持自定义回调和同意状态检查。

安装

要使用 cmp_sdk_v3 插件，请将其添加到您的 pubspec.yaml 文件中：

dependencies:
  cmp_sdk_v3: ^3.0.0

然后运行以下命令来安装插件：

flutter pub get

快速开始

以下是如何创建一个带有基本配置的 CMPSdk 实例的示例：

import 'package:cmp_sdk_v3/cmp_sdk_v3.dart';
import 'package:cmp_sdk_v3/cmp_config.dart';

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

  // 初始化CMP SDK并使用基本配置
  final cmpSdk = CMPSdk.createInstance(
    id: "your_cmp_id",         // CMP ID
    domain: "your_cmp_domain", // CMP 域名
    appName: "your_app_name",  // 应用名称
    language: "your_preferred_language", // 用户语言
  );
}

示例用法

以下是一个完整的示例，展示了如何在应用程序中配置同意层并处理用户同意：

import 'package:flutter/material.dart';
import 'package:cmp_sdk_v3/cmp_sdk_v3.dart';
import 'package:cmp_sdk_v3/cmp_config.dart';
import 'package:cmp_sdk_v3/cmp_ui_config.dart';

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

class _MyAppState extends State<MyApp> {
  late CMPSdk cmpSdk;

  [@override](/user/override)
  void initState() {
    super.initState();
    initCMPSdk();
  }

  Future<void> initCMPSdk() async {
    // 创建CMP SDK实例并设置自定义配置
    final cmpConfig = CMPConfig(
      id: "your_cmp_id",                   // CMP ID
      domain: "your_cmp_domain",           // CMP 域名
      appName: "your_app_name",            // 应用名称
      language: "your_preferred_language", // 用户语言
      screenConfig: ScreenConfig.halfScreenBottom, // 设置同意层位置
      iosPresentationStyle: IosPresentationStyle.popover, // iOS 展示样式
      androidPresentationStyle: AndroidPresentationStyle.dialog, // Android 展示样式
      isDebugMode: true,                   // 启用调试模式
    );
    cmpSdk = CMPSdk.createInstanceWithConfig(cmpConfig);

    // 初始化CMP SDK并进行必要的设置
    await cmpSdk.initialize();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('CMP SDK 示例'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              // 打开同意层以供用户给予同意
              await cmpSdk.openConsentLayer();
            },
            child: Text('打开同意层'),
          ),
        ),
      ),
    );
  }
}

说明

1. 初始化SDK：通过 CMPConfig 配置CMP SDK，并使用 CMPSdk.createInstanceWithConfig() 创建实例。
2. 打开同意层：调用 cmpSdk.openConsentLayer() 方法以弹出同意层，让用户选择同意或拒绝。
3. 调试模式：设置 isDebugMode: true 可以帮助调试CMP SDK的行为。

更多文档

对于更详细的文档和高级用法，包括高级配置、同意层定制和处理用户同意，请参考官方文档：

Flutter Integration Guide

此指南提供了逐步指导、最佳实践和额外资源，帮助您有效地实现和管理CMP功能。

支持

如需支持或有其他问题，请联系插件维护人员或在插件的GitHub仓库中提交问题。

示例代码说明

以下是完整的示例代码，展示如何在Flutter中使用CMP SDK：

// main.dart
import 'package:cmp_sdk_example/widgets/consent_layer_ui_config_card.dart';
import 'package:cmp_sdk_v3/consent_layer_ui_config.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'viewmodels/cmp_view_model.dart';
import 'views/config_section.dart';
import 'views/action_buttons.dart';
import 'views/status_section.dart';
import 'views/logs_section.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => CMPViewModel()),
      ],
      child: const MaterialApp(
        home: HomeScreen(),
      ),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  [@override](/user/override)
  HomeScreenState createState() => HomeScreenState();
}

class HomeScreenState extends State<HomeScreen> {
  [@override](/user/override)
  void initState() {
    super.initState();
    // 在组件初始化后调用初始化方法
    WidgetsBinding.instance.addPostFrameCallback((_) {
      Provider.of<CMPViewModel>(context, listen: false).initCMP();
    });
  }

  // 显示配置卡片的模态框
  void _showConfigModal(BuildContext context) {
    final viewModel = Provider.of<CMPViewModel>(context, listen: false);

    showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      builder: (context) {
        return Padding(
          padding: EdgeInsets.only(
            bottom: MediaQuery.of(context).viewInsets.bottom,
          ),
          child: FractionallySizedBox(
            heightFactor: 0.7, // 调整模态框高度
            child: ConsentLayerUIConfigCard(
              onConfigChanged: (ConsentLayerUIConfig config) {
                setState(() {});
              },
              onSubmit: (ConsentLayerUIConfig config) {
                viewModel.setWebViewConfig(config);
                Navigator.of(context).pop(); // 关闭模态框
              },
            ),
          ),
        );
      },
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    Provider.of<CMPViewModel>(context);
    return Scaffold(
      appBar: AppBar(
        title: const Text('CMP SDK V3 应用'),
      ),
      body: const SingleChildScrollView(
        padding: EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            ConfigSection(),
            SizedBox(height: 24.0),
            ActionButtons(),
            SizedBox(height: 24.0),
            StatusSection(),
            SizedBox(height: 24.0),
            LogsSection(),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => _showConfigModal(context), // 显示设置模态框
        child: const Icon(Icons.settings), // 设置按钮图标
      ),
    );
  }
}