emoji_picker_flutter

另一个用于 Flutter 的 Emoji 选择器。

主要特点

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

入门

EmojiPicker(
    onEmojiSelected: (category, emoji) {
        // Do something when emoji is tapped
    },
    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
showRecentsTab 显示带有最近使用的表情符号的额外选项卡 真
recentsLimit 将保存的最近使用的表情符号的限制 28
noRecentsText 如果没有任何最近使用的表情符号可供显示，将显示的文本 "无最近使用"
noRecentsStyle [noRecentsText] 的文本样式 TextStyle(fontSize: 20, color: Colors.black26)
categoryIcons 确定每个类别的显示图标。您可以通过在构造函数中设置图标来更改图标。 CategoryIcons()
buttonMode 在 Material 和 Cupertino 按钮样式之间进行选择 ButtonMode.MATERIAL

自定义视图

可以通过设置 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