Flutter卡片展示与管理插件moengage_cards的使用

Flutter卡片展示与管理插件moengage_cards的使用

MoEngage Cards 插件

MoEngage Cards 插件用于在 Flutter 应用程序中展示和管理卡片。

SDK安装

要将 MoEngage Cards SDK 添加到您的应用程序中，编辑应用程序的 pubspec.yaml 文件，并添加以下依赖项：

dependencies:
  moengage_cards: $latestSdkVersion

替换 $latestSdkVersion 为最新 SDK 版本。

Android安装

注意: 从 moengage_cards 插件版本 5.1.0 开始，插件将捆绑 cards-core 版本。应用开发者无需在 build.gradle 文件中添加 cards-core。

对于 moengage_cards 版本小于 5.1.0 的情况，在安装 Flutter 插件后，需要在 Android 项目中添加 MoEngage 的原生 Android SDK 依赖项。导航到 android --> app --> build.gradle 并在 dependencies 块中添加 MoEngage Android SDK 的依赖项：

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation("com.moengage:cards-core:$sdkVersion")
}

运行 flutter packages get 来安装 SDK。

使用方法

卡片初始化

import 'package:moengage_cards/moengage_cards.dart' as moe;

// 初始化 MoEngageCards
moe.MoEngageCards cards = moe.MoEngageCards("<MOE_APP_ID>");
cards.initialize();

设置卡片同步完成回调监听器

cards.setSyncCompleteListener((data) {
  debugPrint("Cards Sync Listener: $data");
});

当用户进入收件箱屏幕时调用此 API

cards.onCardsSectionLoaded((data) {
  debugPrint("Cards Inbox Open Sync Listener: $data");
});

当用户退出收件箱屏幕时调用此 API

cards.onCardsSectionUnLoaded();

通知 SDK 卡片已送达（用于分析目的）

cards.cardDelivered();

获取所有相关数据

cards.getCardsInfo().then((cardsData) {
  // 更新UI
});

请求 SDK 刷新卡片（用于模仿下拉刷新行为）

cards.refreshCards((data) {
  if (data?.hasUpdates == true) {
    // 重新获取卡片
    cards.getCardsInfo().then((cardsData) {
      // 更新UI
    });
  }
});

通知 SDK 卡片被点击（用于分析目的）

cards.cardClicked(card, widgetId);

通知 SDK 卡片已展示给用户（用于分析目的）

cards.cardShown(card);

获取指定类别的卡片

final category = "Promotions";
final cardsData = await cards.getCardsForCategory(category);

获取未点击的卡片数量

final unClickedCardsCount = await cards.getUnClickedCardsCount();

获取新卡片的数量

final newCardsCount = await cards.getNewCardsCount();

返回要显示的类别列表

final cardsCategories = await cards.getCardsCategories();

返回是否启用所有类别

final isAllCategoryEnabled = await cards.isAllCategoryEnabled();

删除指定卡片

cards.deleteCard(card);

删除多个卡片

final cards = [];
cards.deleteCards(cards);

获取卡片数据

cards.fetchCards().then((cardsData) {
  // 更新UI
});

更多关于Flutter卡片展示与管理插件moengage_cards的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter卡片展示与管理插件moengage_cards的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter应用中使用moengage_cards插件来展示和管理卡片的示例代码。这个示例将展示如何集成插件、加载卡片并处理卡片事件。

首先，确保你已经在pubspec.yaml文件中添加了moengage_cards依赖：

dependencies:
  flutter:
    sdk: flutter
  moengage_cards: ^最新版本号  # 请替换为实际可用的最新版本号

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

接下来，在你的Flutter应用中，你可以按照以下步骤使用moengage_cards插件：

  1. 初始化MoEngage和卡片插件：

在你的main.dart文件或适当的初始化位置，初始化MoEngage和卡片插件。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 初始化MoEngage
    MoEngage.initialize(
      apiKey: "你的MoEngage API Key",
      userId: "用户ID", // 可以是匿名ID或实际用户ID
      channel: "flutter",
      onInitComplete: () {
        print("MoEngage initialized");
        
        // 初始化卡片插件
        MoEngageCards.initialize(
          context: context,
          onCardAction: handleCardAction,
          onCardDismissed: handleCardDismissed,
          onError: handleError
        );

        // 加载卡片
        MoEngageCards.loadCards();
      },
      onError: (error) {
        print("MoEngage initialization error: $error");
      }
    );

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('MoEngage Cards Demo'),
        ),
        body: Center(
          child: Text('Check the bottom sheet for cards'),
        ),
        bottomSheet: MoEngageCardsWidget(),
      ),
    );
  }

  void handleCardAction(String actionId, Map<String, dynamic> actionData) {
    print("Card action triggered: $actionId with data: $actionData");
  }

  void handleCardDismissed(String cardId) {
    print("Card dismissed: $cardId");
  }

  void handleError(String errorMessage) {
    print("Error: $errorMessage");
  }
}
  1. 显示卡片：

使用MoEngageCardsWidget来在你的UI中显示卡片。在这个例子中，我们将卡片放在bottomSheet中。

  1. 处理卡片事件：

在上面的代码中，我们已经定义了处理卡片动作和卡片关闭的回调函数。handleCardAction将在用户与卡片交互时被调用，handleCardDismissed将在卡片被关闭时被调用。

  1. 加载卡片：

通过调用MoEngageCards.loadCards()方法来从MoEngage后端加载卡片。这个方法应该在适当的时机被调用，比如在用户完成某些操作后或应用启动时。

注意：在实际应用中，你需要替换"你的MoEngage API Key"和userId为实际的MoEngage API密钥和用户ID。

这个示例展示了基本的集成步骤，但你可以根据实际需求进一步自定义和扩展，比如根据用户行为动态加载卡片、处理更多类型的卡片动作等。

希望这个示例对你有所帮助！如果你有任何其他问题，请随时提问。

回到顶部