Flutter聊天气泡插件flutter_basic_chat_bubble的使用

Flutter聊天气泡插件flutter_basic_chat_bubble的使用

此插件的目的是展示可自定义的聊天气泡。你可以以特定方式自定义这些气泡。目前这些气泡仅能显示文本消息。其他数据类型暂不支持。

使用方法

设置依赖

在pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter_basic_chat_bubble: ^0.2.0+2

安装

运行以下命令安装依赖：

flutter pub get

导入

在你的Dart文件中导入插件：

import 'package:flutter_basic_chat_bubble/flutter_basic_chat_bubble.dart';

使用

创建一个包含聊天气泡的列表视图。以下是完整的示例代码：

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

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

class BasicChatBubbleDemo extends StatelessWidget {
  // 创建一个包含示例聊天消息的列表
  final List<BasicChatMessage> messages = [
    BasicChatMessage(peerUserName: 'User1', messageText: 'Awsome message!', timeStamp: '12:00'),
    BasicChatMessage(peerUserName: 'User1', messageText: 'Awsome message!', timeStamp: 'Yesterday'),
    BasicChatMessage(peerUserName: 'User1', messageText: 'Awsome message!', timeStamp: 'Tue'),
    BasicChatMessage(peerUserName: 'User1', messageText: 'Awsome message!', timeStamp: 'Mon'),
    BasicChatMessage(peerUserName: 'User1', messageText: 'Awsome message!', timeStamp: 'Sun'),
  ];

  // 此小部件是应用程序的根。
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Basic Chat Bubble Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        body: ListView.builder(
          itemCount: messages.length,
          itemBuilder: (BuildContext context, int index) {
            return BasicChatBubble(
              message: messages[index],
              isMe: index % 2 == 0, // 每第二个气泡将isMe标志设置为true
              backgroundColor: (index % 2 == 0 ? Colors.green[400] : Colors.blue)!, // 根据索引设置背景颜色
              textColor: Colors.white,
              buttonWidget: index == messages.length - 1
                  ? InkWell(
                      child: CircleAvatar(
                        backgroundColor: Colors.red,
                        child: Icon(
                          Icons.video_call,
                          color: Colors.white,
                        ),
                      ),
                      onTap: () {
                        print('Button tapped $index');
                      })
                  : null,
              buttonText: 'Make a Call', // 如果需要显示按钮文本
            );
          },
        ),
      ),
    );
  }
}

属性

以下是BasicChatBubble组件的属性：

final BasicChatMessage message;
final bool isMe;
final Color backgroundColor;
final Color textColor;
final Widget buttonWidget;
final String buttonText;

message

message属性包含一个表示消息内容的对象。它定义如下：

/// `BasicChatMessage` 类代表单个消息，形成 `[BasicChatBubble]` 的内容。
/// 此对象具有以下属性：
/// `String peerUserName` 包含对方用户的名称（发送或接收消息的人）
/// `String ownUserName` 包含自己的用户名
/// `String messageText` 包含消息的文本
/// `DateTime timeStamp` 是消息发送的时间/日期
class BasicChatMessage {
  String peerUserName;
  String messageText;
  String timeStamp;

  BasicChatMessage({this.peerUserName, this.messageText, this.timeStamp});
}

isMe

此参数指示应用程序的用户是否是消息的发送者。它确定气泡的位置：

• true: 气泡右对齐
• false: 气泡左对齐

backgroundColor

此属性定义聊天气泡的背景颜色。

textColor

通过此属性可以设置聊天气泡中文本元素的颜色。

嵌入按钮到聊天气泡

在某些情况下，可能希望在聊天气泡内嵌入一个按钮。想象一下带有视频或电话功能的消息应用。

这可以通过在buttonWidget 和 buttonText 参数中指定一个用于此目的的控件来实现。

buttonWidget

在此处指定一个应作为按钮使用的控件。通常你会使用一个InkWell小部件使其可点击。

示例：

InkWell(
    child: CircleAvatar(
        backgroundColor: Colors.red,
        child: Icon(
            Icons.video_call,
            color: Colors.white,
        ),
    ),
    onTap: () {
        print('Button tapped $index');
    }
)