美文网首页
编写一个非常精美的Flutter Todo-List项目

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

作者: 羁拥_f357 | 来源:发表于2020-05-28 16:13 被阅读0次

开头

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

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

介绍

“一日清单”是一个小巧、简洁而又漂亮的app,它可以帮你随手记录日常的各项计划,如果你恰好有写任务计划的习惯,那么它一定非常适合你。

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

面向使用者的介绍

丰富的主题选择

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

丰富的任务图标

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

多样的自定义组合

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

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

完成列表

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

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

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

面向开发者的介绍

如果你对于Flutter有着浓厚的兴趣而又迟迟没有行动,别犹豫了,快点上车吧!这个项目对于新手司机再适合不过了。

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

第三方库

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

下面就是这些控件的信息

控件                                                               说明

dio                                                           网络请求

shared_preferences                                本地存储

provider                                                     状态管理

test                                                              单元测试

carousel_slider                                        滑动控件

circle_list                                                  环形列表

intl                                                             intl语言包

sqflite                                                         本地数据库

flutter_colorpicker                                         取色框

cached_network_image                           图片缓存

image_picker                                              图片选取

permission_handler                                  权限申请

path_provider                                             路径获取

image_crop                                                  图片裁剪

flutter_svg                                                      svg解析

package_info                                         获取package信息

flutter_webview_plugin                                   网页

pull_to_refresh                                                上拉加载

photo_view                                                       图片展示

url_launcher                                      可以用来打开应用商店

open_file                              打开文件,android更新下载安装包用

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

View 层用于展示布局,基本上就是各种被 ChangeNotifierProvider 包裹的 StatelessWidget 页面

Model层用于处理数据,是继承了 ChangeNotifier 的各种Model类

Logic 层不会保存任何数据,只进行逻辑操作

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

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

目录结构

项目目录结构如下:

├── android

├── build

├── images

├── intl.sh

├── ios

├── lib

├── local_json

├── pubspec.lock

├── pubspec.yaml

├── res

├── svgs

├── test

└── todo_list.iml

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

目录说明images用于存放各种图片local_json我将Flutter的Icon信息封装成了Json文件存放在这个目录中res存放“国际化”插件生成的语言文件svgs存放svg格式的图片

然后是 lib 目录

目录说明config存放各种配置类,比如Dio请求封装类等database存放数据库操作相关类i10n存放国际化相关操作的类items存放部分List列表的Item类json各种网络请求、数据库等相关的json文件logic上面提到的,Locig层的目录modelModel层的目录pages存放各个页面,是View层的目录utils封装好的各️工具类,比如文件操作等widgets封装好的各种Widget

正在跳转(iOS交流裙 密码:123)

相关文章

网友评论

      本文标题:编写一个非常精美的Flutter Todo-List项目

      本文链接:https://www.haomeiwen.com/subject/mosaahtx.html