Flutter表情与GIF选择插件 flutter_emoji_gif_picker 的使用

flutter_emoji_gif_picker 是一个基于 WhatsApp 表情选择器设计的 Flutter 插件，提供了丰富的功能和易于使用的接口。本文将介绍如何使用该插件，并提供完整的示例代码。

功能特性

• 包含表情图标小部件和文本框
• 支持 GIF 菜单（通过 Giphy API）
• 暗/亮模式支持
• 解决了其他表情选择器中常见的键盘问题
• 提供返回按钮事件处理（类似于 WhatsApp）
• 支持所有平台
• 轻量级，加载速度快
• 可自定义设计
• 表情/GIF 搜索栏
• 提供菜单展开时页面大小调整选项

快速开始

基本设置

只需设置你的 Giphy API 密钥并选择模式（暗/亮）即可：

EmojiGifPickerPanel.setup(
    giphyApiKey: "yourgiphyapikey", mode: Mode.light);

自定义设置

可以通过传递更多的参数来自定义面板：

EmojiGifPickerPanel.setup(
    sizes: MenuSizes(width: 2000, height: 500),
    texts: MenuTexts(
        searchEmojiHintText: "Search Emoji?",
        searchGifHintText: "Search with Giphy"),
    colors: MenuColors(
      backgroundColor: const Color(0xFFf6f5f3),
      searchBarBackgroundColor: Colors.white,
      searchBarBorderColor: const Color(0xFFe6e5e2),
      searchBarEnabledColor: Colors.white,
      searchBarFocusedColor: const Color(0xFF00a884),
      menuSelectedIconColor: const Color(0xFF1d6e5f),
      buttonColor: const Color(0xFF909090),
      iconBackgroundColor: null,
      iconHoveredBackgroundColor: const Color.fromARGB(255, 224, 224, 224),
      indicatorColor: Colors.transparent,
    ),
    styles: MenuStyles(
        menuSelectedTextStyle:
            const TextStyle(fontSize: 20, color: Colors.black),
        menuUnSelectedTextStyle:
            const TextStyle(fontSize: 20, color: Color(0xFF7a7a7a)),
        searchBarHintStyle:
            const TextStyle(fontSize: 12, color: Color(0xFF8d8d8d)),
        searchBarTextStyle:
            const TextStyle(fontSize: 12, color: Colors.black)),
    giphyApiKey: "yourgiphyapikey",
    mode: Mode.light);

修改 MaterialApp 的 builder

为了确保插件能够正常工作，需要修改 MaterialApp 的 builder 方法：

return MaterialApp(
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  builder: (context, child) {
    return Stack(
      children: [
        child!,
        EmojiGifMenuStack(),
      ],
    );
  },
  home: const MyHomePage(),
);

是否应让表情/GIF选择器调整页面大小？

如果希望打开表情/GIF选择器时自动调整页面大小，则需要将其包裹在 EmojiGifMenuLayout 中，并设置 fromStack: false：

EmojiGifMenuLayout(
  child: YourDesign(),
)

EmojiGifPickerIcon(
  id: "1",
  onGifSelected: (gif) {},
  fromStack: false,
  controller: controller,
  icon: Icon(Icons.emoji_emotions),
)

返回按钮问题

当按下返回按钮时，如果希望关闭表情/GIF选择器而不是切换页面，可以使用 WillPopScope：

return WillPopScope(
    onWillPop: (() async {
      return EmojiGifPickerPanel.onWillPop();
    }),
    child: Scaffold(
)

EmojiGifPickerIcon & EmojiGifTextField

这两个组件是显示选择器所必需的。给每个选择器组件指定一个唯一的 ID，以便可以在同一页面上多次使用这些组件。

Icon 示例

EmojiGifPickerIcon(
    id: "1",
    onGifSelected: (gif) {},
    controller: controller,
    viewEmoji: true,
    viewGif: true,
    icon: Icon(Icons.emoji_emotions),
)

TextField 示例

EmojiGifTextField(
     id: "1",
)

完整视图示例

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    EmojiGifPickerIcon(
      id: "2",
      onGifSelected: (gif) {},
      controller: controller2,
      icon: Icon(Icons.emoji_emotions),
    ),
    SizedBox(
        width: MediaQuery.of(context).size.width * 0.6,
        child: EmojiGifTextField(
          id: "2",
          decoration: InputDecoration(
            enabledBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.black),
                borderRadius: BorderRadius.circular(30)),
            focusedBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.blue),
                borderRadius: BorderRadius.circular(30)),
          ),
        )),
  ],
)

完整可用示例

以下是一个完整的示例应用：

import 'package:flutter/material.dart';
import 'package:emoji_gif_picker_menu/emoji_gif_picker_menu.dart';

void main() {
  EmojiGifPickerPanel.setup(
      giphyApiKey: "yourgiphyapikey", mode: Mode.light);
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      builder: (context, child) {
        return Stack(
          children: [
            child!,
            EmojiGifMenuStack(),
          ],
        );
      },
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  TextEditingController controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
        onWillPop: (() async {
          return EmojiGifPickerPanel.onWillPop();
        }),
        child: Scaffold(
            resizeToAvoidBottomInset: true,
            body: EmojiGifMenuLayout(
              child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
                EmojiGifPickerIcon(
                  id: "1",
                  onGifSelected: (gif) {},
                  controller: controller,
                  icon: Icon(Icons.emoji_emotions),
                ),
                SizedBox(
                    width: MediaQuery.of(context).size.width * 0.3,
                    child: EmojiGifTextField(
                      id: "1",
                      decoration: InputDecoration(
                        enabledBorder: OutlineInputBorder(
                            borderSide: BorderSide(color: Colors.black),
                            borderRadius: BorderRadius.circular(30)),
                        focusedBorder: OutlineInputBorder(
                            borderSide: BorderSide(color: Colors.blue),
                            borderRadius: BorderRadius.circular(30)),
                      ),
                    )),
              ]),
            )));
  }
}

通过以上步骤，你就可以在 Flutter 应用中集成表情和 GIF 选择器了。如果你有更多自定义需求，可以根据插件提供的 API 进行进一步配置。