flutter_emoji_select 1.0.0

A Facebook-style emoji selector with zoom/bounce animations. Supports PNG, SVG, GIF images with customizable styling.

Flutter Emoji Selector

A Facebook-style emoji/reaction selector for Flutter with smooth zoom and bounce animations. Perfect for adding reaction pickers to social apps, chat applications, or any interactive content.

https://github.com/user-attachments/assets/2a88976c-b97f-4451-9033-b3d37374a63f

Features

• Long press to show, drag to select, release to confirm
• Zoom and bounce animations on hover
• Supports PNG, SVG, and GIF images
• Wraps to multiple rows when many emojis
• Customizable styling (colors, sizes, animations, spacing)
• Programmatic control via controller
• Dismiss on tap outside or selection
• Bundled default animated GIF emojis

Preview

┌─────────────────────────────────┐
│  [emoji1] [emoji2] [emoji3]     │  <- Appears above child
│  [emoji4] [emoji5] [emoji6]     │
└─────────────────────────────────┘
         [Like Button]               <- Your child widget

Getting Started

Add the package to your pubspec.yaml:

dependencies:
  flutter_emoji_select: ^1.0.0

Usage

Basic Usage with Default Emojis

import 'package:flutter_emoji_select/flutter_emoji_select.dart';

EmojiSelector(
  emojis: DefaultEmojis.all,
  onEmojiSelected: (emoji) {
    print('Selected: ${emoji.id}');
  },
  child: ElevatedButton(
    onPressed: () {},
    child: Text('React'),
  ),
)

Custom Emojis

EmojiSelector(
  emojis: [
    EmojiItem.asset('like', 'assets/emojis/like.png'),
    EmojiItem.asset('love', 'assets/emojis/love.gif'),
    EmojiItem.asset('wow', 'assets/emojis/wow.svg'),
  ],
  onEmojiSelected: (emoji) => handleReaction(emoji),
  child: IconButton(
    icon: Icon(Icons.thumb_up_outlined),
    onPressed: () {},
  ),
)

Network Images

EmojiSelector(
  emojis: [
    EmojiItem.network('like', 'https://example.com/like.png'),
    EmojiItem.network('love', 'https://example.com/love.gif'),
  ],
  onEmojiSelected: (emoji) => handleReaction(emoji),
  child: myButton,
)

Custom Styling

EmojiSelector(
  emojis: DefaultEmojis.all,
  style: EmojiSelectorStyle(
    backgroundColor: Colors.grey[900]!,
    borderRadius: BorderRadius.circular(16),
    emojiSize: 48,
    emojiSpacing: 8,
    zoomScale: 2.0,
    padding: EdgeInsets.all(12),
  ),
  onEmojiSelected: (emoji) => handleReaction(emoji),
  child: myButton,
)

Using Controller

class _MyWidgetState extends State<MyWidget> {
  final _controller = EmojiSelectorController();

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        EmojiSelector(
          emojis: DefaultEmojis.all,
          controller: _controller,
          trigger: EmojiSelectorTrigger.manual,
          onEmojiSelected: (emoji) => handleReaction(emoji),
          child: ReactionButton(),
        ),
        ElevatedButton(
          onPressed: () => _controller.show(),
          child: Text('Show Reactions'),
        ),
      ],
    );
  }
}

Trigger Options

// Long press to show (default)
EmojiSelector(
  trigger: EmojiSelectorTrigger.longPress,
  // ...
)

// Tap to toggle
EmojiSelector(
  trigger: EmojiSelectorTrigger.tap,
  // ...
)

// Manual control only
EmojiSelector(
  trigger: EmojiSelectorTrigger.manual,
  controller: myController,
  // ...
)

API Reference

EmojiSelector

Property	Type	Default	Description
emojis	List<EmojiItem>	required	List of emojis to display
child	Widget	required	The widget that triggers the selector
onEmojiSelected	ValueChanged<EmojiItem>?	null	Callback when emoji is selected
controller	EmojiSelectorController?	null	Controller for programmatic control
style	EmojiSelectorStyle	default	Style configuration
trigger	EmojiSelectorTrigger	longPress	How to trigger the selector
dismissOnTapOutside	bool	true	Dismiss when tapping outside
dismissOnSelection	bool	true	Dismiss after selection
enabled	bool	true	Whether the selector is enabled

EmojiSelectorStyle

Property	Type	Default	Description
backgroundColor	Color	white	Background color
borderRadius	BorderRadius	24	Corner radius
emojiSize	double	40	Size of each emoji
emojiSpacing	double	4	Spacing between emojis
zoomScale	double	1.8	Scale when emoji is hovered
zoomDuration	Duration	200ms	Animation duration
overlayOffset	double	8	Distance from anchor widget

EmojiItem

Factory constructors:

• EmojiItem.asset(id, assetPath) - Local asset image
• EmojiItem.network(id, url) - Network image
• EmojiItem.file(id, filePath) - File system image
• EmojiItem.memory(id, bytes) - In-memory bytes

DefaultEmojis

Bundled animated GIF emojis:

• DefaultEmojis.all - All default emojis
• DefaultEmojis.party - Party emoji
• DefaultEmojis.partyBlob - Party blob emoji
• DefaultEmojis.partyParrot - Party parrot emoji
• DefaultEmojis.pet - Pet emoji
• DefaultEmojis.shakeGrab - Shake/grab emoji
• DefaultEmojis.none - None/neutral emoji

License

MIT License