編寫一個非常精美的Flutter Todo-List專案

安卓小哥發表於2019-07-29

編寫一個非常精美的Flutter Todo-List專案

開頭

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

app靈感來源這個地方:

iPhone X - Todo Concept

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

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

相關文章