flutter_social_keyboard

Description:

flutter social keyboard

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>
copied to clipboard
Import get in files that it will be used:
import 'package:flutter_social_keyboard/flutter_social_keyboard.dart';
copied to clipboard

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

copied to clipboard
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);


copied to clipboard
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.

Connect with me #




Visitors Count #