包含flutter实现项目的词条-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

包含flutter实现项目的词条

Flutter之旅 02 - 创建第一个项目

Flutter项目可以用三种方式开发:

创新互联公司专业为企业提供德州网站建设、德州做网站、德州网站设计、德州网站制作等企业网站建设、网页设计与制作、德州企业网站模板建站服务,十年德州做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

可以根据自己的需求选择,由于之前一直做iOS开发,也做过RN项目开发,Mac上装过Android Studio 和 其他安卓模拟器 Genymotion ,所以我选择Android Studio开发工具,之前装的版本 3.0.1 比较老了,所以进行了升级 3.4 。

体验Flutter

PS:第一次创建项目可以成功,之后再执行这一步操作创建新的Flutter项目时,一直卡住,重启过很多次Android Studio一直都是这样,后面查询资料,发现自己没有同意使用 android-licenses ,可以通过下列命令验证,第一步,先验证:

第一步检测结果,发现是需要同意 android-licenses :

第二步执行同意命令,操作时会有很多个 android-licenses 需要同意:

第二步检测结果:

第三步再次验证,当得到以下截图中结果时,代表所有环境配置已经完成:

上述命令创建一个Flutter项目,项目名为 myapp ,在项目目录中,有安卓和iOS两个项目目录。

Android Studio中会列出所有已经连接了电脑的设备,包括安卓和iPhone。如果想在模拟器上运行,下面可以选择对应的模拟器,如图:

PS:如果想在模拟器上运行,需要先安装一个模拟器,选择Tools AVD Manager,如图:

然后选择Create Virtual Device,根据提示一步一步操作即可(建议翻墙条件下操作),添加完成后就可以在这个界面看到自己已经添加的模拟器,点击绿色的运行按钮,即可打开该模拟器:

编写一个非常精美的Flutter Todo-List项目

花费大概一个多月的时间,这个完全由Flutter编写的Todo-List项目总算初步完成了!现在,它终于要被开源出来了。

在开始介绍之前,先来简单的看一下真机运行效果吧

下面,针对使用者和开发者,我将来分别介绍一次

app中,可以在主题切换界面选择各种主题颜色进行切换,app自带六个默认主题,这些都是我经过多次尝试所挑选出来的颜色搭配。同时你也可以选择自定义主题颜色

在app中,每项任务都会带有一个图标,而app提供了所有 Flutter 自带的 Material design 风格的图标。这些图标,你同样可以进行任意颜色的自定义

在app中,有多项其他的操作是你可以进行自定义的

比如说主页测滑栏的头部展示内容。当然,还有一些其他的操作,就由你去自行体验了

当你完成了一项任务后,这个任务就会从主页转移到完成列表页面,在这里你可以看到任务的一些额外信息

那么,对于使用者的介绍就到这里结束

下面就是为广大开发者们介绍的时间了!

各位开发者们请扶好你们的秀发,下面就我来带领各位参观参观这个项目的内部构造

项目中使用了一些非常优秀的第三方库,也特别感谢这些开发者们,让我的发量保持健康

下面就是这些控件的信息

项目使用的状态管理框架是 codeProvider/code ,而整个项目的架构如下

看起来是不是和 Android 中的 MVP 模式很像呢?其实都差不多的,只是名字略有不同罢了,你也可以就把上面的模式当作是 MVP 模式。

Flutter 可以说是特别适合这种架构模式的,因为视图跟随数据而变化,你基本上不用去关心View,只要去对数据进行操作就好了。

项目目录结构如下:

先说明一下除了 lib 外的其他目录:

然后是 lib 目录

项目创建于6月21日,到如今发布1.0.0版本花了三十多天的时间,虽然我做过很多测试,解决了很多bug,但是时间确实不充裕。纰漏也会在所难免

所以如果使用过程中遇到什么问题,或者对于项目有什么好的建议,欢迎在app中的反馈界面提出来,也可以在下面留下评论,又或者在github上提issue。

项目的UI设计与后台接口均由我独自一人完成,所以这也是为什么时间不够的原因。不过目前项目中只是包含了两个自己写的接口,后续计划中应该会加入登录功能,到时候会有很多接口操作。

若有兴趣,请持续关注!

如果你觉得这个app不错,或者这个项目有帮助到你,不妨给这个项目一个Star吧。项目后面也会持续保持更新和维护!

ToDo-List

UI项目地址

密码:Aczh

4. VS Code创建flutter项目

如果和我一样,用惯了VS Code来开发项目的话,那就跟我一起来配置一下如何在VS Code里运行flutter项目。

1.在VS Code里安装扩展:

2.在VScode上打开打开终端,快捷键:Ctrl+~(Tab上一个键),在终端上输入:flutter create flutter_app02,即可创建完成!

也可以把之前的项目放到工作区

3.在终端中运行命令:flutter run

运行的时候你会发现手机提示你安装个app,点击安装完成,项目就在手机上显示了,下图是运行成功的提示。

下图是手机效果:

如果报错的话,运行下清缓存的命令:flutter clean,把文件夹.gradle删掉,然后flutter run重新跑下项目。

Flutter上线项目实战——Vap视频动画

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

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

video for youtube

video for qiniu

apk download

github


本文题目:包含flutter实现项目的词条
文章转载:http://kswsj.cn/article/dsdicec.html

其他资讯