emoji_picker_flutter

一个 Flutter 包，提供了一个 Emoji 选择器小部件，包含 1500 多个 Emoji，分为 8 个类别

主要特点

  • 轻量级包
  • 加载更快
  • Null-safety（空安全）
  • 完全可定制
  • Material Design 和 Cupertino 模式
  • 无法显示的表情符号将被过滤掉（仅限 Android）
  • 可选的最近使用的表情符号标签

入门

EmojiPicker(
    onEmojiSelected: (category, emoji) {
        // Do something when emoji is tapped
    },
    onBackspacePressed: () {
        // Backspace-Button tapped logic
        // Remove this line to also remove the button in the UI
    },
    config: Config(
        columns: 7,
        emojiSizeMax: 32.0,
        verticalSpacing: 0,
        horizontalSpacing: 0,
        initCategory: Category.RECENT,
        bgColor: Color(0xFFF2F2F2),
        indicatorColor: Colors.blue,
        iconColor: Colors.grey,
        iconColorSelected: Colors.blue,
        progressIndicatorColor: Colors.blue,
        showRecentsTab: true,
        recentsLimit: 28,
        noRecentsText: "No Recents",
        noRecentsStyle:
            const TextStyle(fontSize: 20, color: Colors.black26),
        categoryIcons: const CategoryIcons(),
        buttonMode: ButtonMode.MATERIAL
    ),
)

请参阅 演示 以获取更详细的示例项目。

Config（配置）

属性 描述 默认值
列数 每行表情符号数量 7
emojiSizeMax 表情符号的最大显示宽度和高度 32.0
verticalSpacing 表情符号之间的垂直间距 ToastGravity.BOTTOM
horizontalSpacing 表情符号之间的水平间距 0
initCategory 将要选择的初始类别 Category.RECENT
bgColor Widget 的背景颜色 Color(0xFFF2F2F2)
indicatorColor 类别指示器的颜色 Colors.blue
iconColor 类别图标的颜色 Colors.grey
iconColorSelected 选中时类别图标的颜色 Colors.blue
progressIndicatorColor 初始化期间加载指示器的颜色 Colors.blue
backspaceColor 退格图标按钮的颜色 Colors.blue
showRecentsTab 显示带有最近使用表情符号的额外标签 真
recentsLimit 将要保存的最近使用表情符号的限制 28
noRecentsText 如果没有最近使用的表情符号可显示时显示的文本 "无最近使用"
noRecentsStyle [noRecentsText] 的文本样式 TextStyle(fontSize: 20, color: Colors.black26)
categoryIcons 确定每个类别的显示图标。您可以通过在构造函数中设置图标来更改它们。 CategoryIcons()
buttonMode 在 Material 和 Cupertino 按钮样式之间选择 ButtonMode.MATERIAL

退格按钮

您可以通过向 EmojiPicker 小部件添加回调方法 onBackspacePressed: () { } 来在最后一个类别列表中添加一个退格按钮。这将使用户无需显示键盘即可轻松删除已添加的表情符号。有关更多使用详细信息，请查看示例。

自定义视图

可以通过设置 customWidget 属性完全自定义外观。如果 Config 中的属性不够，您可以继承自 EmojiPickerBuilder（推荐但非必需），以进行进一步的调整。

class CustomView extends EmojiPickerBuilder {
    CustomView(Config config, EmojiViewState state) : super(config, state);

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

class _CustomViewState extends State<CustomView> {
    @override
    Widget build(BuildContext context) {
        // TODO: implement build
        // Access widget.config and widget.state
        return Container();
    }
}

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

GitHub

https://github.com/Fintasys/emoji_picker_flutter