Flutter聊天消息处理插件chat_message的使用

发布于 1周前 作者 ionicwang 来自 Flutter

Flutter聊天消息处理插件chat_message的使用

在本教程中,我们将展示如何使用chat_message插件来实现一个简单的聊天应用。该插件可以帮助我们处理聊天消息的展示和管理。

简介

chat_message是一个用于在Flutter应用中处理聊天消息的插件。它提供了方便的方法来展示和管理聊天消息列表。

使用步骤

1. 添加依赖

首先,在你的pubspec.yaml文件中添加chat_message插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  chat_message: ^1.0.0 # 请根据实际情况选择最新版本

然后运行flutter pub get以获取该插件。

2. 创建聊天控制器

创建一个ChatController实例来管理聊天消息列表。在初始化时,可以设置初始消息列表和其他参数。

import 'package:chat_message/core/chat_controller.dart';
import 'package:chat_message/models/message_model.dart';
import 'package:chat_message/widget/chat_list.dart';
import 'package:flutter/material.dart';

class _MyHomePageState extends State<MyHomePage> {
  late ChatController chatController;

  @override
  void initState() {
    super.initState();
    chatController = ChatController(
        initialMessageList: _messageList,
        scrollController: ScrollController(),
        timePellet: 60);
  }

  final List<MessageModel> _messageList = [
    MessageModel(
        ownerType: OwnerType.receiver,
        content: 'ChatGPT是由OpenAI研发的聊天机器人程序',
        createdAt: 1772058683000,
        id: 2,
        avatar: 'https://o.devio.org/images/o_as/avatar/tx2.jpeg',
        ownerName: 'ChatGPT'),
    MessageModel(
        ownerType: OwnerType.receiver,
        content: '介绍一下ChatGPT',
        createdAt: 1771058683000,
        id: 1,
        avatar: 'https://o.devio.org/images/o_as/avatar/tx18.jpeg',
        ownerName: 'Imooc')
  ];
}

3. 构建UI

build方法中,使用ChatList组件来展示聊天消息,并提供按钮来发送和加载更多消息。

class _MyHomePageState extends State<MyHomePage> {
  // ... 其他代码 ...

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: Text(widget.title),
        ),
        body: Column(
          children: [
            Expanded(
                child: ChatList(
              chatController: chatController,
              onBubbleLongPress: (MessageModel message, BuildContext context) {
                debugPrint('message: ${message.content}');
              },
            )),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                ElevatedButton(onPressed: _loadMore, child: Text('Load More')),
                ElevatedButton(onPressed: _send, child: Text('Send'))
              ],
            ),
            SizedBox(
              height: 20,
            )
          ],
        ));
  }

  void _send() {
    chatController.addMessage(MessageModel(
        ownerType: OwnerType.sender,
        content: 'Hello ${count++}',
        createdAt: DateTime.now().millisecondsSinceEpoch,
        avatar: 'https://o.devio.org/images/o_as/avatar/tx2.jpeg',
        ownerName: 'Imooc'));
    Future.delayed(const Duration(milliseconds: 2000), () {
      chatController.addMessage(
        MessageModel(
            ownerType: OwnerType.receiver,
            content: 'Nice',
            createdAt: DateTime.now().millisecondsSinceEpoch,
            avatar: 'https://o.devio.org/images/o_as/avatar/tx2.jpeg',
            ownerName: 'ChatGPT'),
      );
    });
  }

  int _counter = 0;

  void _loadMore() {
    var tl = 1772058683000;
    tl = tl - ++_counter * 1000000;
    final List<MessageModel> messageList = [
      MessageModel(
          ownerType: OwnerType.sender,
          content: 'Hello ${_counter++}',
          createdAt: DateTime.now().millisecondsSinceEpoch,
          avatar: 'https://o.devio.org/images/o_as/avatar/tx2.jpeg',
          ownerName: 'Imooc'),
      MessageModel(
          ownerType: OwnerType.receiver,
          content: 'Nice',
          createdAt: DateTime.now().millisecondsSinceEpoch,
          avatar: 'https://o.devio.org/images/o_as/avatar/tx2.jpeg',
          ownerName: 'ChatGPT')
    ];
    chatController.loadMoreData(messageList);
  }
}

4. 消息展示样式

你可以通过自定义消息组件来改变消息的展示样式。例如,下面是一个简单的消息展示组件:

Widget _buildMessageWidget(MessageModel message) {
  return Container(
    margin: EdgeInsets.all(5),
    padding: EdgeInsets.only(top: 15, bottom: 15),
    decoration: BoxDecoration(
        color: message.ownerType == OwnerType.receiver
            ? Colors.amberAccent
            : Colors.blue),
    child: Text('${message.ownerName} ${message.content} ${message.avatar}'),
  );
}

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

1 回复

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


当然,下面是一个关于如何使用Flutter聊天消息处理插件chat_message的示例代码。请注意,由于chat_message不是一个广泛知名的官方或社区维护的插件,以下示例将基于一个假设的插件接口进行编写。实际使用时,你需要参考该插件的官方文档和API。

假设chat_message插件提供了以下主要功能:

  • 发送消息
  • 接收消息
  • 显示消息列表
  • 标记消息为已读/未读

以下是一个简单的Flutter应用示例,展示如何使用这些功能:

1. 添加依赖

首先,在你的pubspec.yaml文件中添加chat_message依赖(请注意,这里使用的是假设的包名):

dependencies:
  flutter:
    sdk: flutter
  chat_message: ^1.0.0  # 假设的版本号

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

2. 导入插件并初始化

在你的主文件(例如main.dart)中导入插件:

import 'package:flutter/material.dart';
import 'package:chat_message/chat_message.dart';

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

3. 创建聊天界面

接下来,创建一个简单的聊天界面,展示如何使用chat_message插件的功能:

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

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

class _ChatScreenState extends State<ChatScreen> {
  final ChatMessageController _chatController = ChatMessageController();
  List<ChatMessage> _messages = [];

  @override
  void initState() {
    super.initState();
    // 监听新消息
    _chatController.onNewMessage.listen((message) {
      setState(() {
        _messages.insert(0, message); // 新消息插入到列表顶部
      });
    });

    // 加载历史消息(假设有一个获取历史消息的方法)
    _loadMessages();
  }

  @override
  void dispose() {
    _chatController.dispose();
    super.dispose();
  }

  Future<void> _loadMessages() async {
    // 假设有一个获取历史消息的方法
    List<ChatMessage> history = await _chatController.loadHistory();
    setState(() {
      _messages = history;
    });
  }

  void _sendMessage(String text) {
    ChatMessage message = ChatMessage(
      sender: 'Me',
      text: text,
      timestamp: DateTime.now(),
      isRead: false, // 发送时默认为未读(对方视角)
    );
    _chatController.sendMessage(message);
    setState(() {
      _messages.insert(0, message.copyWith(isRead: true)); // 发送者标记为自己的消息为已读
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chat Screen'),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: ListView.builder(
              itemCount: _messages.length,
              itemBuilder: (context, index) {
                ChatMessage message = _messages[index];
                return ListTile(
                  leading: CircleAvatar(
                    child: Text(message.sender[0]),
                  ),
                  title: Text(message.text),
                  subtitle: Text(
                    '${message.timestamp.toLocal().toString().split(' ')[1]}',
                    style: TextStyle(color: Colors.grey),
                  ),
                  trailing: Icon(
                    message.isRead ? Icons.done : Icons.not_interested,
                    color: message.isRead ? Colors.green : Colors.red,
                  ),
                );
              },
            ),
          ),
          Divider(),
          TextField(
            onSubmitted: (text) {
              _sendMessage(text);
            },
            decoration: InputDecoration(
              border: OutlineInputBorder(),
              labelText: 'Send a message',
            ),
          ),
        ],
      ),
    );
  }
}

// 假设的ChatMessage类
class ChatMessage {
  final String sender;
  final String text;
  final DateTime timestamp;
  final bool isRead;

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

  ChatMessage copyWith({String? sender, String? text, DateTime? timestamp, bool? isRead}) {
    return ChatMessage(
      sender: sender ?? this.sender,
      text: text ?? this.text,
      timestamp: timestamp ?? this.timestamp,
      isRead: isRead ?? this.isRead,
    );
  }
}

// 假设的ChatMessageController类
class ChatMessageController {
  // 监听新消息的Stream
  final StreamController<ChatMessage> _newMessageController = StreamController<ChatMessage>();
  Stream<ChatMessage> get onNewMessage => _newMessageController.stream;

  // 发送消息的方法(这里只是模拟,实际应发送到服务器)
  void sendMessage(ChatMessage message) {
    // 模拟服务器返回消息(这里直接触发新消息事件)
    _newMessageController.add(message.copyWith(sender: 'Other')); // 假设对方名为'Other'
  }

  // 加载历史消息的方法(这里只是模拟)
  Future<List<ChatMessage>> loadHistory() async {
    return Future.delayed(Duration(seconds: 1), () {
      return [
        ChatMessage(sender: 'Other', text: 'Hello!', timestamp: DateTime.now().subtract(Duration(minutes: 5)), isRead: true),
        ChatMessage(sender: 'Me', text: 'Hi!', timestamp: DateTime.now().subtract(Duration(minutes: 3)), isRead: true),
      ];
    });
  }

  void dispose() {
    _newMessageController.close();
  }
}

注意事项

  1. 插件接口:上述代码中的ChatMessage类和ChatMessageController类是基于假设的插件接口编写的。实际使用时,你需要根据chat_message插件的实际API进行调整。
  2. 错误处理:示例代码中没有包含错误处理逻辑。在实际应用中,你应该添加适当的错误处理来确保应用的健壮性。
  3. UI设计:示例中的UI设计非常简单,仅用于演示。在实际应用中,你可能需要设计更复杂的UI来满足用户需求。

希望这个示例能帮助你开始使用chat_message插件进行聊天消息处理。如果你遇到任何问题或需要进一步的帮助,请查阅该插件的官方文档或寻求社区支持。

回到顶部