Flutter聊天选择器插件chat_pickers的使用

chat_pickers 是一个为 Flutter 提供表情符号和 GIF 选择器键盘的小部件的插件。该插件基于两个非常优秀的包：giphy_picker 和 emoji_picker。

预览

通用用法：

搜索表情符号：

将表情符号添加到文本消息中：

开始使用

要使用 chat_pickers 插件，首先需要在项目中添加依赖项。确保在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  chat_pickers: ^版本号

然后运行 flutter pub get 来获取依赖。

获取 GIPHY API 密钥

要在 GIF 页面中使用，你需要一个 GIPHY API 密钥。请前往 Giphy 开发者门户 注册并获取你的 API 密钥。

使用方法

为了使用 ChatPickers，你需要定义一个 ChatPickers 小部件，并传递必要的配置参数。以下是基本的使用示例：

最小化代码示例

import 'package:flutter/material.dart';
import 'package:chat_pickers/chat_pickers.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:provider/provider.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ChatScreen(),
    );
  }
}

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

class _ChatScreenState extends State<ChatScreen> {
  final TextEditingController _chatController = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chat Picker Example'),
      ),
      body: SafeArea(
        child: Column(
          children: [
            Expanded(
              child: Container(),
            ),
            ChatPickers(
              chatController: _chatController,
              emojiPickerConfig: EmojiPickerConfig(
                columns: 8,
                bgBarColor: Colors.black,
                bgColor: Colors.grey[900],
              ),
              giphyPickerConfig: GiphyPickerConfig(
                apiKey: "your_giphy_api_key_here",
                onSelected: (gif) {
                  print('Selected GIF: ${gif.images.original.url}');
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

配置说明

EmojiPickerConfig

用于自定义表情页面的外观和行为。

EmojiPickerConfig(
  columns: 8, // 默认值为7
  bgBarColor: Colors.black, // 顶部/底部栏颜色
  bgColor: Colors.grey[900], // 背景颜色
  indicatorColor: Colors.yellow, // 指示器颜色
);

GiphyPickerConfig

用于自定义 GIF 页面的外观和行为。

GiphyPickerConfig(
  apiKey: "your_giphy_api_key_here", // 你的GIPHY API密钥
  lang: "EN", // 语言设置
  onError: (error) => print(error), // 错误处理函数
  onSelected: (gif) => print('Selected GIF: ${gif.images.original.url}'), // 选择GIF时的回调
  showPreviewPage: true, // 是否显示预览页面
  searchText: "Search GIPHY", // 搜索框的提示文字
);

完整示例

以下是一个完整的示例，展示了如何在聊天界面中集成 ChatPickers 插件：

import 'package:flutter/material.dart';
import 'package:chat_pickers/chat_pickers.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:provider/provider.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ChatScreen(),
    );
  }
}

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

class _ChatScreenState extends State<ChatScreen> {
  final TextEditingController _chatController = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chat Picker Example'),
      ),
      body: SafeArea(
        child: Column(
          children: [
            Expanded(
              child: Container(),
            ),
            ChatPickers(
              chatController: _chatController,
              emojiPickerConfig: EmojiPickerConfig(
                columns: 8,
                bgBarColor: Colors.black,
                bgColor: Colors.grey[900],
              ),
              giphyPickerConfig: GiphyPickerConfig(
                apiKey: "your_giphy_api_key_here",
                onSelected: (gif) {
                  print('Selected GIF: ${gif.images.original.url}');
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}