chat_flutter

这是一个纯粹为dart开发的组件包，用于展示聊天记录列表，支持图片、文件、语音、视频和文字的基本内容展示。

渲染

Characteristic

该工具组件可以展示聊天记录，常用于展示聊天记录内容。

显示内容支持以下基本内容

  • 图片 -> image
  • 文件 -> file
  • 文字 -> text
  • 音频 -> audio
  • 视频 -> video <–> 目前不支持

安装

pub.dev 地址导航：

1、

您可以在pubspec.yaml文件中直接在dependencies下添加以下内容进行安装。

chat_flutter: ^1.0.0

如下

dependencies:
  chat_flutter: ^1.0.0

2、

您也可以在项目根目录下执行以下命令从终端安装

flutter pub add chat_flutter

使用

在需要页面引入

import 'package:chat_flutter/chat_flutter.dart';

完整使用案例

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

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
            children: [
                Expanded(
                    child: ChatViewWidget()
                )
            ],
        ),
    );
  }
}

更多使用案例可以在 这里 点击进入/example/lib/main.dart查看。

使用注意事项

本插件仅提供展示，不提供功能实现。如果以下功能未实现

  • 当展示的录制内容为音频时，本插件未实现音频播放，用户需要自行实现音频播放功能。

本插件不对插件内容设置宽度或高度限制，您需要将插件用widget包裹起来设置宽度和高度。

关于插件模型的适配

本插件本身使用了flutter_screenutil基于插件，适配了多种模型，所以您在使用过程中不用担心遇到UI错乱等问题，如果您的使用模型没有适配好，导致UI出现样式错乱等问题，您可以通过下方的联系方式联系我进行提供帮助。

关于插件依赖问题

作者发现插件中使用的依赖更新后，会及时更新。为了在使用过程中获得更流畅的体验，建议您尽快更新插件，或者在pubspec.yaml文件中在版本号前添加^符号，以使用最新版本的插件。

关于自定义

本插件提供了高度的自定义性，方便您在不满意插件提供的功能UI时进行自定义，以满足您的需求。

案例与详细使用参考指南

如果您觉得本页面提供的案例与使用帮助不能帮助您成功上手使用本插件，您可以点击 这里 并进入example/lib/main.dart文件查看详细使用案例。或者您也可以通过下方的联系方式与我联系。

API 参数说明

ChatViewWidget 说明

名称 类型 描述 默认值
children List<ChatViewItem> 记录列表 []
isNeedScrollBottom 布尔值 初次渲染时是否滑动到底部 假
onCreated Function(ScrollController chatViewWidgetController) 创建完成时，返回一个ScrollController类型的列表控制器 —

ChatViewItem 说明

通用参数API

名称 类型 描述 默认值
itemBody dynamic 内容。根据itemBodyType类型传递的内容不同。当itemBodyType = ChatViewItemRecordBodyType.audio时，时间可能不传递，详细使用可以参考案例。 —
senderRight 布尔值 是否在右侧 真
avatarPath 字符串 头像地址，不传递时为默认值，若不传递将使用内置图标头像方案 —
defaultAvatarPath 字符串 默认头像地址 —
isAvatarShow 布尔值 是否显示头像 真
avatarSize 双精度 头像大小 适配了45
avatarColor 颜色 头像颜色 —
customAvatar Widget 自定义头像 —
customRecordTimeWidget Widget 自定义时间记录widget —
customRecordTimeStyle TextStyle 自定义时间记录样式 —
chatViewItemRecordBodyBoxConstraints BoxConstraints 内容主体约束 —
itemBodyType ChatViewItemRecordBodyType 当前记录内容类型 text
customAvatarWidget Widget 自定义头像 —
itemBodyRecordTime 字符串 记录时间 —
backgroundColor 颜色 记录主体背景颜色 Colors.white
customItem Widget 自定义记录主体 —
avatarTap 功能 头像点击回调 —
itemBodyTap 功能 内容主体点击事件 —
itemBodyMediaTap Function(ChatViewItemRecordBodyType type) 文件、图片、音频、视频的点击事件 —

文本

名称 类型 描述 默认值
selectionControls TextSelectionControls 文本选择控制器。当isOpenTextSelect为true时才有效。 —
itemBodyTextStyle TextStyle 记录主体文本样式 TextStyle (color: const Color(0xff1989fa),fontSize: 16
isOpenTextSelect 布尔值 是否开启长按文本菜单 真
contextMenuBuilder Widget Function(BuildContext context, SelectableRegionState selectableRegionState) 显示工具菜单 —
onSelectionChanged Function(SelectedContent?) 长按文本菜单选择回调 —
createSelectableTextCallback Function(FocusNode focusNode) 可选的文本内容widget创建回调 —

音频

名称 类型 描述 默认值
audioTimelength 整数 音频时长 0
audioPlayStatus 布尔值 播放中 假

Image

无特殊参数说明。

视频

目前不支持。

联系作者

在使用过程中遇到问题，您可以点击 这里 issue提问或者通过下方联系方式联系我。当您看到您联系或者提问issue我会在第一时间回复并与您联系。

GitHub

查看 Github