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实现项目的词条
URL地址：http://kswjz.com/article/dsdicec.html