flutter_social_keyboard

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.

Preview

Support

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.

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

Installation

Add Get to your pubspec.yaml file:

dependencies:
  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

Usage

FlutterSocialKeyboard(
  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.

KeyboardConfig

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.