前言
最近需要实现一个聊天记录的页面展示,在网上发现没有适合自己的,于是自己就造了一个,总体感觉还不赖。
下面奉上地址、效果图和教程。
效果图
地址
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 进行聊天记录展示》对你有帮助,请点赞、收藏,并留下你的观点哦!