如何在Flutter自定义TextField中点击左侧图标直接唤起系统emoji键盘

目前Flutter官方没有提供直接唤起系统emoji键盘的专属API，有两个可行的纯官方实现思路，无需引入第三方依赖：

方案1：切换输入类型唤起系统emoji键盘 #

该方案实现成本最低，依赖Flutter官方提供的TextInputType枚举能力实现：

• Flutter 3.10及以上版本已内置TextInputType.emoji枚举值，可直接指定TextField的键盘类型
• 定义状态变量控制键盘类型切换，示例逻辑：

// 定义状态与控制器
final FocusNode _textFieldFocusNode = FocusNode();
final TextEditingController _controller = TextEditingController();
bool _useEmojiKeyboard = false;

// 左侧图标点击事件
void _onLeftIconTap() {
  setState(() {
    _useEmojiKeyboard = !_useEmojiKeyboard;
  });
  // 强制唤起对应类型的键盘
  if (_textFieldFocusNode.hasFocus) {
    _textFieldFocusNode.unfocus();
  }
  Future.delayed(const Duration(milliseconds: 100), () {
    FocusScope.of(context).requestFocus(_textFieldFocusNode);
  });
}

// TextField配置
TextField(
  focusNode: _textFieldFocusNode,
  controller: _controller,
  keyboardType: _useEmojiKeyboard ? TextInputType.emoji : TextInputType.text,
  // 其他自定义配置
)

• 适配说明：iOS 13+系统默认支持该能力，部分安卓定制ROM可能存在不会自动跳转到emoji键盘分页的情况，可根据目标适配范围选择。

方案2：自定义纯官方组件实现emoji选择面板 #

该方案全平台适配一致，完全可控，无系统适配问题：

• emoji本质是Unicode字符，可直接通过Text组件渲染系统原生样式
• 提前整理好分组的emoji Unicode列表，点击左侧图标时弹出官方BottomSheet或者自定义容器，使用GridView渲染所有emoji选项
• 点击emoji后插入到TextField光标位置的示例代码：

void _insertEmoji(String emoji) {
  final currentText = _controller.text;
  final selection = _controller.selection;
  final newText = currentText.replaceRange(
    selection.start,
    selection.end,
    emoji,
  );
  _controller.value = _controller.value.copyWith(
    text: newText,
    selection: TextSelection.collapsed(offset: selection.start + emoji.length),
  );
}

• 可根据需求添加分类切换、最近使用等功能，所有组件全部使用Flutter官方提供的组件实现，无额外依赖。

内容的提问来源于stack exchange，提问作者user16754196