Flutter表情符号转换插件xen_emojify的使用

xen_emojify 是一个功能强大的 Flutter 包，旨在通过提供类似 Facebook 的表情反应功能来增强用户体验。利用 Lottie（一个动态动画库）的力量，该包提供了流畅且视觉效果出色的动画，确保了愉悦的用户体验。

借助 xen_emojify，你可以轻松地将可自定义的表情反应小部件集成到你的 Flutter 应用程序中，为用户提供诸如点赞、喜爱、大笑等丰富的表达方式。此小部件高度可定制，允许你调整其大小、颜色方案和动画速度以适应应用的设计和品牌。

无论你是在开发社交媒体平台、内容共享应用还是其他需要用户反馈的应用程序，xen_emojify 都能提供一种无缝实现表情反应功能的解决方案。通过 xen_emojify 来提升你的用户参与度，并为你的应用程序增添个性。

特性

• 显示点赞、喜爱、大笑等表情图标。
• 可自定义大小、颜色和动画速度。
• 支持 onTap 回调以处理用户交互。

免费的 Lottie 动画

• Noto 动画表情
• IconScout

开始使用

在你的 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  xen_emojify: current_version

导入 xen_emojify 包

import 'package:xen_emojify/xen_emojify.dart';

示例代码

示例代码文件

// BSD License. Copyright © Kiran Paudel. All rights reserved

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

void main() => runApp(const MyApp());

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'XenEmojify Example',
      home: XenEmojifyExample(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const Text('react', style: TextStyle(fontWeight: FontWeight.bold));
  }
}

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

  [@override](/user/override)
  State<XenEmojifyExample> createState() => _XenEmojifyExampleState();
}

class _XenEmojifyExampleState extends State<XenEmojifyExample> {
  XenEmoji initialEmoji = const XenEmoji(
    'https://fonts.gstatic.com/s/e/notoemoji/latest/1f60d/lottie.json',
    label: 'heart eyes',
    lottieID: '1f60d',
  );

  [@override](/user/override)
  Widget build(BuildContext context) {
    final lotties = [
      const XenEmoji(
        'https://fonts.gstatic.com/s/e/notoemoji/latest/1f60d/lottie.json',
        label: 'Heart Eyes',
        lottieID: '1f60d',
      ),
      const XenEmoji(
        'https://fonts.gstatic.com/s/e/notoemoji/latest/1f525/lottie.json',
        label: 'Fire',
        lottieID: '1f525',
      ),
      const XenEmoji(
        'https://fonts.gstatic.com/s/e/notoemoji/latest/1f4a9/lottie.json',
        label: 'Poop',
        lottieID: '1f4a9',
      ),
      const XenEmoji(
        'https://fonts.gstatic.com/s/e/notoemoji/latest/1f984/lottie.json',
        label: 'Unicorn',
        lottieID: '1f984',
      ),
      const XenEmoji(
        'https://fonts.gstatic.com/s/e/notoemoji/latest/1faa9/lottie.json',
        label: 'Mirror Ball',
        lottieID: '1faa9',
      ),
      const XenEmoji(
        'https://fonts.gstatic.com/s/e/notoemoji/latest/1f603/lottie.json',
        label: 'Smile',
        lottieID: '1f603',
      ),
      const XenEmoji(
        'https://fonts.gstatic.com/s/e/notoemoji/latest/26a1/lottie.json',
        label: 'Zap',
        lottieID: '26a1',
      ),
      const XenEmoji(
        'https://fonts.gstatic.com/s/e/notoemoji/latest/1f47d/lottie.json',
        label: 'Alien',
        lottieID: '1f47d',
      ),
      const XenEmoji(
        'https://fonts.gstatic.com/s/e/notoemoji/latest/1f92e/lottie.json',
        label: 'Vomit',
        lottieID: '1f92e',
      ),
    ];

    return Scaffold(
      body: Center(
        child: ListView(
          children: [
            for (final (i, lottie) in lotties.indexed)
              Align(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const SizedBox(height: 30),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Container(
                        width: 300,
                        height: 300,
                        decoration: const BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(10)),
                          image: DecorationImage(
                            fit: BoxFit.cover,
                            image: NetworkImage(
                              'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSc4bnfG3zNmNB6Dk4C3vge8FxKkdFH64E96jiW8FKdS_04gDdF',
                            ),
                          ),
                        ),
                      ),
                    ),
                    Wrap(
                      crossAxisAlignment: WrapCrossAlignment.center,
                      spacing: 5,
                      children: [
                        DecoratedBox(
                          decoration: BoxDecoration(
                            color: Colors.grey,
                            border: Border.all(color: Colors.grey),
                            borderRadius: BorderRadius.circular(20),
                          ),
                          child: XenEmojify(
                            lottieSource: LottieSources.network,
                            showLabel: false,
                            xenEmojifyDock: XenEmojifyDock(
                              dockColor: Colors.cyan.withOpacity(0.7),
                              onEmojiSelect: (emoji) {
                                setState(() => initialEmoji = emoji);
                              },
                              xenEmojis: lotties,
                            ),
                            initialEmoji: i == 0 ? null : lottie,
                          ),
                        ),
                        const Padding(
                          padding: EdgeInsets.all(8.0),
                          child: Wrap(
                            children: [
                              Icon(Icons.comment),
                              SizedBox(width: 5),
                              Text('Comment'),
                            ],
                          ),
                        ),
                        const Padding(
                          padding: EdgeInsets.all(8.0),
                          child: Wrap(
                            children: [
                              Icon(Icons.share_rounded),
                              SizedBox(width: 5),
                              Text('Share'),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
          ],
        ),
      ),
    );
  }
}