編寫一個非常精美的Flutter Todo-List項目

image

image

開頭

花費大概一個多月的時間,這個完全由Flutter編寫的Todo-List項目總算初步完成了!現在,它終於要被開源出來了。

在開始介紹之前,先來簡單的看一下真機運行效果吧

image

介紹

“一日清單”是一個小巧、簡潔而又漂亮的app,它可以幫你隨手記錄日常的各項計劃,如果你恰好有寫任務計劃的習慣,那麼它一定非常適合你。

下面,針對使用者和開發者,我將來分別介紹一次

面向使用者的介紹

豐富的主題選擇

app中,可以在主題切換界面選擇各種主題顏色進行切換,app自帶六個默認主題,這些都是我經過多次嘗試所挑選出來的顏色搭配。同時你也可以選擇自定義主題顏色

image
image

豐富的任務圖標

在app中,每項任務都會帶有一個圖標,而app提供了所有 Flutter 自帶的 Material design 風格的圖標。這些圖標,你同樣可以進行任意顏色的自定義

image
image

多樣的自定義組合

在app中,有多項其他的操作是你可以進行自定義的

比如說主頁測滑欄的頭部展示內容。當然,還有一些其他的操作,就由你去自行體驗了

image
image

完成列表

當你完成了一項任務後,這個任務就會從主頁轉移到完成列表頁面,在這裏你可以看到任務的一些額外信息

image

那麼,對於使用者的介紹就到這裏結束

下面就是爲廣大開發者們介紹的時間了!

面向開發者的介紹

如果你對於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 ,而整個項目的架構如下

image

  • 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 目錄

image

目錄 說明
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 下載地址:

image

  • Ios 下載地址:

    目前尚未購買一年99$的ios開發者賬號,這個以後可能會有!

項目地址

ToDo-List

注意:目前項目運行環境是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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章