Flutter聊天消息时间戳插件 chat_message_timestamp 的使用

chat_message_timestamp 是一个用于在 Flutter 应用中显示带有时间戳和发送状态图标的消息的插件。本文将介绍如何使用该插件，并提供完整的示例代码。

预览

以下是插件支持的所有场景：

• 时间戳适合最后一行
• 时间戳不适合最后一行
• 带有发送状态图标的发送时间
• 消息的最大行数限制

开始使用

添加依赖

首先，在 pubspec.yaml 文件中添加 chat_message_timestamp 依赖：

dependencies:
  chat_message_timestamp: ^最新版本号

然后，导入该包：

import 'package:chat_message_timestamp/chat_message_timestamp.dart';

使用方法

您可以使用任何形状的容器（如 Container、Card 或自定义画笔），并为其添加一些填充即可。例如：

Container(
    color: Colors.blue,
    padding: const EdgeInsets.all(15.0),
    child: TimestampedChatMessage(
        text: '您的消息内容',
        sentAt: DateTime.now().formattedTimeHm, // 使用扩展方法格式化时间
    ),
)

该插件还提供了一个名为 formattedTimeHm 的扩展方法，用于格式化 DateTime 实例为字符串形式的时间戳（如：13:06）。

属性说明

以下是 TimestampedChatMessage 的属性说明：

• text: 消息文本，必需的 String
• sentAt: 消息时间戳，必需的 String
• style: 消息文本样式，可选的 TextStyle
• sentAtStyle: 时间戳文本样式，可选的 TextStyle
• sendingStatusIcon: 发送状态图标，可选的 Icon
• maxLines: 设置消息的最大行数，可选的 int
• delimiter: 如果消息需要显示“查看更多”按钮时使用的分隔符，默认为三个点，可选的 String
• showMoreText: “查看更多”按钮的文本，默认为“查看更多”，可选的 String
• showMoreTextStyle: “查看更多”按钮文本样式，可选的 TextStyle

示例代码

以下是一个完整的示例应用，展示了如何使用 chat_message_timestamp 插件：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const ChatScreen(),
    );
  }
}

class ChatScreen extends StatefulWidget {
  const ChatScreen({super.key});

  [@override](/user/override)
  State<ChatScreen> createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  late TextEditingController controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    controller = TextEditingController();
  }

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            children: [
              Expanded(
                child: ListView.separated(
                  padding: const EdgeInsets.all(15.0),
                  itemCount: messages.length,
                  itemBuilder: (_, index) {
                    final message = messages[index];
                    return Align(
                      alignment: message.isFromMe
                          ? Alignment.centerRight
                          : Alignment.centerLeft,
                      child: Container(
                        padding: const EdgeInsets.all(10.0),
                        constraints: BoxConstraints(maxWidth: size.width * 0.8),
                        decoration: BoxDecoration(
                          color: message.isFromMe
                              ? Colors.pinkAccent.shade200
                              : Colors.grey.shade400,
                          borderRadius: BorderRadius.circular(15.0),
                          boxShadow: [
                            BoxShadow(
                              color: Colors.grey.shade600,
                              offset: const Offset(0, 0),
                              blurRadius: 9,
                              spreadRadius: 0,
                            ),
                          ],
                        ),
                        child: TimestampedChatMessage(
                          text: message.text,
                          sentAt: message.sentAt.formattedTimeHm,
                          maxLines: 4,
                          showMoreTextStyle: const TextStyle(color: Colors.deepPurpleAccent),
                          style: TextStyle(
                            color: message.isFromMe ? Colors.white : Colors.black,
                            fontSize: 16,
                          ),
                          sendingStatusIcon: message.isFromMe ? message.sendingStatus.icon : null,
                        ),
                      ),
                    );
                  },
                  separatorBuilder: (_, __) => const SizedBox(height: 15),
                ),
              ),
              Row(
                children: [
                  Expanded(
                    child: TextField(
                      controller: controller,
                    ),
                  ),
                  const SizedBox(width: 5),
                  IconButton.filledTonal(
                    onPressed: () {
                      if (controller.text.trim().isNotEmpty) {
                        // 处理发送消息逻辑
                        sendMessage(controller.text);
                        controller.clear();
                      }
                    },
                    icon: const Icon(Icons.send),
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

// 示例消息数据结构
class Message {
  final String text;
  final DateTime sentAt;
  final bool isFromMe;
  final Icon? sendingStatus;

  Message({
    required this.text,
    required this.sentAt,
    required this.isFromMe,
    this.sendingStatus,
  });
}

List<Message> messages = [
  Message(
    text: "这是一个测试消息",
    sentAt: DateTime.now(),
    isFromMe: true,
    sendingStatus: const Icon(Icons.done_all, color: Colors.blue),
  ),
  // 可以继续添加更多消息
];