Flutter表情键盘插件emoji_keyboard_flutter的使用

Flutter表情键盘插件emoji_keyboard_flutter的使用

插件简介

emoji_keyboard_flutter 是一个Flutter插件，提供了一个仅能输入表情符号的键盘。它具有直观的布局，支持Unicode 14.0.0的所有表情符号，并分为8个不同的类别，还有一个“最近使用”标签页。用户可以通过滑动或选择顶部栏中的类别来轻松切换。此外，该键盘还提供了搜索功能、删除表情符号、添加空格等功能，并且可以自定义键盘的高度和显示状态。

关键特性

• 流畅且直观的键盘布局：支持所有Unicode 14.0.0的表情符号，分为8个不同的类别，并有一个“最近使用”标签页。
• 类别切换：通过滑动或点击顶部栏的类别进行切换。
• 过滤无法显示的表情符号（仅限Android）。
• 搜索功能：在底部栏中提供搜索功能，方便查找特定的表情符号。
• 删除和添加空格：可以从底部栏删除表情符号或添加空格。
• 自定义键盘高度：通过简单的变量控制键盘的高度和显示状态。
• 皮肤色调选择：长按某些表情符号可以选择皮肤色调。
• 暗黑模式：支持切换到暗黑模式。

使用方法

要使用 emoji_keyboard_flutter 插件，首先需要在 pubspec.yaml 文件中添加依赖：

dependencies:
  emoji_keyboard_flutter: ^最新版本号

示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中集成 emoji_keyboard_flutter 插件。该示例包括了表情键盘的基本用法、键盘的显示与隐藏、以及如何处理返回按钮事件。

import 'package:back_button_interceptor/back_button_interceptor.dart';
import 'package:emoji_keyboard_flutter/emoji_keyboard_flutter.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Emoji Keyboard',
      debugShowCheckedModeBanner: false, // 隐藏调试模式横幅
      theme: ThemeData(
        primarySwatch: Colors.blue, // 设置主题颜色
      ),
      home: MyHomePage(title: 'Emoji Keyboard'), // 主页面
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool showEmojiKeyboard; // 控制表情键盘的显示与隐藏
  final TextEditingController controller = TextEditingController(); // 文本控制器

  [@override](/user/override)
  void initState() {
    showEmojiKeyboard = false; // 初始化时隐藏表情键盘
    BackButtonInterceptor.add(myInterceptor); // 添加返回按钮拦截器
    super.initState();
  }

  [@override](/user/override)
  void dispose() {
    BackButtonInterceptor.remove(myInterceptor); // 移除返回按钮拦截器
    super.dispose();
  }

  // 返回按钮拦截器，用于处理表情键盘的关闭
  bool myInterceptor(bool stopDefaultButtonEvent, RouteInfo info) {
    if (showEmojiKeyboard) {
      setState(() {
        showEmojiKeyboard = false; // 关闭表情键盘
      });
      return true; // 阻止默认的返回操作
    } else {
      return false; // 允许默认的返回操作
    }
  }

  // 点击文本框时显示表情键盘
  void onTapEmojiField() {
    if (!showEmojiKeyboard) {
      setState(() {
        showEmojiKeyboard = true; // 显示表情键盘
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title), // 设置标题
      ),
      body: Stack(children: [
        Container(
          color: Colors.white, // 设置背景颜色
          alignment: Alignment.topCenter, // 对齐方式
          padding: const EdgeInsets.all(6), // 内边距
          child: TextFormField(
            onTap: () {
              onTapEmojiField(); // 点击文本框时显示表情键盘
            },
            controller: controller, // 绑定文本控制器
            decoration: const InputDecoration(border: OutlineInputBorder()), // 设置边框样式
            readOnly: true, // 设置为只读，防止用户直接输入文本
            showCursor: true, // 显示光标
          ),
        ),
        Align(
          alignment: Alignment.bottomCenter, // 对齐方式
          child: EmojiKeyboard(
              emotionController: controller, // 绑定文本控制器
              emojiKeyboardHeight: 400, // 设置表情键盘的高度
              showEmojiKeyboard: showEmojiKeyboard, // 控制表情键盘的显示与隐藏
              darkMode: true), // 启用暗黑模式
        ),
      ]),
    );
  }
}