成都创新互联网站制作重庆分公司

flutter新工具,flutter快速入门

Flutter是一个什么框架

Flutter是一个移动应用程序的软件开发工具包(SDK),具有以下特征:

创新互联公司成立于2013年,先为巴州等服务建站,巴州等地企业,进行企业商务咨询服务。为巴州企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

跨平台应用的框架,没有使用WebView或者系统平台自带的控件,使用自身的高性能渲染引擎自绘

简化版的浏览器,最大限度在android和ios上统一UI,包括业务逻辑和用户体验

开发语言使用dart,结合C, C++, 和Skia(2D渲染引擎)构建

支持hot reload,包含着完整的控件和工具链

一切皆控件,控件是每个Flutter应用程序的基本构建块,与分离视图、控制器、布局和其他属性的框架不同,Flutter具有一致的统一对象模型:控件。一个控件可以定义:结构元素(比如按钮或菜单)、风格元素(比如字体或颜色方案)、布局的方面(比如填充)、一些业务逻辑等

组合大于继承,控件本身通常由许多小型、单用途的控件组成,结合起来产生强大的效果,类的层次结构是扁平的,以最大化可能的组合数量

强化版的WebView,框架仅提供一个View层,大部分功能要依赖原生

目前只能够运行大部分Dart代码(不能引入dart:mirrors或dart:html库)

2021年最受程序员欢迎的开发工具TOP 50名单出炉-

对于每一个开发者而言,开发工具就相当于他们的武器,选择一个合适的工具能够帮助我们在工作时事半功倍,在互联网逐渐发展成熟的今天,越来越多的开发工具供我们选择,但其中总有一些更好用的,如何选择成为了一大难题。

从而颁布了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上线项目实战——Vap视频动画

透明视频动画是目前比较流行的实现动画的一种, 大厂也相继开源自己的框架,最终我们选中 腾讯vap ,它支持了Android、IOS、Web,为我们封装flutter_vap提供了天然的便利,并且它提供了将帧图片生成带alpha通道视频的工具,这简直太赞了。

VAP(Video Animation Player)是企鹅电竞开发,用于播放酷炫动画的实现方案。

video for youtube

video for qiniu

apk download

github

flutter为什么不推荐getx

使用这个版本的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真香,我用它写了个桌面版JSON解析工具

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。这样我们就可以访问任意路径了。当然关闭应用的沙盒也就相当于关闭了应用的防护机制,因此这个选项慎用。

原文地址:

Flutter视频播放器,简洁!

注:亮度调节和音量调节gif无法体现,功能是ok的,其次默认Icon锁的close和open实在难以分辨。

环境: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 !


网站名称:flutter新工具,flutter快速入门
浏览路径:http://cxhlcq.cn/article/dschjse.html

其他资讯

在线咨询

微信咨询

电话咨询

028-86922220(工作日)

18980820575(7×24)

提交需求

返回顶部