platform flutter build Star on Github License: BSD-2-Clause

emoji_picker_flutter

Yet another Emoji Picker for Flutter 🤩

Note: This package is based on emoji_picker which has been deprecated and not maintained anymore. Therefore I decided to create a modernized version of it and fixing existing issues.

Key features

  • Lightweight Package
  • Faster Loading
  • Null-safety
  • Completely customizable
  • Material Design and Cupertino mode
  • Emojis that cannot be displayed are filtered out (Android Only)
  • Optional recently used emoji tab
  • Skin Tone Support

Getting Started

EmojiPicker(
    onEmojiSelected: (category, emoji) {
        // Do something when emoji is tapped (optional)
    },
    onBackspacePressed: () {
        // Do something when the user taps the backspace button (optional)
    },
    textEditingController: textEditionController, // pass here the same [TextEditingController] that is connected to your input field, usually a [TextFormField]
    config: Config(
        columns: 7,
        emojiSizeMax: 32 * (Platform.isIOS ? 1.30 : 1.0), // Issue: https://github.com/flutter/flutter/issues/28894
        verticalSpacing: 0,
        horizontalSpacing: 0,
        gridPadding: EdgeInsets.zero,
        initCategory: Category.RECENT,
        bgColor: Color(0xFFF2F2F2),
        indicatorColor: Colors.blue,
        iconColor: Colors.grey,
        iconColorSelected: Colors.blue,
        progressIndicatorColor: Colors.blue,
        backspaceColor: Colors.blue,
        skinToneDialogBgColor: Colors.white,
        skinToneIndicatorColor: Colors.grey,
        enableSkinTones: true,
        showRecentsTab: true,
        recentsLimit: 28,
        noRecents: const Text(
          'No Recents',
          style: TextStyle(fontSize: 20, color: Colors.black26),
          textAlign: TextAlign.center,
        ),
        tabIndicatorAnimDuration: kTabScrollDuration,    
        categoryIcons: const CategoryIcons(),
        buttonMode: ButtonMode.MATERIAL,
    ),
)

See the demo for more detailed sample project.

Config

propertydescriptiondefault
columnsNumber of emojis per row7
emojiSizeMaxWidth and height the emoji will be maximal displayed32.0
verticalSpacingVertical spacing between emojis0
horizontalSpacingHorizontal spacing between emojis0
gridPaddingThe padding of GridViewEdgeInsets.zero
initCategoryThe initial Category that will be selectedCategory.RECENT
bgColorThe background color of the WidgetColor(0xFFF2F2F2)
indicatorColorThe color of the category indicatorColors.blue
iconColorThe color of the category iconsColors.grey
iconColorSelectedThe color of the category icon when selectedColors.blue
progressIndicatorColorThe color of the loading indicator during initializationColors.blue
backspaceColorThe color of the backspace icon buttonColors.blue
skinToneDialogBgColorThe background color of the skin tone dialogColors.white
skinToneIndicatorColorColor of the small triangle next to multiple skin tone emojiColors.grey
enableSkinTonesEnable feature to select a skin tone of certain emoji'strue
showRecentsTabShow extra tab with recently used emojitrue
recentsLimitLimit of recently used emoji that will be saved28
replaceEmojiOnLimitExceedReplace latest emoji on recents list on limit exceedfalse
noRecentsA widget (usually Text) to be displayed if no recent emojis to displayText('No Recents', style: TextStyle(fontSize: 20, color: Colors.black26), textAlign: TextAlign.center)
tabIndicatorAnimDurationDuration of tab indicator to animate to next categoryDuration(milliseconds: 300)
categoryIconsDetermines the icon to display for each Category. You can change icons by setting them in the constructor.CategoryIcons()
buttonModeChoose between Material and Cupertino button styleButtonMode.MATERIAL

Backspace-Button

You can add an Backspace-Button to the end category list by adding the callback method onBackspacePressed: () { } to the EmojiPicker-Widget. This will make it easier for your user to remove an added Emoji without showing the keyboard. Check out the example for more details about usage.

Custom view

The appearance is completely customizable by setting customWidget property. If properties in Config are not enough you can inherit from EmojiPickerBuilder (recommended but not necessary) to make further adjustments.

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),
)

Extended usage with EmojiPickerUtils

// Get recently used emoji
final recentEmojis = await EmojiPickerUtils().getRecentEmojis();

// Search for related emoticons based on keywords
final filterEmojiEntities = await EmojiPickerUtils().searchEmoji("face");

// Add an emoji to recently used list or increase its counter
final newRecentEmojis = await EmojiPickerUtils().addEmojiToRecentlyUsed(key: key, emoji: emoji);
// Important: Needs same key instance of type GlobalKey<EmojiPickerState> here and for the EmojiPicker-Widget in order to work properly

Feel free to contribute to this package!! 🙇‍♂️

Always happy if anyone wants to help to improve this package!

If you need any features

Please open an issue so that we can discuss your feature request 🙏


Libraries

emoji_picker_flutter