大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
注:亮度调节和音量调节gif无法体现,功能是ok的,其次默认Icon锁的close和open实在难以分辨。
海州ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为成都创新互联公司的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:13518219792(备注:SSL证书合作)期待与您的合作!
环境:Flutter 2.8.1 channel stable ;Dart 2.15.1
需要音频播放器的看这里: Flutter音乐播放器
重点说下这个工具类,因为视频播放,涉及到状态改变有很多,笔者刚开始选择使用 InheritedWidget 来在众多的widget之间共享数据。但是总感觉这样有点繁琐,且不很优雅!
这里非广告,如果是使用 GetX 就很简单了,笔者也使用了 GetX 进行封装了,一泻千里的赶脚!,但是笔者还是那句话:刚开始接触Flutter的开发者不是很建议使用 GetX ,可以先熟悉下Flutter状态管理的基础原理再行使用。而且为了尽量简洁,还是不引入其他的第三方了。
我们选择对第三方插件进行封装的目的不外乎这几个:
于是笔者就写了一个工具类 VideoPlayerUtils ,专门且只用来处理播放器的所有业务。包括暂停、播放、跳转、调节音量、调节亮度、切换视频等操作。在所有的widget中不会引用关于 video_player 或其他第三方插件的任何信息, VideoPlayerUtils 负责widget与播放器之间的所有操作交互。后续优化迭代或更换播放器插件时,只需针对这个工具类进行修改,对所有widget不会有任何的影响,大大的解耦合了。
其中 VideoPlayerState :
提供以上的公共属性,可以通过 VideoPlayerUtils 来获取对应的值,使用 get 只读,使外界不会误修改这些属性,以保证数值的安全性。开发者可根据自身需要自行添加属性。
提供以上方法来处理播放器的所有业务。同样的开发者可根据自身需要自行添加或修改。
重点说下这个方法,是整个业务的核心方法,控制视频的播放或暂停。开发者只要遇到播放或暂停是均可调用此方法,具体是播放或暂停,内部根据传入的 url 自行判断,开发者不需要关心。
切换新视频也是使用此方法,传入的 url 与上次不一致,自动切换新视频。笔者可根据 statusListener 来监听播放状态的改变,以此处理自身逻辑。
这个也需要提下,视频播放器在播放新视频时会异步初始化,一般我们的操作是在 initState() 初始化,成功后再 setState() 。这里笔者遇到一个让人蛋疼的问题:
我们看 video_player 的使用:
VideoPlayer(controller) :widget中已经持有了controller。本来笔者封装的目的就是为了让widget与controller的之间解耦合。但此时的笔者。。。。
放弃不是不可能放弃的,这辈子都不会放弃的!
于是笔者取了巧,写了一个初始化监听器 initializedListener ,包换2个参数: bool,Widget ,初始化是否成功;其中widget为初始化成功返回需要展示的播放器UI,失败默认返回 const SizedBox() 。
到这里就可以简单使用了:
没看错,视频播放就是这么简单。
如果有更多的业务功能,笔者也按照自己的需求写了一套,同样的开发者可根据自身需要自行添加或修改。
VideoPlayerGestures 主要是处理手势的,比如快进、快退等跳转播放;左侧上下滑动调节亮度;右侧上下滑动调节音量;单击是否开启沉浸式播放,所有widget的隐藏与显示;双击播放、暂停等。
哦,还有 PercentageWidget 也放到这个文件下了,就是这玩意:
因为显示的百分比与手势相关,随着手势移动而更新。开发者可自行处理。
笔者处出于简单考虑,就按照整个UI的位置命名了。瞅一眼就知道是啥玩意。
同样的开发者可根据自身需要自行添加或修改。
就是这玩意:
同样的开发者可根据自身需要自行添加或修改。话说这个锁的 Icon 的open和close是真的难分辨!
就是这玩意:
同样的开发者可根据自身需要自行添加或修改。
这玩意是自定义的,别问,问就是跟产品干一架落了下风
主要就是自定义这玩意:
同样的开发者可根据自身需要自定义。
注:这里没有添加缓冲的进度,开发可查看 video_player 中的源码 VideoProgressIndicator ,按业务自行定义。
这玩意就是整合以上的widget,再考虑下全屏的安全区域,没啥东西。开发者可自行处理!
具体的实现监听器的思路, 看这里 。
自此一个漂亮的Flutter视频播放器就已经结束了。如果您觉得对您有些许帮助的话,欢迎 Star !
对于每一个开发者而言,开发工具就相当于他们的武器,选择一个合适的工具能够帮助我们在工作时事半功倍,在互联网逐渐发展成熟的今天,越来越多的开发工具供我们选择,但其中总有一些更好用的,如何选择成为了一大难题。
从而颁布了2021年StackShare第八届顶级工具奖,快来看看有没有你青睐的开发工具吧。
年度最佳新兴工具
1.FastAPI
FastAPI 是一个使用 Python3.6+ 构建 Web API 的高性能框架。根据框架创建者的说法,FastAPI 性能与 NodeJS 或 Golang 相当。
2.GitHub Copilot
作为一款 AI 结对编程工具,Copilot 的主要定位是提供类似 IntelliSense/IntelliCode 的代码补全与建议功能,但在实际表现上有望超越同样由微软合作伙伴 OpenAI 开发的 Codex AI 系统。
3.FiglamFigma
Figma 是一个 基于浏览器 的协作式 UI 设计工具,从推出至今越来越受到 UI 设计师的青睐,也有很多的设计团队投入了Figma 的怀抱,
4.Logtail
Logtail是日志服务提供的日志采集Agent,用于采集阿里云ECS、自建IDC、其他云厂商等服务器上的日志。本文介绍Logtail的功能、优势、使用限制及配置流程等信息。
5.Coder
开发人员工作区平台·
6.Charts.csscss
Charts.css 是用于数据可视化的开源 CSS 框架,帮助用户理解数据,帮助开发人员使用简单的 CSS 类将数据转换为漂亮的图表。·
7.Counter
简单并且免费的网络分析·
8.React Query
React Query是一个库,可为任何类型的异步数据提供ReactJS状态管理功能。根据他们的官方文件,·
9.vscode.dev
将VS Code引入浏览器,构建一个可以在浏览器中完全无服务器运行的开发工具。
10.BookStack
BookStack 是一个开源的、基于 Laravel + Vue.js 构建的知识管理和服务平台。具有简单但功能强大的所见即所得编辑器,允许团队轻松创建详细且有用的文档。·
11.ThunderClient
Thunder Client 为我们提供了一款轻量级、易用、整洁、简单的 Rest API 客户端扩展。·我们可以利用 Thunder Client 在编辑器内快速测试代码库的 API 端点,从而最大限度地减少页面的切换。它可以替代 Postman,作为常用的无脚本测试工具。
12.Quod AI
Quod AI Code Search是一个由人工智能驱动的Chrome扩展,可以自动从Git存储库或Jira问题中搜索代码。
它使用问题的标题和描述,并自动在你的Git存储库中找到匹配的内容。
13.Dendron
Dendron 是典型的开源社区编程思维的解决方案,虽然初看起来有一点学习曲线,但从根本上是给了使用者最大的自由发挥空间,同时又提供了最强大和最彻底的工具生态支持。·
14.Notion API
把概念和你每天使用的工具联系起来·
15.Github1s
只需1秒,就可以用VS Code方式来看GitHub代码。·
16.Ocean
容器的无服务器基础架构引擎·
17.Magic
快速构建应用程序,可定制,无密码登录
·
18.Jina
更简单的一种在云上构建神经搜索的方法,
19.Focalboard
一款开源、本地存储、免费的类 Notion 应用Focalboard 的自我定位是“Trello、Notion 和 Asana 的开源、自托管替代品”。·
20.zx
更好地编写脚本的工具(By Google)
21.OpenSearh
OpenSearch是阿里云开放搜索简称,为解决用户结构化数据搜索需求的托管服务,支持数据结构、搜索排序、数据处理自由定制。·
22.Querybook
一个可以发现、创建和共享数据分析、查询以及表的大数据IDE(通过Pinterest),
23.MangoDB
MongoDB是一款为web应用程序和互联网基础设施设计的数据库管理系统。MongoDB就是数据库,是NoSQL类型的数据库
24.TooIJet
Retool的开源替代品·
25.Kitemaker
Kitemaker是为团队而非经理创建的超快速问题跟踪器。为远程团队创建的Jira的快速替代方案·
26.Appflowy
Appflowy 是一款使用 Flutter 和 Rust 构建的开源笔记软件,它支持Windows、macOS和Linux,可以免费下载使用
27.Kubegres
Kubegres 是一个 Kubernetes Operator,用来部署并维护 PostgreSql 集群,提供开箱即用的数据复制和故障转移功能,简化 PostgreSql 集群生命周期管理,降低数据复制的复杂性
28.Lightning Web Components
Lightning Web Components,业内简称LWC,是Salesforce于Spring 19发布的一款新型Lightning Component,快速的企业级Web组件基础
29.Judo
用无代码构建原生应用体验
30.Apache APISIX
Apache APISIX Apache APISIX是一个动态、实时、高性能的API网关。提供了丰富的流量管理功能,如负载均衡、动态上游、canary释放、断路、认证、可观察性等。
31.Control
提供免费的加速、自动化安全性以及SOC2合规
32.Remix
专注于Web技术和现代 用户体验的框架
33.NocoDB
免费并且开源的Airtable替代方案
34.JetBrainsQodana
评估你拥有的、合同或购买的代码的完整性
35.TabnineAI
只能代码编写
36.Coolify
一个开源的,自适应的Heroku和Netlify的替代品
37.Penpot
开源设计和原型平台
38.Portman
Postman介绍:postman是一个开源的接口测试工具,无论是做单个接口的测试还是整套测试脚本的拨测都非常方便。
39.Devops Stack
持续部署Kubernetes环境
40.Slidev
面向开发人员的演示幻灯片
41.ReScript
ReScript 是一门针对 JavaScript 程序员的新语言,特别是对 TypeScript 和 Flow 的类型安全感兴趣的程序员。ReScript 的语法和 JavaScript 非常相似
42.Fig
自定完成终端
43.FlutterFlow
Flutterflow 是一个在线低码平台,使人们在视觉上以人们在视觉上构建本机移动应用程序。
44.Porter
运行在你自己的云中的Heroku
45.SigmaOS
在 SigmaOS 中,你会看到完全不同的浏览器布局,它更像是一个工作台
46.VictoeiaMetrics DB
快速、低成本的监控解决方案和时间序列数据库
47.CloudflarePages
JAMstack平台为前端开发者提供协作和部署网站的平台
48. Devbook
面向开发者的搜索引擎
49.Front Matter
直接在VS Code中管理静态站点
50.Supacase UI
用于企业仪表的React组件库
以上可以说是集结了开发行业中的所有“神器”,不仅能助力程序员高效工作,也是今后走向开发岗位小伙伴们的加薪工具。小伙伴可以从中挑选适合自己的工具~
Flutter支持稳定的桌面设备开发已经一段时间了,不得不说,Flutter多平台支持的特性真的很香。我本人并没有任何桌面开发的经验,但仍然使用Flutter开发出了一个桌面版小程序,功能很简单,就是对输入的json做格式化处理和转模型。
话不多说,先来看看实际效果。 项目源码地址
开发环境如下:
Flutter : 2.8.1
Dart : 2.15.1
IDE : VSCode
JSON作为我们日常开发工作中经常要打交道的一种数据格式,它共有6种数据类型: null , num , string , object , array , bool 。我们势必对它又爱又恨。爱他因为他作为数据处理的一种格式确实非常方便简洁。但是在我们做Flutter开发中,又需要接触到json解析时,就会感觉非常棘手,因为flutter没有反射,导致json转模型这块需要手写那繁杂的映射关系。就像下面这样子。
数据量少还能接受,一旦量大,那么光手写这个解析方法都能让你怀疑人生。更何况手写还有出错的可能。好在官方有个工具**json_serializable**可以自动生成这块转换代码,也解决了flutter界json转模型的空缺。当然,业界也有专门解析json的网站,可以自动生成dart代码,使用者在生成后复制进项目中即可,也是非常方便的。
本项目以json解析为切入点,和大家一起来看下flutter是如何开发桌面应用的。
要让我们的flutter项目支持桌面设备。我们首先需要修改下flutter的设置。如下,让我们的项目支持 windows 和 macos 系统。
接下来使用 flutter create 命令创建我们的模版工程。
创建完项目后,我们就可以 run 起来了。
先来看下整体界面,界面四块,分别为功能模块、文件选择模块、输入模块、输出模块。
我们在新建一个桌面应用时,默认的模版又一个Appbar,此时应用可以用鼠标拖拽移动,放大缩小,还可以缩到很小。但是,我们一旦去掉这个导航栏,那么窗口就不能用鼠标拖动了,并且我们往往不希望用户将我们的窗口缩放的很小,这会导致页面异常,一些重要信息都展示不全。因此这里需要借助第三方组件 bitsdojo_window 。通过 bitsdojo_window ,我们可以实现窗口的定制化,拖动,最小尺寸,最大尺寸,窗口边框,窗口顶部放大、缩小、关闭的按钮等。
通过 InkWell 组件,可以捕捉到手势、鼠标、触控笔的移动和停留位置
这个功能是鼠标移动后的UI交互界面。要在窗口上显示一个提示框,可以使用 Overlay 。需要注意的是,由于在 Overlay 上的 text 的根结点不是 Material 风格的组件,因此会出现黄色的下划线。因此一定要用 Material 包一下 text 。并且你必须给创建的 OverlayEntry 一个位置,否则它将全屏显示。
读取说表拖拽的文件一开始想尝试使用 InkWell 组件,但是这个组件无法识别拖拽中的鼠标,并且也无法从中拿到文件信息。因此放弃。后来从文章《Flutter-2天写个桌面端APP》中发现一个可读取拖拽文件的组件 desktop_drop ,能满足要求。
使用开源组件 file_picker ,选完图片后的操作和拖拽选择图片后的操作一致。
Textfield 如果要显示富文本,那么需要自定义 TextEditingController 。并重写 buildTextSpan 方法。
在做导出功能时遇到下列报错,保存提示为没有权限访问对应目录下的文件。
通过Apple的开发文档找到有关权限问题的说明。其中有个授权私钥的key为 com.apple.security.files.downloads.read-write ,表示 对用户的下载文件夹的读/写访问权限 。那么,使用Xcode打开Flutter项目中的mac应用,修改工程目录下的 DebugProfile.entitlements 文件,向 entitlements 文件中添加 com.apple.security.files.downloads.read-write ,并将值设置为YES,保存后重启Flutter项目。发现已经可以向下载目录中读写文件了。
当然,这是正常操作。还有个骚操作就是关闭系统的沙盒机制。将 entitlements 文件的 App Sandbox 设置为NO。这样我们就可以访问任意路径了。当然关闭应用的沙盒也就相当于关闭了应用的防护机制,因此这个选项慎用。
原文地址:
使用这个版本的GetX写了Demo之后,发现有几个问题:
感觉不太像是稳定版本,存在一些比较明显的问题;而且2.0.6到2.0.7只是一个小版本,全局状态管理逻辑似乎就有比较大的改动。
不支持响应式编程,这个版本的状态管理还是基于state的逻辑;因为想要比较高效的解耦页面和逻辑,可能需要搭配响应式编程框架。
相关功能可能比较少,没有最新版本的功能那么全面。
Flutter是Google开源的构建用户界面(UI)工具包,帮助开发者通过一套代码库高效构建多平台精美应用,支持移动、Web、桌面和嵌入式平台。
Flutter 开源、免费,拥有宽松的开源协议,适合商业项目。Flutter已推出稳定的2.0版本。
产生背景:
Flutter可以方便的加入现有的工程中。在全世界,Flutter 正在被越来越多的开发者和组织使用,并且 Flutter是完全免费、开源的。它也是构建未来的 Google Fuchsia 应用的主要方式。
Flutter组件采用现代响应式框架构建,这是从React中获得的灵感,中心思想是用组件(widget)构建你的UI。
组件描述了在给定其当前配置和状态时他们显示的样子。当组件状态改变,组件会重构它的描述(description),Flutter 会对比之前的描述, 以确定底层渲染树从当前状态转换到下一个状态所需要的最小更改。
因项目需要用到加解密,然后研究了下flutter大部分是用原生实现加解密的,但是这样不是我想要的,后面找资料发现dart有一个加密工具 encrypt 。然后研究了下,可以实现我们大部分加解密。
使用Dart实现加解密,有对称加密AES,非对称加密RSA。
工具类封装了AES加解密,RSA加解密和数字签名,RSA也实现分段加解密。
一、导包
二、工具类