将 Stipop Stickers 与 Stream Flutter 应用程序集成

今天我们将继续探索有关 Stream 聊天 SDK 的更多信息。

Stream 是最受欢迎的聊天 SDK 之一，具有实时聊天消息功能，功能非常丰富，通过整体应用内转换、参与度和最终用户的保留提供出色的聊天体验。它的 API 可以在单个聊天频道中支持多达 500 万个以上的并发连接，没有任何问题，并且很容易与 Kotlin、Swift、Flutter 等任何技术堆栈集成，仅举几例。

在这篇文章中，我们将把 Stream Chat SDK 集成到 Flutter 应用程序中，然后使用 Stipop贴纸来获得流畅的聊天体验🤞 好兴奋哦！！

先决条件

• 使用 Android Studio Flutter
• Android SDK（API 16 或更高版本）
• Xcode 和 iOS（10.0 或更高版本）
• Stream Flutter SDK
• Stipop Flutter SDK
• Java 8
• Android X
• Gradle 3.5.4 或更高版本

那么，让我们开始吧

获取流 API 密钥和秘密

我们需要一个 Stream API 密钥来为我们的 Android 项目启用 Stream SDK。登录到 Stream Dashboard 并创建一个免费帐户。您将能够在仪表板上看到 API 密钥，并在生产发布期间将其放在手边。

现在单击创建应用程序并根据您选择的满足您的应用程序要求的 Stream SDK 配置填写表格。

在此之后，您将能够在 Stream Dashboard 上看到 API Key 和 API Secret。请妥善保管它们以备后续步骤使用。

创建频道和用户

要测试聊天功能，我们需要一些用户/频道帐户。我们可以在工具栏中的Chat/Explorer/ 选项下的 Stream Dashboard 上创建用户。在用户选项下，单击创建新用户并传递身份、用户 ID，然后选择适当的角色。

完成后，我们现在将创建一个频道并绕过用户 ID 添加成员，以便该特定用户可以发送/接收消息。

让我们开始吧 -

集成 Stream Flutter SDK

由于我们必须同时集成 Stream 和 Stipop Flutter SDK，我们将从克隆 Stipop Flutter GIT 存储库开始，为什么？这样一个带有内置 Stipop SDK 的基本 Flutter 容器就可以进行集成了。

git clone 
https://github.com/stipop-development/stipop-flutter-sdk.git

假设 - 已经安装了带有 Android Studio 的 Flutter。现在stipop-flutter-sdk在 Android Studio 中打开。它将获取依赖项并自动同步项目。导航到该example/ pubspec.yaml文件并添加 Stream Flutter 依赖项。

dependencies:
 flutter:
   sdk: flutter
 stream_chat_flutter: ^3.1.1
stipop_sdk:
   path: ../

运行 flutter pub get 命令，以便获取 Stream 库并同步项目。现在我们准备好使用 Stream 类并构建聊天应用程序了。

现在很兴奋 让我们构建聊天应用程序🤟✨

👊 第 1 步： 使用 API 机密和用户 ID 作为输入参数，从jwt.io获取 JWT 身份验证令牌

👊 第 2 步：为 API 调用设置 Stream Chat 客户端，并使用第 1 步中的 API 密钥和 JWT 身份验证令牌。

import 'package:flutter/material.dart';
import 'package:stream_chat_flutter/stream_chat_flutter.dart';
final client = StreamChatClient(
 'YOUR_API_KEY',
 logLevel: Level.INFO,
);

await client.connectUser(
 User(id: 'user01'),
 'JWT_AUTH_TOKEN',
);

👊步骤3：修改MyApp组件以使用默认StreamChat容器并传递客户端对象和ChannelListPage作为主屏幕参数。

class MyApp extends StatelessWidget {
 const MyApp({
   Key? key,
   required this.client,
 }) : super(key: key);

 final StreamChatClient client;

 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     builder: (context, child) => StreamChat(
       client: client,
       child: child,
     ),
     home: const ChannelListPage(),
   );
 }
}

👊第4步：我们将ChannelBloc用作主体，并ChannelListView显示频道列表。此外，在点击频道时，它将打开StreamChannel特定频道的屏幕。

class ChannelListPage extends StatelessWidget {
const ChannelListPage({
   Key? key,
 }) : super(key: key);
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     body: ChannelsBloc(
       child: ChannelListView(
         filter: Filter.in_(
           'members',
           [StreamChat.of(context).currentUser!.id],
         ),
         sort: const [SortOption('last_message_at')],
         limit: 20,
         channelWidget: ChannelPage(),
         onChannelTap: (channel, widget) {
           Navigator.push(
             context,
             MaterialPageRoute(
               builder: (context) => StreamChannel(
                 channel: channel,
                 child: widget!,
               ),
             ),
           );
         },
       ),
     ),
   );
 }
}

👊步骤 5： 让我们构建ChannelPage具有内置 Stream 组件的布局：

ChannelHeader作为appBar.
MessageListView显示频道中交换的消息列表。
MessageInput布局以键入消息并包括附件按钮、Stipop 按钮、表情符号等。

class ChannelPage extends StatefulWidget {
 @override
 _ChannelPageState createState() => _ChannelPageState();
}

class _ChannelPageState extends State<ChannelPage> {
 Message? quotedMessage;

@override
Widget build(BuildContext context) {
 return Scaffold(
   appBar: const ChannelHeader(),
   body: Column(
     children: <Widget>[
       Expanded(
         child: MessageListView(
           // ...
           messageBuilder: _messageBuilder,
           onMessageSwiped: (message) {
             setState(() {
               quotedMessage = message;
             });
           },
         ),
       ),
       MessageInput(
         actions: [
           InkWell(
             child: Icon(
               Icons.emoji_emotions,
               size: 20.0,
               color: StreamChatTheme.of(context).colorTheme.accentPrimary,
             ),
             onTap: () {
               // integrate the stipop keyboard here
             },
           ),
         ],
         quotedMessage: quotedMessage,
disableAttachments: true,
         onQuotedMessageCleared: () {
           setState(() => quotedMessage = null);
         },
       ),
     ],
   ),
 );
}

在 iOS/Android 上运行应用程序
对于 iOS - 我们必须设置 pod 文件并安装组件。此外，启动 iOS 模拟器并使其保持运行以备将来部署。

pod install
open -a Simulator

测试时间 BRAVO 😎！！

将目标设置为 iOS 模拟器，然后在 Android Studio 中点击运行按钮 ( cmd + R )。

太棒了✌我们能够成功运行 Stream Flutter 聊天应用程序。我们可以发送一些在内部使用 Stream API 的消息来保存消息。现在我们将继续将 Stipop Flutter SDK 集成到我们的 Stream Chat 应用程序中。

获取 Stipop SDK 配置

我们将需要 API 密钥来将 Stipop SDK 集成到我们现有的 Stream Flutter 应用程序中。登录到 Stipop Dashboard，并创建一个免费帐户。成功登录后，创建一个应用程序名称，地区等

您现在将能够Stipop.json在 android 设置和Stipop.plistiOS 设置下看到 API 密钥并下载文件，如下所示。

您需要将Stipop.json文件放在example/android/app/src/main/assets/Stipop.json下以针对 Android 设备。同样，要针对 iOS 设备，请将 Stipop.plist 文件放在 example/ios/Runner/Stipop.plist 目录下。

最后，你们一直在等待什么🤩…

集成 Stipop Flutter SDK

由于我们已经克隆了 Stipop Github repo，所以 Stipop 类现在已经可以使用了。我们将继续在 Stream Chat 布局中集成 Stipop。

让我们导入stipop_plugin类，声明一个 Stipop 实例，并stickerImg包含所选贴纸的 URL。

import 'package:stipop_sdk/stipop_plugin.dart';
class _ChannelPageState extends State<ChannelPage> {
late Stipop stipop;
String callbackMsg = '';
String? stickerImg = null;

@override
void initState() {
 super.initState();
 stipop = Stipop(
   'a01',
   languageCode: 'en',
   countryCode: 'US',
   onStickerPackSelected: (spPackage) {
     setState(() {
       callbackMsg = 'onStickerPackSelected\n${spPackage.toJson()}';
       stickerImg = null;
     });
   },
   onStickerSelected: (sticker) {
     setState(() {
       callbackMsg = 'onStickerSelected\n${sticker.toJson()}';
       stickerImg = sticker.stickerImg;
     });
   },
 );
}

然后初始化stipop实例并覆盖onStickerSelected()andonStickerPackSelected()方法。我们将使用setState()将当前选择的贴纸 gif url 保存到stickerImg.

现在我们将添加 Stipop 按钮（笑脸😊），它将打开 Stipop 贴纸键盘以选择贴纸。将按钮作为图标放置在Messageinput.actions块内。

@override
Widget build(BuildContext context) {
 return Scaffold(
   appBar: const ChannelHeader(),
   body: Column(
     children: <Widget>[
       Expanded(
child: MessageListView(
           // ...
           messageBuilder: _messageBuilder,
           onMessageSwiped: (message) {
             setState(() {
               quotedMessage = message;
             });
           },
         ),
       ),
       MessageInput(
         actions: [
           InkWell(
             child: Icon(
               Icons.emoji_emotions,
               size: 20.0,
               color: StreamChatTheme.of(context).colorTheme.accentPrimary,
             ),
             onTap: () {
               print("showing stipop keyboard");
               stipop.showKeyboard();

              // stipop.showSearch();
             },
           ),
         ],
quotedMessage: quotedMessage,
         disableAttachments: true,
         onQuotedMessageCleared: () {
           setState(() => quotedMessage = null);
         },
       ),
     ],
   ),
 );
}

因此，在 Stipop 按钮的点击动作上，我们可以分别通过调用showKeyboard()或showSearch()方法打开贴纸键盘或贴纸搜索布局。

👉Please note that we are using state management to update the current sticker URL when a sticker is selected.

_messageBuilder小部件组件将为每个消息项创建布局。在这个方法中，我们获得了message每条文本消息将被一一呈现的实例。它将返回_messageContainer()呈现消息项布局的方法。

Widget _messageBuilder(
 BuildContext context,
 MessageDetails details,
 List<Message> messages,
 MessageWidget defaultMessageWidget,
) {
 final message = details.message;

 Message current_message = messages.first;

 if (message.text!.isNotEmpty) {
   return Padding(
     padding: const EdgeInsets.all(5),
     child: _messageContainer(message, current_message),
   );
 } else {
   return Container();
 }
}

在 中_messageContainer，我们显示messageText、authorNameText，并包含*_stickerImage*当用户从贴纸键盘选择任何 gif 时呈现 Stipop gif 的布局。

Widget _messageContainer(message, current_message) {
 final isCurrentUser =
     StreamChat.of(context).currentUser!.id == message.user!.id;

 final textAlign = isCurrentUser ? TextAlign.right : TextAlign.left;
final color = isCurrentUser ? Colors.blueGrey : Colors.blue;

 return Container(
     decoration: BoxDecoration(
       border: Border.all(
         color: color,
       ),
       borderRadius: const BorderRadius.all(
         Radius.circular(5),
       ),
     ),
     child: Column(
       children: <Widget>[
         ListTile(
           title: Text(
             message.text!,
             textAlign: textAlign,
           ),
           subtitle: Text(
             message.user!.name,
             textAlign: textAlign,
           ),
         ),
         _stickerImage(message, current_message),
       ],
     ));
}

正如我们从 中看到的_stickerImage，我们检查 是否stickerImg有一些值，然后将图像 Url 加载到_messageContainer.

Widget _stickerImage(message, last_message) {
 if (stickerImg != null && message == last_message) {
   return Image.network(
     stickerImg!,
     width: 100,
     height: 100,
   );
 } else {
   return Container();
 }
}

这就是我们必须做的所有编码。您只需要一杯咖啡或茶以及一些编码时间，这将为您带来魔力。

您现在可以运行该应用程序进行测试。您可以在 Inputbox 布局的左角看到 Stipop 按钮（笑脸😊）。单击它会打开 Stipop 贴纸键盘以选择贴纸。

瞧！👏🏻👏🏻 与往常一样，集成 Stipop SDK 总是很容易，因为它具有内置的贴纸键盘和贴纸搜索选项，使其成为任何聊天应用程序的绝佳补充。
如果大伙有什么好的学习方法或建议欢迎大家在评论中积极留言哈，希望大家能够共同学习、共同努力、共同进步。

小编在这里祝小伙伴们在未来的日子里都可以 升职加薪，当上总经理，出任CEO，迎娶白富美，走上人生巅峰！！

不论遇到什么困难，都不应该成为我们放弃的理由！

很多人在刚接触这个行业的时候或者是在遇到瓶颈期的时候，总会遇到一些问题，比如学了一段时间感觉没有方向感，不知道该从那里入手去学习，需要一份小编整理出来的学习资料的关注我主页或者点击文末卡片免费领取~

这里是关于我自己的Android 学习，面试文档，视频收集大整理，有兴趣的伙伴们可以看看~

如果你看到了这里，觉得文章写得不错就给个赞呗？如果你觉得那里值得改进的，请给我留言，一定会认真查询，修正不足，谢谢。