flutter_emoji_select 1.0.2

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

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_emoji_select/flutter_emoji_selector.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Emoji Selector Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const DemoPage(),
    );
  }
}

class DemoPage extends StatefulWidget {
  const DemoPage({super.key});

  @override
  State<DemoPage> createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  final EmojiSelectorController _controller = EmojiSelectorController();
  String? _selectedEmoji;

  // Using default bundled GIF emojis from the package
  final List<EmojiItem> _emojis = DefaultEmojis.all;

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

  void _onEmojiSelected(EmojiItem emoji) {
    setState(() {
      _selectedEmoji = emoji.id;
    });
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text('Selected: ${emoji.semanticLabel ?? emoji.id}'),
        duration: const Duration(seconds: 1),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Emoji Selector Demo'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(24),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Basic Example
            _buildSection(
              title: 'Long Press Trigger',
              description: 'Long press the button to show emoji selector',
              child: EmojiSelector(
                emojis: _emojis,
                onEmojiSelected: _onEmojiSelected,
                child: _buildReactionButton(),
              ),
            ),

            const SizedBox(height: 32),

            // Tap Trigger Example
            _buildSection(
              title: 'Tap Trigger',
              description: 'Tap the button to toggle emoji selector',
              child: EmojiSelector(
                emojis: _emojis,
                trigger: EmojiSelectorTrigger.tap,
                onEmojiSelected: _onEmojiSelected,
                child: _buildReactionButton(),
              ),
            ),

            const SizedBox(height: 32),

            // Controller Example
            _buildSection(
              title: 'Controller Example',
              description: 'Use controller to show/hide programmatically',
              child: Column(
                children: [
                  EmojiSelector(
                    emojis: _emojis,
                    controller: _controller,
                    trigger: EmojiSelectorTrigger.manual,
                    onEmojiSelected: _onEmojiSelected,
                    child: _buildReactionButton(),
                  ),
                  const SizedBox(height: 16),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      ElevatedButton(
                        onPressed: () => _controller.show(),
                        child: const Text('Show'),
                      ),
                      const SizedBox(width: 8),
                      ElevatedButton(
                        onPressed: () => _controller.hide(),
                        child: const Text('Hide'),
                      ),
                      const SizedBox(width: 8),
                      ElevatedButton(
                        onPressed: () => _controller.toggle(),
                        child: const Text('Toggle'),
                      ),
                    ],
                  ),
                ],
              ),
            ),

            const SizedBox(height: 32),

            // Custom Style Example
            _buildSection(
              title: 'Custom Style (Dark)',
              description: 'With custom colors and larger emojis',
              child: EmojiSelector(
                emojis: _emojis,
                style: EmojiSelectorStyle.dark.copyWith(
                  emojiSize: 48,
                  zoomScale: 2.0,
                ),
                onEmojiSelected: _onEmojiSelected,
                child: _buildReactionButton(),
              ),
            ),

            const SizedBox(height: 32),

            // Facebook Style Example
            _buildSection(
              title: 'Facebook Style',
              description: 'Using the predefined Facebook theme',
              child: EmojiSelector(
                emojis: _emojis,
                style: EmojiSelectorStyle.facebook,
                onEmojiSelected: _onEmojiSelected,
                child: _buildReactionButton(),
              ),
            ),

            const SizedBox(height: 32),

            // Below Position Example
            _buildSection(
              title: 'Below Position',
              description: 'Selector appears below the button',
              child: EmojiSelector(
                emojis: _emojis,
                style: const EmojiSelectorStyle(
                  preferredPosition: OverlayPosition.below,
                ),
                onEmojiSelected: _onEmojiSelected,
                child: _buildReactionButton(),
              ),
            ),

            const SizedBox(height: 32),

            // Many Emojis (Scrollable)
            _buildSection(
              title: 'Many Emojis (Scrollable)',
              description: 'Horizontally scroll when many emojis',
              child: EmojiSelector(
                emojis: [
                  ..._emojis,
                  ..._emojis, // Duplicate to show scrolling
                ],
                style: const EmojiSelectorStyle(
                  preferredPosition: OverlayPosition.below,
                ),
                onEmojiSelected: _onEmojiSelected,
                child: _buildReactionButton(),
              ),
            ),

            const SizedBox(height: 100),
          ],
        ),
      ),
    );
  }

  Widget _buildSection({
    required String title,
    required String description,
    required Widget child,
  }) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          title,
          style: Theme.of(
            context,
          ).textTheme.titleMedium?.copyWith(fontWeight: FontWeight.bold),
        ),
        const SizedBox(height: 4),
        Text(
          description,
          style: Theme.of(
            context,
          ).textTheme.bodySmall?.copyWith(color: Colors.grey[600]),
        ),
        const SizedBox(height: 16),
        Center(child: child),
      ],
    );
  }

  Widget _buildReactionButton() {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      decoration: BoxDecoration(
        color: Colors.grey[200],
        borderRadius: BorderRadius.circular(20),
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(
            _selectedEmoji != null ? Icons.thumb_up : Icons.thumb_up_outlined,
            size: 20,
            color: _selectedEmoji != null ? Colors.blue : Colors.grey[700],
          ),
          const SizedBox(width: 8),
          Text(
            _selectedEmoji?.toUpperCase() ?? 'Like',
            style: TextStyle(
              color: _selectedEmoji != null ? Colors.blue : Colors.grey[700],
              fontWeight: FontWeight.w500,
            ),
          ),
        ],
      ),
    );
  }
}