Flutter表情选择插件stipop_sdk的使用

发布于 1周前 作者 yibo5220 来自 Flutter

Flutter表情选择插件stipop_sdk的使用

Stipop SDK提供了超过150,000个PNG和GIF表情符号，可以轻松集成到移动应用聊天、评论区、直播、视频通话等功能中。通过这些深受全球数百万用户喜爱的表情符号，为您的移动应用增添乐趣。

开始使用

安装插件并遵循以下步骤。

Android集成

  1. 注册并登录Stipop控制台。
  2. 创建您的应用以获取API密钥。
  3. 下载‘Stipop.json’文件。
  4. 将Stipop.json文件移至项目的assets文件夹中（位置：‘android/app/src/main/assets’）。
  5. 更新gradle并添加依赖项。
// 在项目级别的build.gradle中
allprojects {
  repositories {
    maven { url 'https://jitpack.io' }
  }
}
// 在应用级别的build.gradle中
defaultConfig {
  ..
  multiDexEnabled true // 可能需要此选项
}
dependencies {
  implementation 'com.github.stipop-development:stipop-android-sdk:0.5.0' 
}
  1. 移动到'android/app/src/main/res/styles.xml'并将parent改为继承Theme.MaterialComponents，因为SDK的UI使用了MaterialComponents。如下所示：
<style name="LaunchTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <item name="android:windowBackground">@drawable/launch_background</item>
</style>

<style name="NormalTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <item name="android:windowBackground">?android:colorBackground</item>
</style>
  1. 移动到'android/app/src/main/{package}/MainActivity'并将其从FlutterActivity更改为FlutterFragmentActivity，因为SDK使用了AndroidX UI组件。
package com.stipop.stipop.stipop_plugin_example

import io.flutter.embedding.android.FlutterFragmentActivity

class MainActivity: FlutterFragmentActivity()

iOS集成

  1. 注册并登录Stipop控制台。
  2. 创建您的应用以获取API密钥。
  3. 下载‘Stipop.plist’文件。
  4. 打开Xcode中的iOS模块。
  5. 将‘Stipop.plist’文件拖放到’Runner’目录中并导入。

有关安装或自定义的更多信息，请参阅以下文档。

使用方法

实现表情发送（监听表情和表情包选择事件）

您可以在类似initState()的方法中调用此方法。

[@override](/user/override)
void initState() {
  super.initState();
  stipop = Stipop(
    'some_user_id',
    languageCode: 'en', 
    countryCode: 'US',
    onStickerPackSelected: (spPackage) {
      // 选择的表情包会在这里传递
      setState(() {
        
      });
    },
    onStickerSelected: (sticker) {
      // 选择的表情会在这里传递
      setState(() {
        
      });
    },
  );
}

显示搜索界面（表情搜索视图）

搜索界面是用户可以通过搜索标签（如happy, sad, what!等）查找可以发送的表情的地方。

stipop.showSearch();

显示键盘（表情选择器视图在键盘上）

表情选择器界面提供深入的表情体验。与搜索界面的即时使用不同，用户可以下载和拥有表情，从而获得更亲密的表情发送体验。

stipop.showKeyboard();

此方法会在当前显示时隐藏’表情选择器VIew’。

stipop.hideKeyboard();

联系我们

如果您需要我们的帮助，请通过电子邮件联系我们：tech-support@stipop.io。

示例代码

import 'package:flutter/material.dart';
import 'package:stipop_plugin_example/second.dart';
import 'package:stipop_sdk/stipop_plugin.dart';

void main() {
  runApp(const MaterialApp(home: MyApp()));
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late Stipop stipop;
  String callbackMsg = '';
  String? stickerImg;

  [@override](/user/override)
  void initState() {
    super.initState();
    stipop = Stipop(
      'some_user_id',
      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;
        });
      },
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: const Text('Stipop Plugin Example'),
            elevation: 1,
            actions: [
              PopupMenuButton(
                  itemBuilder: (context) => <PopupMenuEntry>[
                        PopupMenuItem(
                            child: Row(children: const [
                              Icon(Icons.add_to_home_screen,
                                  color: Colors.black54, size: 18),
                              SizedBox(width: 10),
                              Text('View at Second Screen'),
                            ]),
                            value: "screen"),
                      ],
                  onSelected: (value) async {
                    switch (value) {
                      case "screen":
                        Navigator.of(context).push(MaterialPageRoute(builder: (context) => const SecondScreen()));
                        break;
                    }
                  })
            ],
          ),
          body: SafeArea(
            child: Stack(
              children: [
                Padding(
                  child: Column(children: [
                    stickerImg != null
                        ? Padding(
                            padding: const EdgeInsets.fromLTRB(16, 16, 16, 16),
                            child: Image.network(
                              stickerImg!,
                              width: 150,
                              height: 150,
                            ))
                        : Container(),
                    Text(callbackMsg)
                  ]),
                  padding: const EdgeInsets.fromLTRB(0, 0, 0, 70),
                ),
                Align(
                  alignment: Alignment.bottomLeft,
                  child: Container(
                    padding: const EdgeInsets.symmetric(
                        vertical: 12, horizontal: 12),
                    height: 80,
                    width: double.infinity,
                    color: Colors.white,
                    child: Row(
                      children: [
                        GestureDetector(
                            onTap: () {
                              stipop.showKeyboard();
                            },
                            child: Align(
                              alignment: Alignment.centerRight,
                              child: Container(
                                  height: 40,
                                  width: 40,
                                  decoration: BoxDecoration(
                                      color: Colors.blue,
                                      borderRadius: BorderRadius.circular(40)),
                                  child: const Icon(
                                    Icons.keyboard,
                                    color: Colors.white,
                                  )),
                            )),
                        const SizedBox(width: 16),
                        GestureDetector(
                            onTap: () {
                              stipop.showSearch();
                            },
                            child: Align(
                              alignment: Alignment.centerRight,
                              child: Container(
                                  height: 40,
                                  width: 40,
                                  decoration: BoxDecoration(
                                      color: Colors.blue,
                                      borderRadius: BorderRadius.circular(40)),
                                  child: const Icon(
                                    Icons.search,
                                    color: Colors.white,
                                  )),
                            )),
                        const SizedBox(width: 16),
                        const Expanded(
                            child: TextField(
                          decoration: InputDecoration(
                              border: InputBorder.none,
                              hintText: "TextField Sample"),
                        )),
                        const SizedBox(width: 16),
                        GestureDetector(
                            onTap: () {
                              //
                            },
                            child: Align(
                              alignment: Alignment.centerRight,
                              child: Container(
                                  height: 40,
                                  width: 40,
                                  decoration: BoxDecoration(
                                      color: Colors.grey,
                                      borderRadius: BorderRadius.circular(40)),
                                  child: const Icon(
                                    Icons.send_rounded,
                                    color: Colors.white,
                                  )),
                            )),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          )),
    );
  }
}

更多关于Flutter表情选择插件stipop_sdk的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter表情选择插件stipop_sdk的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter项目中使用stipop_sdk插件来实现表情选择的示例代码。这个插件允许你在Flutter应用中集成表情选择功能。

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

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

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

接下来，在你的Flutter项目中，你需要进行以下步骤来初始化并使用stipop_sdk。

1. 初始化Stipop SDK

在你的主文件（通常是main.dart）中，初始化StipopSDK。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Stipop SDK Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
    // 初始化Stipop SDK
    StipopSDK.initialize(
      apiKey: '你的API_KEY', // 替换为你的实际API Key
      appId: '你的APP_ID',   // 替换为你的实际App ID
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Stipop SDK Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 打开表情选择界面
            _openStipopPicker();
          },
          child: Text('选择表情'),
        ),
      ),
    );
  }

  void _openStipopPicker() async {
    try {
      // 打开表情选择器
      final result = await StipopSDK.openPicker();
      if (result != null && result.isSelected) {
        // 处理选择的表情
        final selectedPackage = result.selectedPackage;
        print('Selected Package: ${selectedPackage.toJson()}');
      }
    } catch (e) {
      print('Error: $e');
    }
  }
}

2. 添加权限（如果需要）

根据你的应用需求，你可能需要在AndroidManifest.xml和Info.plist中添加必要的权限。stipop_sdk通常不需要特殊的权限，但如果你需要访问网络或存储，请确保已添加相应权限。

3. 运行应用

确保所有配置正确后，运行你的Flutter应用。点击按钮应该能够打开Stipop的表情选择器界面，并允许用户选择表情。选择的表情将通过回调返回给你的应用。

注意事项

  • 确保你已经在Stipop平台上注册并获取了API Key和App ID。
  • 根据你的需求，可能需要进一步自定义和扩展这个基础示例。
  • 检查stipop_sdk的官方文档以获取更多高级用法和配置选项。

这样，你就可以在Flutter应用中集成并使用stipop_sdk来实现表情选择功能了。

回到顶部