Flutter聊天功能插件chat_package的使用

Flutter聊天功能插件chat_package的使用

聊天功能插件chat_package

Pub Version likes popularity Pub

本插件提供了在您的Flutter项目中轻松实现聊天界面的功能,支持音频录制和发送图片。此插件高度可定制,以适应您的项目需求。

由Omar Mouki创建

GitHub LinkedIn

截图

即将推出

此包的下一个更新将添加视频录制的支持,添加捕获/存储图片的字幕,以及其他更多功能。

使用方法

权限设置

您只需在项目中添加权限,该插件将处理其余部分。 所需的权限包括:

  1. 相机
  2. 麦克风
  3. 本地存储

Android

  1. 在您的“gradle.properties”文件中添加以下内容:
    android.useAndroidX=true
    android.enableJetifier=true
    
  2. 若要使用录音功能,请确保在您的“android/app/build.gradle”文件中的compileSdkVersion设置为21:
    android {
      compileSdkVersion 21
      ...
    }
    
  3. 确保将所有android.依赖项替换为其AndroidX对应项(完整的列表可以在这里找到:https://developer.android.com/jetpack/androidx/migrate)。

在您的AndroidManifest.xml文件中添加权限:

 <uses-permission android:name="android.permission.INTERNET"/>
 <!-- 存储组的权限选项 -->
 <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
 <!-- 相机组的权限选项 -->
 <uses-permission android:name="android.permission.CAMERA"/>
 <!-- 录音组的权限选项 -->
 <uses-permission android:name="android.permission.RECORD_AUDIO" />

iOS

 <!-- 相机组的权限选项 -->
 <key>NSCameraUsageDescription</key>
 <string>camera</string>
 <!-- 麦克风组的权限选项 -->
 <key>NSMicrophoneUsageDescription</key>
 <string>microphone</string>
 <!-- 照片组的权限选项 -->
 <key>NSPhotoLibraryUsageDescription</key>
 <string>photos</string>

在您的Podfile中添加以下内容:

target.build_configurations.each do |config|
    config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
      '$(inherited)',

      'PERMISSION_CAMERA=1',
      'PERMISSION_MICROPHONE=1',
      'PERMISSION_PHOTOS=1',

    ]
end

调用

简单调用ChatScreen

ChatMessages: 聊天屏幕需要一个聊天消息列表,并且为了方便起见,ChatMessage模型包含了一个fromJson()方法,因此您可以迭代存储的ChatMessage列表。以下是ChatMessage的一个例子:

ChatMessage(
      isSender: true,
      text: 'this is a banana',
      chatMedia: ChatMedia(
        url:
            'https://images.pexels.com/photos/7194915/pexels-photo-7194915.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260',
        mediaType: MediaType.imageMediaType(),
      ),
    )

此包还提供了ChatMessage模型,当使用这些必需的方法时,例如onTextSubmithandleRecordhandleImageSelect,完整的代码如下所示:

ChatScreen(
        scrollController: scrollController,
        messages: messages,
        onSlideToCancelRecord: () {
          log('not sent');
        },
        onTextSubmit: (textMessage) {
          setState(() {
            messages.add(textMessage);

            scrollController
                .jumpTo(scrollController.position.maxScrollExtent + 50);
          });
        },
        handleRecord: (audioMessage, canceled) {
          if (!canceled) {
            setState(() {
              messages.add(audioMessage!);
              scrollController
                  .jumpTo(scrollController.position.maxScrollExtent + 90);
            });
          }
        },
        handleImageSelect: (imageMessage) async {
          if (imageMessage != null) {
            setState(() {
              messages.add(
                imageMessage,
              );
              scrollController
                  .jumpTo(scrollController.position.maxScrollExtent + 300);
            });
          }
        },
      )

属性

您可以几乎自定义此包中的所有内容,以下是您可以更改的所有属性:

/// 发送者消息容器的颜色
final Color? senderColor;

/// 音频滑块未激活部分的颜色
final Color? inActiveAudioSliderColor;

/// 音频滑块激活部分的颜色
final Color? activeAudioSliderColor;

/// [必需] 聊天屏幕的滚动控制器
final ScrollController scrollController;

/// 聊天输入字段容器的颜色
final Color chatInputFieldColor;

/// 发送消息的提示文本
final String sendMessageHintText;

/// 更改附件底部弹出窗口中的文本和图标的参数
/// 附件底部弹出窗口中选择图像附件来自相册时显示的文本
final String imageAttachmentFromGalleryText;

/// 附件底部弹出窗口中选择图像附件来自相册时显示的图标
final Icon? imageAttachmentFromGalleryIcon;

/// 附件底部弹出窗口中选择图像附件来自相机时显示的文本
final String imageAttachmentFromCameraText;

/// 附件底部弹出窗口中选择图像附件来自相机时显示的图标
final Icon? imageAttachmentFromCameraIcon;

/// 附件底部弹出窗口中取消文本显示的文本
final String imageAttachmentCancelText;

/// 附件底部弹出窗口中取消文本显示的图标
final Icon? imageAttachmentCancelIcon;

/// 附件底部弹出窗口中图像附件的文本样式
final TextStyle? imageAttachmentTextStyle;

/// 录制语音提示文本
final String recordingNoteHintText;

/// [必需] 处理文本消息提交
/// 此方法将传递一个 [ChatMessage]
final Function(ChatMessage textMessage) onTextSubmit;

/// [必需] 聊天消息列表
final List<ChatMessage> messages;

/// [必需] 处理成功录制,传递到覆盖的方法
/// 如果用户取消了录制,此方法将传递一个 [ChatMessage]
final Function(ChatMessage? audioMessage, bool canceled) handleRecord;

/// [必需] 处理图像选择
/// 此方法将传递一个 [ChatMessage]
final Function(ChatMessage? imageMessage) handleImageSelect;

/// 处理取消录制
final VoidCallback? onSlideToCancelRecord;

/// 控制输入文本的TextEditingController
final TextEditingController? textEditingController;

/// 更改聊天输入字段外观
final BoxDecoration? chatInputFieldDecoration;

/// 使用此标志禁用输入
final bool disableInput;

/// 获取聊天输入字段填充
final EdgeInsets? chatInputFieldPadding;

/// 消息容器的文本样式
final TextStyle? messageContainerTextStyle;

/// 消息容器日期的文本样式
final TextStyle? sendDateTextStyle;

/// 可选参数以覆盖默认的附件底部弹出窗口
final Function(BuildContext context)? attachmentClick;

更多关于Flutter聊天功能插件chat_package的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter聊天功能插件chat_package的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何在Flutter项目中使用chat_package插件来实现聊天功能的示例代码。请注意,chat_package可能是一个假设的包名,因为在实际中可能没有一个确切名为chat_package的官方Flutter插件。不过,我会根据常见的聊天功能插件的使用方式给出一个示例,这里假设有一个类似的包来实现聊天功能。

首先,确保你已经在pubspec.yaml文件中添加了该插件的依赖(这里用chat_package作为示例):

dependencies:
  flutter:
    sdk: flutter
  chat_package: ^latest_version  # 请替换为实际的包名和最新版本号

然后,运行flutter pub get来安装依赖。

接下来,在你的Flutter项目中,你可以按照以下步骤来设置聊天功能:

1. 导入包

在你的Dart文件中导入chat_package

import 'package:chat_package/chat_package.dart';

2. 创建聊天界面

创建一个新的Dart文件(例如chat_screen.dart)来定义你的聊天界面。这里是一个基本的聊天界面示例:

import 'package:flutter/material.dart';
import 'package:chat_package/chat_package.dart'; // 假设的包导入

class ChatScreen extends StatefulWidget {
  @override
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  ChatController _chatController;

  @override
  void initState() {
    super.initState();
    _chatController = ChatController();
    // 初始化聊天数据,这里可以是从服务器获取的数据
    _chatController.messages.addAll([
      ChatMessage(
        sender: 'User1',
        text: 'Hello!',
        timestamp: DateTime.now().subtract(Duration(minutes: 5)),
      ),
      ChatMessage(
        sender: 'User2',
        text: 'Hi there!',
        timestamp: DateTime.now().subtract(Duration(minutes: 3)),
      ),
    ]);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chat'),
      ),
      body: ChatWidget(
        controller: _chatController,
        onMessageSent: (ChatMessage message) {
          // 当用户发送消息时调用,这里可以添加消息到服务器
          print('Message sent: ${message.text}');
          _chatController.messages.add(message);
          // 滚动到底部
          _scrollToBottom();
        },
      ),
      bottomNavigationBar: Container(
        decoration: BoxDecoration(color: Colors.white),
        child: Row(
          children: [
            Expanded(
              child: TextField(
                onChanged: (value) {
                  // 更新输入状态
                },
                onEditingComplete: () {
                  // 当用户完成编辑时发送消息
                  ChatMessage message = ChatMessage(
                    sender: 'CurrentUser',
                    text: _chatController.textEditingController.text,
                    timestamp: DateTime.now(),
                  );
                  _chatController.textEditingController.clear();
                  _chatController.onMessageSent(message);
                },
                decoration: InputDecoration(
                  border: InputBorder.none,
                  hintText: 'Type a message...',
                ),
                controller: _chatController.textEditingController,
              ),
            ),
            IconButton(
              icon: Icon(Icons.send),
              onPressed: () {
                _chatController.textEditingController.text.trim().isNotEmpty
                    ? _chatController.onMessageSent(ChatMessage(
                          sender: 'CurrentUser',
                          text: _chatController.textEditingController.text,
                          timestamp: DateTime.now(),
                        ))
                    : null;
                _chatController.textEditingController.clear();
                _scrollToBottom();
              },
            ),
          ],
        ),
      ),
    );
  }

  void _scrollToBottom() {
    // 滚动到底部的逻辑,这里假设ChatWidget有一个滚动控制器
    // _chatController.scrollController.animateTo(
    //   _chatController.scrollController.position.maxScrollExtent,
    //   duration: const Duration(milliseconds: 300),
    //   curve: Curves.easeOut,
    // );
    // 注意:上面的代码是一个假设的实现,具体实现取决于ChatWidget的实现
  }
}

class ChatMessage {
  String sender;
  String text;
  DateTime timestamp;

  ChatMessage({required this.sender, required this.text, required this.timestamp});
}

// 假设的ChatController类,用于管理聊天状态
class ChatController {
  TextEditingController textEditingController = TextEditingController();
  List<ChatMessage> messages = [];
  // ScrollController scrollController = ScrollController(); // 如果需要滚动控制

  // 其他管理聊天状态的方法...
}

// 假设的ChatWidget,用于显示聊天消息
class ChatWidget extends StatelessWidget {
  final ChatController controller;
  final ValueChanged<ChatMessage> onMessageSent;

  ChatWidget({required this.controller, required this.onMessageSent});

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: controller.messages.length,
      itemBuilder: (context, index) {
        ChatMessage message = controller.messages[index];
        return ListTile(
          leading: CircleAvatar(child: Text(message.sender[0])),
          title: Text(message.text),
          subtitle: Text(message.timestamp.toLocal().toString()),
        );
      },
    );
  }
}

3. 使用聊天界面

在你的主应用文件(例如main.dart)中使用ChatScreen

import 'package:flutter/material.dart';
import 'chat_screen.dart'; // 导入聊天界面

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

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

注意

  • 上面的代码是一个简化的示例,用于展示如何在Flutter中实现一个基本的聊天界面。
  • 在实际应用中,你可能需要处理更多的逻辑,比如与后端服务器的通信、消息的持久化存储、用户身份验证等。
  • ChatControllerChatWidget是根据假设的功能实现的,实际使用时你可能需要参考具体插件的文档来进行调整。
  • 插件的实际API可能与示例中的不同,请参考官方文档或插件的源代码来获取准确的API信息。
回到顶部