chat_flutter

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

语言：English

推荐您通过onCreated回调中的chatViewWidgetController控制器对记录列表进行add、remove等操作。

插件工具包支持以下平台，注⚠️部分功能非全平台支持：

• Android
• IOS
• WEB
• Windows
• Macos
• Linux

效果图

一、特点

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

展示内容支持以下基础内容：

• 图片 -> image
• 文件 -> file
• 文字 -> text
• 音频 -> audio
• 视频 -> video

二、安装

pub.dev 地址导航：

• pub.dev: https://pub.dev/packages/chat_flutter
• pub.flutter-io.cn: https://pub.flutter-io.cn/packages/chat_flutter -> (中国镜像地址)

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进行查看。

四、使用注意

1、本插件只提供展示，不提供功能的实现。如以下功能并未实现：

• 当展示记录内容为音频时，本插件并未实现音频的播放，需要使用者自己实现音频播放功能。

2、使用注意

• 本插件未对插件内容进行宽度、高度限制，故此您在使用的过程中需要对插件包裹的widget盒子进行设定宽高。

• 若你在使用的过程中，在release模式下出现渲染问题，请按照下方描述进行修改：

在您的项目项目/android/app/build.gradle文件中buildTypes的release模式添加如下代码：

buildTypes {
    release {
        signingConfig signingConfigs.debug
        // 添加如下代码
        shrinkResources false // 关闭代码混淆
        minifyEnabled false // 关闭资源缩小
    }
}

五、关于插件机型适配问题

本插件自身以flutter_screenutil插件为基础进行了多机型适配，故此您在使用的过程中不必担心在使用的过程中遇到UI错乱等问题，若您使用的机型未进行到适配，导致 UI 样式错乱等问题，您可以通过下方的联系方式联系我，以便为您提供帮助。

六、关于插件依赖问题

作者发现插件中使用的依赖有更新后，将在第一时间进行依赖更新。为了您在使用过程中有更顺畅的体验，建议您第一时间更新插件，或者在pubspec.yaml文件中版本号前添加^符号，以便使用最新版本的插件。

目前部分功能实现依赖于以下插件：

• flutter_screenutil
• photo_view
• video_player

七、关于自定义

此插件提供了高度的自定义，以方便您不满足时插件方面提供的功能及UI时进行自定义，以达到您的需求。

八、案例及详细使用参考指南

若您感觉到本页面提供的案例、使用帮助无法让您顺利成功上手此插件，您可以点击这里并进入example/lib/main.dart文件查看详细的使用案例。或者您可以通过下方的联系方式进行联系我。

九、API参数说明

ChatViewWidget 说明

ChatViewItem 说明

公共参数 API

头像-avatarModel -> ChatViewItemAvatarModel

加载过渡-commonParamModel -> CommonParamModel

下方为不同类型的参数 API

1、文本-textTypeModel -> ChatViewItemTextTypeModel

2、音频-audioTypeModel -> ChatViewItemAudioTypeModel

3、图片-imageTypeModel -> ChatViewItemImageTypeModel

4、文件-fileTypeModel -> ChatViewItemFileTypeModel

暂无额外参数。

5、视频-videoTypeModel -> ChatViewItemVideoTypeModel

IOS 额外配置

针对 IOS，你需要在 <project root>/ios/Runner/Info.plist 路径下的 Info.plist 文件中加入如下配置。

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

十、关于国际化

插件工具包本身涉及到的提醒、展示等固定文字内容已做语言坏境适配。目前仅支持以下语言环境：

• CH -> 中文 (默认)
• US -> 英文

如需进行切换及修改可参考采用下方代码形式进行修改：

import 'package:flutter_localizations/flutter_localizations.dart';

@override
Widget build(BuildContext context) {
    return MaterialApp(
        locale: const Locale('zh'),
        localizationsDelegates: const [
            GlobalMaterialLocalizations.delegate,
            GlobalWidgetsLocalizations.delegate,
            GlobalCupertinoLocalizations.delegate
        ],
        supportedLocales: const [Locale('zh', 'CH')],
    );
}

Tips: 上述代码中flutter_localizations的工具包需要您自己手动安装。

十一、联系作者

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

• github
• gitee