emoji_picker_flutter

repository·master·Indexed 41 days ago

https://github.com/fintasys/emoji_picker_flutter

A lightweight, highly customizable emoji picker for Flutter applications. It supports Material and Cupertino modes, skin tone selection, search functionality, and localization for multiple languages. The package provides the EmojiPicker widget and a comprehensive Config object to customize the emoji view, category tabs, bottom action bar, and search interface.

Tokens: 10.5K
Snippets: 31
Records: 41
Agent score: 52%

What's inside emoji_picker_flutter

Implement the EmojiPicker widget

master

To integrate the emoji picker into your Flutter application, use the EmojiPicker widget. You must provide a textEditingController that is the same instance used by your input field (e.g., a TextFormField) to ensure emojis are correctly inserted into the text.

Key parameters:

onEmojiSelected: Callback triggered when an emoji is tapped. Receives the Category and the Emoji object.
onBackspacePressed: Callback triggered when the backspace button is tapped. Set to null to hide the backspace button.
textEditingController: The controller connected to your text input.
controller: (Optional) An EmojiPickerController to programmatically control category tabs.
config: A Config object used to customize the appearance and behavior of the picker.

import 'package:flutter/foundation.dart' as foundation;

EmojiPicker(
    onEmojiSelected: (Category category, Emoji emoji) {
        // Do something when emoji is tapped (optional)
    },
    onBackspacePressed: () {
        // Do something when the user taps the backspace button (optional)
        // Set it to null to hide the Backspace-Button
    },
    textEditingController: textEditingController, // pass here the same [TextEditingController] that is connected to your input field, usually a [TextFormField]
    controller: emojiPickerController, // (Optional) Allows you to control and maintain state of category tabs
    config: Config(
        height: 256, // Set `null` to unconstrain emoji picker
        bgColor: const Color(0xFFF2F2F2),
        checkPlatformCompatibility: true,
        emojiViewConfig: EmojiViewConfig(
        // Issue: https://github.com/flutter/flutter/issues/28894
        emojiSizeMax: 28 * 
        (foundation.defaultTargetPlatform == TargetPlatform.iOS
            ?  1.20
            :  1.0),
        ),
        viewOrderConfig: const ViewOrderConfig(
            top: EmojiPickerItem.categoryBar,
            middle: EmojiPickerItem.emojiView,
            bottom: EmojiPickerItem.searchBar,
        ),
        skinToneConfig: const SkinToneConfig(),
        categoryViewConfig: const CategoryViewConfig(),
        bottomActionBarConfig: const BottomActionBarConfig(),
        searchViewConfig: const SearchViewConfig(),
    ),
)

Localize the Emoji Picker

master

The package supports en, de, es, fr, hi, it, ja, pt, ru, and zh.

To use a specific language, pass the Locale to the Config. To support custom languages, you must provide a custom emojiSet via a function that returns List<CategoryEmoji> based on the provided Locale.

// Using a built-in locale
Config(
    locale: const Locale("ja"),
)

// Using a custom emoji set for localization
EmojiPicker(
    config: Config(
         emojiSet: _getEmojiLocale,
    ),
)

List<CategoryEmoji> _getEmojiLocale(Locale locale) {
  switch (locale.languageCode) {
    case "ja":
      return emojiSetJapanese;
    case "de":
      return emojiSetGerman;
    default:
      return emojiSetEnglish;
  }
}

Customize the Backspace Button position
master
The backspace button is enabled by default in the BottomActionBarConfig. To move it to the category tab bar instead, configure CategoryViewConfig with extraTab: CategoryExtraTab.BACKSPACE.
You can handle tap events using the onBackspacePressed callback in the EmojiPicker constructor.
https://github.com/fintasys/emoji_picker_flutter/blob/master/README.md

Configure the main EmojiPicker Config

master

The Config object is the central way to customize the EmojiPicker. Use these properties to control layout, styling, and platform behavior.

property	description	default
`height`	Height of Emoji Picker (set to `null` to make widget unconstrained)	256
`viewOrderConfig`	The exact order in which category view, emoji view and bottom bar appear	`const ViewOrderConfig()`
`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`
`customBackspaceIcon`	Custom Icon for Backspace button	`null`
`customSearchIcon`	Custom Icon for Search button	`null`
`emojiViewConfig`	Emoji view config	`const EmojiViewConfig()`
`skinToneConfig`	Skin tone config	`const SkinToneConfig()`
`categoryViewConfig`	Category view config	`const CategoryViewConfig()`
`bottomActionBarConfig`	Bottom action bar config	`const BottomActionBarConfig()`
`searchViewConfig`	Search View config	`const SearchViewConfig()`

Configure the Category View
master
Use CategoryViewConfig to customize the category tab bar. Key properties include:
- tabBarHeight: Height of the tab bar (default: 46.0).
- initCategory: The initial selected Category (default: Category.RECENT).
- recentTabBehavior: Controls showing the recently/popular used emoji tab (default: RecentTabBehavior.RECENT).
- extraTab: Adds an extra tab for backspace or search (e.g., CategoryExtraTab.BACKSPACE).
- backgroundColor, indicatorColor, iconColor, iconColorSelected: Visual styling for the bar and icons.
- categoryIcons: Customizes icons for each Category using CategoryIcons().
https://github.com/fintasys/emoji_picker_flutter/blob/master/README.md

Configure SkinToneConfig and persist skin tones

master

The SkinToneConfig allows you to manage how skin tones are displayed and remembered.

property	description	default
`enabled`	Enable feature to select a skin tone of certain emoji's	`true`
`dialogBackgroundColor`	The background color of the skin tone dialog	`Colors.white`
`indicatorColor`	Color of the small triangle next to multiple skin tone emoji	`Colors.grey`
`rememberSkinTone`	Remember the last selected skin tone and re-apply it as the default	`false`

Remembering a chosen skin tone

By default the grid, recents and search render the base (default) glyph. Set rememberSkinTone: true to have the picker persist the last tone chosen via the long-press picker (stored in SharedPreferences) and re-apply it as the default for every skin-tone-capable emoji on the next launch. Selecting the base (no-tone) glyph clears the remembered tone.

SkinToneConfig(
  rememberSkinTone: true,
),

Configure the Search View
master
Use SearchViewConfig to customize the search interface. Key properties include:
- backgroundColor: Background color (default: const Color(0xFFEBEFF2)).
- buttonColor: Fill color of the hide search view button (default: Colors.transparent).
- buttonIconColor: Icon color of the hide search view button (default: Colors.black26).
- hintText: Custom hint text (default: 'Search').
- customSearchView: Allows providing a completely custom widget.
https://github.com/fintasys/emoji_picker_flutter/blob/master/README.md
Configure the Bottom Action Bar
master
Use BottomActionBarConfig to customize the bottom bar. Key properties include:
- showBackspaceButton: Toggles the backspace button (default: true).
- showSearchViewButton: Toggles the search view button (default: true).
- backgroundColor: Background color of the bar (default: Colors.blue).
- buttonIconColor: Color for the action buttons (default: Colors.white).
- inputTextStyle / hintTextStyle: Custom TextStyle for the text field.
- customBottomActionBar: Allows providing a completely custom widget.
https://github.com/fintasys/emoji_picker_flutter/blob/master/README.md

Configure the EmojiViewConfig

master

Use EmojiViewConfig to customize the grid of emojis.

property	description	default
`columns`	Number of emojis per row	7
`emojiSizeMax`	Width and height the emoji will be maximal displayed	32.0
`backgroundColor`	The background color of the emoji view	`const Color(0xFFEBEFF2)`
`verticalSpacing`	Vertical spacing between emojis	0
`horizontalSpacing`	Horizontal spacing between emojis	0
`gridPadding`	The padding of GridView	`EdgeInsets.zero`
`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. Needs to be `const` Widget!	`Text('No Recents', style: TextStyle(fontSize: 20, color: Colors.black26), textAlign: TextAlign.center)`
`loadingIndicator`	A widget to display while emoji picker is initializing. Needs to be `const` Widget!	`SizedBox.shrink()`
`buttonMode`	Choose between Material and Cupertino button style	`ButtonMode.MATERIAL`

Customize emoji text style and platform compatibility
master
You can provide a custom emojiTextStyle to apply specific fonts or sizes to emoji characters in the grid.
Important: If you use a custom fontFamily or GoogleFonts via emojiTextStyle, you should set checkPlatformCompatibility to false. This prevents the picker from filtering out technically supported glyphs and improves initialization performance.
https://github.com/fintasys/emoji_picker_flutter/blob/master/lib/src/config.dart
Use a custom font with EmojiPicker
master
You can customize the appearance of the emoji picker by providing a custom font. This is useful for ensuring emoji consistency across different platforms or matching a specific application design language.
```
// Refer to the custom font example implementation in the repository
// https://github.com/Fintasys/emoji_picker_flutter/tree/master/example/lib/main-custom-font.dart
```
https://github.com/fintasys/emoji_picker_flutter/blob/master/example/README.md
Basic usage of EmojiPicker
master
The simplest way to integrate the emoji picker is to use the default configuration. This provides a standard emoji selection interface within your Flutter application.
```
// Refer to the simple example implementation in the repository
// https://github.com/Fintasys/emoji_picker_flutter/tree/master/example/lib/main.dart
```
https://github.com/fintasys/emoji_picker_flutter/blob/master/example/README.md