前言

最近需要实现一个聊天记录的页面展示，在网上发现没有适合自己的，于是自己就造了一个，总体感觉还不赖。

下面奉上地址、效果图和教程。

效果图

地址

github: /xiaorui-23/chat_fluttergitee: /xiaorui-23/flutter_chatpub.dev: https://pub.dev/packages/chat_flutterpub.flutter-: https://pub.flutter-/packages/chat_flutter -> 这个是pub.dev的国内镜像地址。

上手使用

import 'package:flutter/material.dart';import 'package:chat_flutter/chat_flutter.dart';void main() {runApp(MyApp());}class MyApp extends StatefulWidget {const MyApp({super.key});@overrideState<MyApp> createState() => _MyAppState();}class _MyAppState extends State<MyApp> {FocusNode? _focusNode;List<ChatViewItem> chatRecordList = [];@overridevoid initState() {super.initState();chatRecordList = [ChatViewItem(itemBody: "hello",),ChatViewItem(senderRight: false,itemBody: "Hi",),];}@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(centerTitle: true,// title: const Text('chat_flutter 插件展示案例'),),backgroundColor: const Color.fromARGB(255, 239, 238, 234),body: GestureDetector(onTap: () {if (_focusNode != null){_focusNode!.unfocus();}},child: Column(children: [Expanded(child: ChatViewWidget(isNeedScrollBottom: true,children: chatRecordList,onCreated: (chatViewWidgetController) {},)),],),),),);}}

文档地址

我觉得这个东西没有单独写一个文档并部署的必要，所以我就全程写在了上面地址中的README.md中。

最后

这个没有涉及到的原生的代码，全程都是dart的代码，所以实现其他还是非常简单的。只需要将写好的代码打包发布到pub.dev上就可以了。

目前只支持text、file、image、audio类型的记录内容展示，后期可能会实现相关的功能。

以上就是通过chat_flutter插件展示聊天记录的简单全过程啦，各位友友在使用本插件有任何问题都可以联系我，或者在github、gitee的仓库上发布issue这些都是没有问题的哦。

如果觉得《使用 chat_flutter 进行聊天记录展示》对你有帮助，请点赞、收藏，并留下你的观点哦！