Flutter表情选择器插件emoji_picker_flutter的使用

插件介绍

emoji_picker_flutter 是一个用于Flutter项目的表情选择器插件，具有以下特点：

• 轻量级包：资源占用少。
• 快速加载：启动和切换表情类别时响应迅速。
• 空安全（Null-safety）：支持Flutter的空安全特性。
• 完全可定制：可以自定义表情视图、皮肤色调配置等。
• Material Design 和 Cupertino 模式：兼容两种设计风格。
• 过滤无法显示的表情（仅限Android）：确保所有表情都能正确显示。
• 最近使用表情选项：提供最近使用表情的标签页。
• 肤色支持：部分表情可以选择不同的肤色。
• 自定义字体支持：允许使用自定义字体来显示表情。
• 搜索功能：内置表情搜索功能。
• 多语言支持：支持8种语言。

快速开始

安装

在 pubspec.yaml 文件中添加依赖：

dependencies:
  emoji_picker_flutter: ^latest_version

示例代码

下面是一个完整的示例代码，展示了如何在Flutter项目中集成并使用 emoji_picker_flutter 插件：

import 'package:emoji_picker_flutter/emoji_picker_flutter.dart';
import 'package:flutter/foundation.dart' as foundation;
import 'package:flutter/material.dart';

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

/// Example for EmojiPicker
class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  final _controller = TextEditingController();
  final _scrollController = ScrollController();
  bool _emojiShowing = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          title: const Text('Emoji Picker Example App'),
        ),
        body: SafeArea(
          child: Column(
            children: [
              Expanded(
                child: Center(
                  child: ValueListenableBuilder(
                    valueListenable: _controller,
                    builder: (context, text, child) {
                      return Text(
                        _controller.text,
                      );
                    },
                  ),
                ),
              ),
              Container(
                  height: 66.0,
                  color: Colors.blue,
                  child: Row(
                    children: [
                      Material(
                        color: Colors.transparent,
                        child: IconButton(
                          onPressed: () {
                            setState(() {
                              _emojiShowing = !_emojiShowing;
                            });
                          },
                          icon: const Icon(
                            Icons.emoji_emotions,
                            color: Colors.white,
                          ),
                        ),
                      ),
                      Expanded(
                        child: Padding(
                          padding: const EdgeInsets.symmetric(vertical: 8.0),
                          child: TextField(
                              controller: _controller,
                              scrollController: _scrollController,
                              style: const TextStyle(
                                fontSize: 20.0,
                                color: Colors.black87,
                              ),
                              maxLines: 1,
                              decoration: InputDecoration(
                                hintText: 'Type a message',
                                filled: true,
                                fillColor: Colors.white,
                                contentPadding: const EdgeInsets.only(
                                  left: 16.0,
                                  bottom: 8.0,
                                  top: 8.0,
                                  right: 16.0,
                                ),
                                border: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(50.0),
                                ),
                              )),
                        ),
                      ),
                      Material(
                        color: Colors.transparent,
                        child: IconButton(
                            onPressed: () {
                              // send message
                            },
                            icon: const Icon(
                              Icons.send,
                              color: Colors.white,
                            )),
                      )
                    ],
                  )),
              Offstage(
                offstage: !_emojiShowing,
                child: EmojiPicker(
                  textEditingController: _controller,
                  scrollController: _scrollController,
                  config: Config(
                    height: 256,
                    checkPlatformCompatibility: true,
                    viewOrderConfig: const ViewOrderConfig(),
                    emojiViewConfig: EmojiViewConfig(
                      // Issue: https://github.com/flutter/flutter/issues/28894
                      emojiSizeMax: 28 *
                          (foundation.defaultTargetPlatform ==
                                  TargetPlatform.iOS
                              ? 1.2
                              : 1.0),
                    ),
                    skinToneConfig: const SkinToneConfig(),
                    categoryViewConfig: const CategoryViewConfig(),
                    bottomActionBarConfig: const BottomActionBarConfig(),
                    searchViewConfig: const SearchViewConfig(),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

关键参数说明

• onEmojiSelected: 当用户选择表情时触发的回调函数。
• onBackspacePressed: 当用户点击退格按钮时触发的回调函数。
• textEditingController: 连接到输入框的 TextEditingController 实例。
• config: 表情选择器的配置项，包括高度、背景颜色、平台兼容性检查等。

配置项详解

扩展使用

使用 EmojiPickerUtils

EmojiPickerUtils 提供了一些扩展功能，例如获取最近使用的表情、根据关键词搜索表情、设置表情样式等。具体用法如下：

// 获取最近使用的表情
final recentEmojis = await EmojiPickerUtils().getRecentEmojis();

// 根据关键词搜索相关表情
final filterEmojiEntities = await EmojiPickerUtils().searchEmoji("face", defaultEmojiSet);

// 将表情添加到最近使用列表或增加其计数
final newRecentEmojis = await EmojiPickerUtils().addEmojiToRecentlyUsed(key: key, emoji: emoji);

// 设置表情样式
final textSpans = EmojiPickerUtils().setEmojiTextStyle('text', emojiStyle: style);

// 清除最近使用表情列表
EmojiPickerUtils().clearRecentEmojis(key: key);

多语言支持

emoji_picker_flutter 支持多种语言，默认支持的语言有：en、de、es、fr、hi、it、ja、pt、ru、zh。你可以通过设置 locale 参数来选择语言：

Config(
  locale: const Locale("ja"),
)

如果你需要支持更多语言，可以通过创建新的表情集文件并翻译内容来实现。

自定义视图

如果你想进一步自定义表情选择器的外观，可以通过继承 EmojiPickerView 或设置 customWidget 来实现。

class CustomView extends EmojiPickerView {
  CustomView(Config config, EmojiViewState state, VoidCallback showSearchBar,
      {super.key})
      : super(
          config,
          state,
          showSearchBar,
        );

  @override
  _CustomViewState createState() => _CustomViewState();
}

class _CustomViewState extends State<CustomView> {
  @override
  Widget build(BuildContext context) {
    // 自定义构建逻辑
    return Container();
  }
}

EmojiPicker(
  onEmojiSelected: (category, emoji) {/* ...*/},
  config: Config(/* ...*/),
  customWidget: (config, state, showSearchView) => CustomView(
    config,
    state,
    showSearchView,
  ),
)

贡献与反馈

欢迎贡献代码或提出改进建议！如果有任何问题或需求，请在GitHub上提交Issue。

以上就是关于 emoji_picker_flutter 插件的详细介绍和使用方法，希望对你有所帮助！