使用 chat_flutter 进行聊天记录展示

news/2024/3/29 21:31:56/文章来源:https://blog.csdn.net/qq_44500360/article/details/130364787

请添加图片描述

前言

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

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

效果图

image.png

image.png

地址

  • github: https://github.com/xiaorui-23/chat_flutter
  • gitee: https://gitee.com/xiaorui-23/flutter_chat
  • pub.dev: https://pub.dev/packages/chat_flutter
  • pub.flutter-io.cn: https://pub.flutter-io.cn/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上就可以了。

目前只支持textfileimageaudio类型的记录内容展示,后期可能会实现相关的功能。

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_103645.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

selenium_交互 (谷歌浏览器驱动下载 xpath插件安装)

安装selenium &#xff08;1&#xff09;查看谷歌浏览器版本 谷歌浏览器右上角 ‐‐> 帮助 ‐‐> 关于 查看 浏览器版本&#xff1a; &#xff08;2&#xff09;操作谷歌浏览器驱动下载地址 http : // chromedriver . storage . googleapis . com / index . html 找到…

YOLOv5网络模型的结构原理讲解(全)

目录 前言1. 基本概念2. 输入端2.1 Mosaic 图像增强2.2 自适应锚框计算2.3 自适应图片缩放 3. Backbone层3.1 Focus结构3.2 CSP结构 3. Neck网络3.1 SPP结构3.2 PAN结构 4. 输出端4.1 Bounding box损失函数4.2 NMS非极大值抑制 前言 YOLOv5有几种不同的架构&#xff0c;各网络…

Qt信号槽原理

Qt之信号槽原理 一.概述 所谓信号槽&#xff0c;实际就是观察者模式。当某个事件发生之后&#xff0c;比如&#xff0c;按钮检测到自己被点击了一下&#xff0c;它就会发出一个信号&#xff08;signal&#xff09;。这种发出是没有目的的&#xff0c;类似广播。如果有对象对这…

Openswan安装和简单配置

Openswan安装和简单配置 安装环境&#xff1a; 操作系统&#xff1a;Ubuntu20.0.4TLS 用户权限&#xff1a;root下载Openswan: wget https://github.com/xelerance/Openswan/archive/refs/tags/v3.0.0.zip安装Openswan: 解压Openswan&#xff1a;&#xff08;PS&#xff1a…

银行数字化转型导师坚鹏:商业银行数字化风控(2天)

商业银行数字化风控 课程背景&#xff1a; 数字化背景下&#xff0c;很多银行存在以下问题&#xff1a; 不清楚商业银行数字化风控发展现状&#xff1f; 不清楚对公业务数字化风控工作如何开展&#xff1f; 不知道零售业务数字化风控工作如何开展&#xff1f; 课程特色…

海光信息业绩高歌猛进,但其作为国产CPU龙头的“地基”并不牢固

‍数据智能产业创新服务媒体 ——聚焦数智 改变商业 在“芯片寒冬”的大背景下&#xff0c;2022年全球头部芯片半导体公司纷纷下调业绩预期&#xff0c;英特尔、英伟达、美光等无一幸免。但是随着AIGC异军突起&#xff0c;仿佛寒冬中的一股暖流&#xff0c;催生着半导体市场行…

C. Trailing Loves (or L‘oeufs?)(求某个质因子在n的阶乘中的个数 + 思维)

Problem - C - Codeforces Aki喜欢数字&#xff0c;尤其是那些带有尾随零的数字。例如&#xff0c;数字9200有两个尾随零。Aki认为数字拥有的尾随零越多&#xff0c;它就越漂亮。 然而&#xff0c;Aki认为&#xff0c;一个数字拥有的尾随零的数量并不是固定的&#xff0c;而是…

idea中导入spring源码;在spring源码中添加注释

标题&#xff1a;idea中导入spring源码;在spring源码中添加注释 我是跟着他操作的&#xff0c;下文是一些补充说明&#xff1a; 这个也可以借鉴 gradle下载链接【使用网盘下载】,不过有的没有&#xff0c; gradel下载链接&#xff1a;这个比较全 1.Spring源码编译环境 spr…

Karl Guttag:现有Micro LED/LCoS+光波导AR眼镜对比解析

轻量化是未来AR眼镜的发展趋势&#xff0c;为了缩减尺寸&#xff0c;AR眼镜厂商尝试了多种方案&#xff0c;长期来看Micro LED光机在小型化上更有优势&#xff0c;但现阶段LCoS光机的图像表现更好。在CES 2023期间&#xff0c;DigiLens、Lumus、Vuzix、OPPO、Avegant也展出了不…

linux编译安装python的全过程,pip python不与linux系统环境混乱

因为使用要求&#xff0c;使得我需要在linux环境下安装一个独立的python环境&#xff0c;不干扰其他环境。 预安装 在安装python之前&#xff0c;请在linux系统下安装下面这些包&#xff1a; sudo apt-get install namelibssl-dev libcurl4 libcurl4-openssl-dev zlib-devel…

27-Servlet执行原理

目录 1.Tomcat详解 ①接收请求&#xff1a; ②根据请求计算响应&#xff1a; ③返回响应&#xff1a; 2.Tomcat执行流程 2.1.Tomcat 初始化流程 2.2.Tomcat 处理请求流程 2.3.Servlet 的 service 方法的实现 在 Servlet 的代码中并没有写 main ⽅法&#xff0c;那么对应…

【C++关联容器】map的成员函数

目录 map 1. 构造、析构和赋值运算符重载 1.1 构造函数 1.2 析构函数 1.3 赋值运算符重载 2. 迭代器 3. 容量 4. 元素访问 5. 修改器 6. 观察者 7. 操作 8. 分配器 map map是关联容器&#xff0c;它按照特定的顺序存储由关键字值和映射值的组合形成的元素。 在一…

【Springboot系列】项目启动时怎么给mongo表加自动过期索引

1、前言 在之前操作mongo的过程中&#xff0c;都是自动创建&#xff0c;几乎没有手动创建过表。 这次开发中有张表数据量大&#xff0c;并且不是特别重要&#xff0c;数据表维护一个常见的问题是过期数据没有被及时清理&#xff0c;导致数据量过大&#xff0c;查询变得缓慢。…

LeetCode-242. 有效的字母异位词

题目链接 LeetCode-242. 有效的字母异位词 题目描述 题解 题解一&#xff08;Java&#xff09; 作者&#xff1a;仲景 首先&#xff0c;满足条件的情况下&#xff0c;两个字符串的长度一定是相等的&#xff0c;不相等一定不满足条件 使用Hash表来存储字符串s中各个字符出现的…

Spring Security实战(九)—— 使用Spring Security OAuth实现OAuth对接

一、OAuth2.0介绍 OAuth2.0是一种授权协议&#xff0c;允许用户授权第三方应用程序代表他们获取受保护的资源&#xff0c;如个人信息或照片等。它允许用户授权访问他们存储在另一个服务提供商上的资源&#xff0c;而无需将其凭据共享给第三方应用程序。OAuth2.0协议建立在OAuth…

【具体到每一步】从0制作一个uniapp的新闻类页面(界面篇)

目录 项目初始化 / 基础配置 项目创建 配置路由/页面/tabbar pages.json配置tabbar 配置图标/静态资源 导航栏和字体颜色 scroll-view实现横向滚动条样式 公共模块定义components组件 新建组件 使用组件 组件里的结构 布局个人中心页面 组件差异化处理 数据传递 导航…

DevExpress:报表在winform窗体上显示(使用documentViewer控件)

一&#xff1a;控件认识 documentViewer&#xff08;版本DX22.2&#xff09;,老版本中的可能是printControl&#xff08;工具箱面板中可能找不到&#xff09;&#xff0c;通过官网搜索发现&#xff0c;这个控件现在继承于documentViewer这个控件。因此&#xff0c;使用documen…

Unity入门(一)

Unity Unity是一套完善体系与编辑器的跨平台游戏开发工具&#xff0c;也可以称之为游戏引擎。游戏引擎是指一些编写好的可以重复利用的代码与开发游戏所用的各功能编辑器。 基于C#编程&#xff0c;易上手&#xff0c;高安全性独特的面向组件游戏开发思想让游戏开发更加简单易…

【神经网络】tensorflow实验7--回归问题

1. 实验目的 ①掌握一元线性回归模型的实现方法 ②掌握多元线性回归模型的实现方法 ③掌握三维数据可视化方法 2. 实验内容 ①使用TensorFlow建立一元线性回归模型&#xff0c;使用商品房销售数据训练模型&#xff0c;并使用训练好的模型预测房价 ②使用TensorFlow建立多元线…

十、ElasticSearch 实战 - 源码运行

一、概述 想深入理解 Elasticsearch&#xff0c;了解其报错机制&#xff0c;并有针对性的调整参数&#xff0c;阅读其源码是很有必要的。此外&#xff0c;了解优秀开源项目的代码架构&#xff0c;能够提高个人的代码架构能力 阅读 Elasticsearch 源码的第一步是搭建调试环境&…