Fully customizable Emoji picker, Gif picker and Sticker for your flutter social media and chat applications

Acknowledgment: Much thanks to Stefan Humm for emoji_picker_flutter.




If the package was useful or saved your time, please do not hesitate to buy me a cup of coffee! ;)
The more caffeine I get, the more useful projects I can make in the future.

Buy Me A Coffee

Key features

  • Access to Emoji, Gif and Sticker picker
  • Giphy gifs
  • Developer determined Stickers
  • Lightweight Package
  • Faster Loading
  • Null-safety
  • Material Design and Cupertino mode
  • Emojis that cannot be displayed are filtered out (Android Only)
  • Optional recently used tabs
  • Skin Tone Support for emojis
  • Completely customizable

Getting Started


Add Get to your pubspec.yaml file:

  flutter_social_keyboard: <version>

Import get in files that it will be used:

import 'package:flutter_social_keyboard/flutter_social_keyboard.dart';

Emoji setup

  • Do nothing

Gif setup

Package depends on GIPHY GIF

  • Sign up as giphy developer to optain API Key
  • Giphy API Key is required to use the gif picker in this package

Sticker setup

Package depends on your project asset for sticker images

  • Create an asset folder in your project directory (name must be asset)
  • Create a folder named stickers within the asset folder
  • Create sub-folders in the sticker containing an the sticker asset files

  • Folder names of the sub-folders in the sticker folders are considered as categories and tab names
  • Supported files include .png, .gif, .webp, .jpg and .jpeg,
  • Link all sticker folders in the pubspec.yaml file


  onEmojiSelected: (Category category, Emoji emoji) {
    // Do something when emoji is tapped (optional)
  onGifSelected: (GiphyGif gif) {
    // Do something when gif is tapped (optional)
  onStickerSelected: (Sticker sticker) {
    // Do something when sticker is tapped (optional)
  onBackspacePressed: () {
    // Do something when the user taps the backspace button (optional)
  keyboardConfig: KeyboardConfig(
    useEmoji: true, //Enable emoji picker
    useGif: true, //Enable gif picker
    useSticker: true, //Enable Sticker picker
    giphyAPIKey: "API KEY HERE", 
    gifTabs: ["Hey", "One", 'Haha', 'Sad', 'Love', 'Reaction'],
    gifHorizontalSpacing: 5,
    gifVerticalSpacing: 5,
    gifColumns: 3,
    gifLang: GiphyLanguage.english,
    stickerColumns: 5,
    stickerHorizontalSpacing: 5,
    stickerVerticalSpacing: 5,
    withSafeArea: true,
    emojiColumns: 9,
    emojiSizeMax: 32 * (Platform.isIOS ? 1.30 : 1.0),
    emojiVerticalSpacing: 0,
    emojiHorizontalSpacing: 0,
    gridPadding: EdgeInsets.zero,
    initCategory: Category.RECENT,
    bgColor: const 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,
    replaceRecentOnLimitExceed: true,
    tabIndicatorAnimDuration: kTabScrollDuration,
    categoryIcons: const CategoryIcons(),
    buttonMode: ButtonMode.CUPERTINO,
    showBackSpace: true,
    showSearchButton: true,

See the demo for more detailed sample project.


property description default
useEmoji Enable Emoji keyboard true
useGif Enable Gif keyboard true
useSticker Enable Sticker keyboard true
withSafeArea Apply SafeArea widget around keyboard true
showSearchButton Show search button on the bottom nav true
showBackSpace Show backspace button on the bottom nav 7
giphyAPIKey Your Giphy API Key. It is required when using gif. You can get one from https://developers.giphy.com/dashboard null
gifTabs Create tabs that would serve as categories for gifs from giphy 'Haha', 'Sad', 'Love', 'Reaction'
gifColumns Number of gifs per row 3
gifVerticalSpacing Vertical spacing between gifs 5
gifHorizontalSpacing Horizontal spacing between gifs 5
gifLang Language giphy suppose to use in search GiphyLanguage.english
stickerColumns Number of stickers per row 4
stickerVerticalSpacing Vertical spacing between stickers 5
stickerHorizontalSpacing Horizontal spacing between stickers 5
emojiColumns Number of emojis per row 7
emojiSizeMax Width and height the emoji will be maximal displayed 32.0
emojiVerticalSpacing Vertical spacing between emojis 0
emojiHorizontalSpacing Horizontal spacing between emojis 0
gridPadding The padding of GridView EdgeInsets.zero
initCategory The initial Category that will be selected for the emoji picker Category.RECENT
bgColor The background color of the Widget Color(0xFFF2F2F2)
indicatorColor The color of the category indicator Colors.blue
iconColor The color of the category icons Colors.grey
iconColorSelected The color of the category icon when selected Colors.blue
progressIndicatorColor The color of the loading indicator during initialization Colors.blue
backspaceColor The color of the backspace icon button Colors.blue
skinToneDialogBgColor The background color of the skin tone dialog Colors.white
skinToneIndicatorColor Color of the small triangle next to multiple skin tone emoji Colors.grey
enableSkinTones Enable feature to select a skin tone of certain emoji's true
showRecentsTab Show extra tab with recently used emoji, sticker or gif true
recentsLimit Limit of recently used emoji that will be saved 28
replaceEmojiOnLimitExceed Replace latest emoji on recents list on limit exceed false
noRecents A widget (usually Text) to be displayed if no recent emojis to display Text('No Recents', style: TextStyle(fontSize: 20, color: Colors.black26), textAlign: TextAlign.center)
loadingIndicator A widget to display while emoji picker is initializing SizedBox.shrink()
tabIndicatorAnimDuration Duration of tab indicator to animate to next category Duration(milliseconds: 300)
categoryIcons Determines the icon to display for each Category. You can change icons by setting them in the constructor. CategoryIcons()
buttonMode Choose between Material and Cupertino button style ButtonMode.MATERIAL
checkPlatformCompatibility Whether to filter out glyphs that platform cannot render with the default font (Android). true
emojiSet Custom emoji set, can be built based on defaultEmojiSet provided by the library. null
emojiTextStyle Text style to apply to individual emoji icons. Can be used to define custom emoji font either with GoogleFonts library or bundled with the app. null

Extended usage with EmojiPickerUtils

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

final recentStickers = await StickerPickerUtils().getRecentStickers();

final recentGifs = await GiphyGifPickerUtils().getRecentGiphyGif();

// Search for related emoticons, stickers and gifs based on keywords and names/titles
final filterEmojis = await EmojiPickerUtils().searchEmoji("face", defaultEmojiSet);

final filterStickers = await StickerPickerUtils().searchSticker("funny", context);

final filterGifs = await GiphyGifPickerUtils().searchGiphyGif("love", keyboardConfig);

/// Add an Emoji, Sticker and Gif 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

final addRecentSticker = await StickerPickerUtils().addStickerToRecentlyUsed(key: key, sticker: sticker, keyboardConfig: keyboardConfig); // Important: Needs same key instance of type GlobalKey<StickerPickerWidgetState> here and for the StickerPicker-Widget in order to work properly

final addRecentGif = await GiphyGifPickerUtils().addGiphyGifToRecentlyUsed(giphyGif: giphyGif, keyboardConfig: keyboardConfig);

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

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

Feature Requests and Issues

Please file feature requests and bugs at the issue tracker.

Buy Me A Coffee

Connect with me

Sam | Twitter Sam | LinkedIn Sam | Instagram

Visitors Count