Flutter原生表情键盘插件native_emoji_keyboard的使用

Flutter原生表情键盘插件native_emoji_keyboard的使用

native_emoji_keyboard 是一个用于在 Flutter 应用中集成原生 iOS 表情键盘的插件。本文将详细介绍如何安装和使用该插件。

安装

要使用 native_emoji_keyboard 插件，需要满足以下条件：

• Xcode 11.4+
• Flutter SDK 2.0.0+

步骤 1: 在 Info.plist 中添加配置

首先，在项目的 Info.plist 文件中添加以下键值对：

<key>io.flutter.embedded_views_preview</key>
<true/>

步骤 2: 添加 UiKitView

在 Flutter 代码中添加 UiKitView 组件以展示表情键盘。例如：

SizedBox(
  width: 350,
  height: 250,
  child: UiKitView(
    viewType: "EmojiTextField",
  ),
)

使用示例

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 native_emoji_keyboard 插件。

示例代码

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:native_emoji_keyboard/emoji_keyboard.dart';

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // 创建一个 ValueNotifier 用于监听文本变化
  ValueNotifier<String> onTextChange = ValueNotifier<String>("👍");

  // 当前选中的表情
  String emoji = "👍";

  [@override](/user/override)
  void initState() {
    super.initState();

    // 添加监听器，当文本发生变化时更新状态
    onTextChange.addListener(() {
      emoji = onTextChange.value;

      print('emoji: $emoji');
      setState(() {});
    });
  }

  [@override](/user/override)
  void dispose() {
    super.dispose();

    // 释放资源
    onTextChange.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: SizedBox(
            key: Key(emoji),
            width: 350,
            height: 250,
            child: EmojiKeyboardText(
              text: emoji,
              fontSize: 40,
              onTextChange: onTextChange,
              onTap: () {
                print('Tapped');
              },
            ),
          ),
        ),
      ),
    );
  }
}