项目概述:
在之前https://www.cnblogs.com/webor2006/p/13395629.htmlFlutter的基础学习文末也提到会进行一个Flutter全新的项目实战学习,所以随着这篇的开撸实战正式开启,这次的项目相比之前写的开源中国来说就要正式化一点,只有正式化的项目操练才能让自己以商业化的角度来谨慎对待它,当然学到的技术也是跟工作当中的所用的最最接近,先来看一下此次的项目效果截图:
![](https://i-blog.csdnimg.cn/blog_migrate/4f13db7e506389081cccec7637239b19.png)
![](https://i-blog.csdnimg.cn/blog_migrate/6234fb6790bcd7dea37bb367910912b5.png)
![](https://i-blog.csdnimg.cn/blog_migrate/9296a2b16f1ecf108fa653169b640ec5.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d06a96507a645f47e2432884f03611ba.png)
![](https://i-blog.csdnimg.cn/blog_migrate/bcc41fe9e016014897e202b869023ab6.png)
![](https://i-blog.csdnimg.cn/blog_migrate/99a1c79ea4d3cd79a532bcfea01cf33f.png)
可以看到整体的风格还是很舒服的,功能也比较全面,还是很刺激的,接下来从0开始用Flutter来实现这么一个项目实战,相信通过它自己Flutter实操的水准一定会新上一个台阶滴~~
创建目录:
在之前Flutter的学习是采用flutter的命令来创建的项目,这次咱们用Android Studio的向导进行,如下:
![](https://i-blog.csdnimg.cn/blog_migrate/de050300f18ea2451311ddf7135e1a78.png)
![](https://i-blog.csdnimg.cn/blog_migrate/6844e9c19b3e13cf4db9c756c31b9a43.png)
![](https://i-blog.csdnimg.cn/blog_migrate/2953229f7c4bf0cd78711a1ddade246e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/1d79e1bf95cc4f5bc629e1b39eafa659.png)
点击完成时,发现报错了。。
![](https://i-blog.csdnimg.cn/blog_migrate/7841a88b1b1f17a886fb9718887cba4b.png)
出师不利呀。。提示找不到androidx,于是网上搜解决方案,经过查看这个贴子https://stackoverflow.com/questions/58236340/androidx-error-creating-new-flutter-project-in-android-studio貌似跟本地的Flutter sdk的版本有关,我本机确实是好久木有升级了,我本机的版本瞅一下:
![](https://i-blog.csdnimg.cn/blog_migrate/e6216a677d5e1beed3f018715ef10bfd.png)
![](https://i-blog.csdnimg.cn/blog_migrate/db86693d393b1904975323f050a192ea.png)
而官网最新的版本看一下:
![](https://i-blog.csdnimg.cn/blog_migrate/22124063811fcdc7c97b487f9bb406bd.png)
,所以先将它升级看一下是否能解决,但是发现卡住升级不了。。
![](https://i-blog.csdnimg.cn/blog_migrate/794a0de4c2edd93ab4f10f0813384b31.png)
算了,不用这种方式了,直接下载离线包替换一下本机,直接下载目前的最新包:
![](https://i-blog.csdnimg.cn/blog_migrate/e3316d68392834c2740cd4205e181c4c.png)
再创建果真成功了,接下来运行保证工程可以正常运行,当然可以啦,经典默认的界面如下:
![](https://i-blog.csdnimg.cn/blog_migrate/3cade8c6f84d0e5a18e4499a2b81975a.png)
目录结构:
在正式进行功能开发之前,先来对咱们的工程目录进行一个定义,也就是哪些文件该放在哪一个目录中进行分层管理,而不是对于新建的dart文件随便乱放,在写任何项目其实框架的搭建是非常重要的,所以接下来先对目录进行一下划分:
config:
新建一个config目录,存放项目中用到的一些配置信息,如下:
![](https://i-blog.csdnimg.cn/blog_migrate/83e28707f824b6a96f705d8f9e3e5da2.png)
然后它里面又有一些常用的配置项,先提前创建了,待之后项目再来慢慢完善:
1、首先是对于颜色的配置,所以如下:
![](https://i-blog.csdnimg.cn/blog_migrate/aca53fed9776a0efa3712b1cf4a79b69.png)
2、对于项目中用到的字体也需要统一管理一下:
![](https://i-blog.csdnimg.cn/blog_migrate/9b3eb3c3433544846fc7ded9a76fd3af.png)
3、对于字符常量的控制也是很有必要的:
![](https://i-blog.csdnimg.cn/blog_migrate/1e6905f2bed5180f1c97e76b53c24c55.png)
4、对于http网络请求中的ip,端口啥的都需要进行一个全局的配置,所以:
![](https://i-blog.csdnimg.cn/blog_migrate/7deb2c481a906a9b01b69773ea61f5cd.png)
model:
这个模型层就不过多的说明了,都比较熟,是必不可少的,所以新建一下目录:
![](https://i-blog.csdnimg.cn/blog_migrate/3d0eb90c462f95c4ae800aa9f432f70d.png)
pages:
这个则是用来存放具体Flutter页面的,创建一下:
![](https://i-blog.csdnimg.cn/blog_migrate/3ae9e1790e9b889293dcd043b1d87dca.png)
provide:
这个是进行状态管理用的,先创建一下,待之后用到时再来体会:
![](https://i-blog.csdnimg.cn/blog_migrate/9bef632c2c89719c33ce15f29ab7f4f1.png)
routers:
这个是跟路由相关的,说到路由对于做Android开发的应该比较熟了,就是组件与组件之间的一个路由跳转,那在Flutter的路由也是这样么?之后再来体会,创建一下:
![](https://i-blog.csdnimg.cn/blog_migrate/a3519193339b764b052f463c9485f3f1.png)
service:
这个就是一些业务的封装文件,比如说Http网络请求之类的,创建一下:
![](https://i-blog.csdnimg.cn/blog_migrate/cb02f3263d7a257809b17d6edbe6d7d6.png)
它里面先创建一个跟Http相关的:
![](https://i-blog.csdnimg.cn/blog_migrate/4650b64ecc5512e62d1f6a8f057cc440.png)
综上所示,其实就是典型MVC的模式。
入口程序编写:
标题:
接下来则来从入口文件开始撸,先来将创建项目时默认生成的代码用不到的给删除掉:
![](https://i-blog.csdnimg.cn/blog_migrate/325f06f20bfef2408fd2d616ba9bf508.png)
接下来先来修改一下标题,标题文本当然不能写死在这喽:
![](https://i-blog.csdnimg.cn/blog_migrate/412d39acc12f90b41e14c9298e6575ac.png)
得统一管理,不统一管理不上面咱们创建的各种config就没啥意义了,所以咱们到string.dart中定义这个字符串:
![](https://i-blog.csdnimg.cn/blog_migrate/90c115d7670d1f92083ff2ed20c724d1.png)
关于这个常量的语法定义可以参考https://www.cnblogs.com/webor2006/p/11975291.html,如下:
![](https://i-blog.csdnimg.cn/blog_migrate/7f0b2b60331406997ef5e2770ad5abb2.png)
这里写项目的目的是为了巩固之前所学,所以学过的语法在做项目中去复习这种效果是比较好的,反正于我而言这种学习方式是比较踏实,对于技术的学习无它法,就是大量反复的练习,慢慢就融入到自己的脑海当中了,“掌握”也就应运而生,所以对于比较简单的知识点我还是会去复盘它,扯了个蛋,继续!!接下来应用一下:
![](https://i-blog.csdnimg.cn/blog_migrate/72fd84c10a5445fe5912ceb394141c5b.png)
在继续往下篇写之前,这里还有一个优化代码的小技巧需要看一下,就是对于config中有这么多文件在页面使用的时候可能都需要用到,那么咱们在页面中都需要一一的进行导入,就像目前咱们用到了string.dart一样:
![](https://i-blog.csdnimg.cn/blog_migrate/07e241ea8e53acdbf3f4b7b1a8eb70dd.png)
那如果要使用所有config文件,正常的代码就会变成这样了:
![](https://i-blog.csdnimg.cn/blog_migrate/ecd9da7944c6b46b59988b4c5245622d.png)
没啥问题呀,有啥可说的,是的,正常这样写肯定是妥妥的,但是!!!对于追求代码写法的程序员来说还是可以将目前这种代码用一种更优的方式来写啦,有更优的当然得采用,下面来弄一下,其实很简单,就是将这些配置都汇集到一个文件中,然后最终在页面中只需导一个文件既可,如何做呢?
![](https://i-blog.csdnimg.cn/blog_migrate/f5dcd964c8b353c6643cacfc8ab6fdd0.png)
有点像小程序开发中的js导出也是用的export,此时在页面上使用就简单了,如下:
![](https://i-blog.csdnimg.cn/blog_migrate/761d6360ab01ef8f6947104d106c5d5f.png)
去掉调试模式:
目前咱们APP中默认右上角会有一个"DEBUG"标识,影响美观,去掉:
![](https://i-blog.csdnimg.cn/blog_migrate/44167a0bb3b80695036f0fc2051af1c8.png)
![](https://i-blog.csdnimg.cn/blog_migrate/6a66dc489664a81170edacc71e9f1f13.png)
定制主题:
接下来定制一下主题,目前的主题色不满足要求:
![](https://i-blog.csdnimg.cn/blog_migrate/f8d2a7d782d0d933fea945dd7dc1af82.png)
此时需要用到颜色了,所以先上颜色的配置文件中进行定义:
![](https://i-blog.csdnimg.cn/blog_migrate/b69c91642f337993584f9cf9aa88d231.png)
![](https://i-blog.csdnimg.cn/blog_migrate/4311930a87f7ae1c403905234f03ba89.png)
好,接下来看一下修改的效果,目前需要再定义一个参数否则运行会报错:
![](https://i-blog.csdnimg.cn/blog_migrate/afa30d30d8a6f25c03069900030cea78.png)
![](https://i-blog.csdnimg.cn/blog_migrate/febb8a2a15682d70a392b6ddffef543b.png)
第一次项目开篇先简单一点,慢慢享受垒砖的快乐~~