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

点击查看原图点击查看原图

开头

项目地址:https://github.com/asjqkkkk/flutter-todos

花费大概一个多月的时间,这个完全由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更新下载安装包用

项目架构

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

点击查看原图
  • 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

点击查看原图


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

结尾

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

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

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

若有兴趣,请持续关注!

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

附录

app下载

  • Android 下载地址:


  • Ios 下载地址:

    目前尚未购买一年99$的ios开发者账号,这个以后可能会有!

项目地址

https://github.com/asjqkkkk/todo-list-app
注意:目前项目运行环境是flutter 1.7.8 hotfix的版本,改版本相对以往而言多了一些破坏性修复,
如果你的flutter版本比当前版本低,项目中依赖的某些第三方库将无法运行,到时候请降低他们的版本

下面是在1.5.4版本下需要修改的第三方库

-   flutter_svg: ^0.12.4+2
-   image_crop: ^0.2.1
-   photo_view: ^0.3.3

UI设计文件

UI项目地址
密码:Aczh

原文https://www.jianshu.com/p/67ef26a4cd95

本博客所有文章如无特别注明均为原创。作者:flutter教程网复制或转载请以超链接形式注明转自 Flutter教程网
原文地址《编写一个非常精美的Flutter Todo-List项目
分享到:更多

相关推荐


Flutter教程网 官方QQ群:874592746

扫描下面二维码 加入Flutter教程网微信群:


发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(0)