Team Kode
 · AI-powered software agency

Costum widget for emoji selection

Resolved

Good night everyone.

I'm having problems creating a custom widget, I looked up to pub.dev and got the following

package: emoji_picker_flutter: ^1.6.2

I managed to create the widget that shows emojis with the following code

However, when I click on the selected emoji nothing happens, I thought about this widget having a local state and always updating when I clicked on the emoji, like the textfield, but I couldn't implement it.

Has anyone here ever done something similar?

import 'package:emoji_picker_flutter/emoji_picker_flutter.dart';

class EmojiPickerWidget extends StatefulWidget {
  const EmojiPickerWidget({
    Key? key,
    this.width,
    this.height,
  }) : super(key: key);

  final double? width;
  final double? height;

  @override
  _EmojiPickerWidgetState createState() => _EmojiPickerWidgetState();
}

class _EmojiPickerWidgetState extends State<EmojiPickerWidget> {
  String selectedEmoji = '';

  // Método para obter o emoji selecionado externamente
  String getSelectedEmoji() {
    return selectedEmoji;
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: widget.height ?? 250,
      width: widget.width ?? MediaQuery.of(context).size.width,
      child: EmojiPicker(
        onEmojiSelected: (category, emoji) {
          // Atualiza o estado local quando um emoji é selecionado
          setState(() {
            selectedEmoji = emoji.emoji!;
          });
        },
        config: Config(
          columns: 7,
          emojiSizeMax: 32.0,
          verticalSpacing: 0,
          horizontalSpacing: 0,
          initCategory: Category.RECENT,
          bgColor: const Color(0xFFF2F2F2),
          indicatorColor: Colors.blue,
          iconColor: Colors.grey,
          iconColorSelected: Colors.blue,
          backspaceColor: Colors.blue,
          categoryIcons: CategoryIcons(),
          buttonMode: ButtonMode.MATERIAL,
        ),
      ),
    );
  }
}
3
11 replies