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.
- 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
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';- Do nothing
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
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
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.
| 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 |
// 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);
Always happy if anyone wants to help to improve this package!
Please file feature requests and bugs at the issue tracker.
