開頭
花費大概一個多月的時間,這個完全由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層的目錄 |
model | Model層的目錄 |
pages | 存放各個頁面,是View層的目錄 |
utils | 封裝好的各️工具類,比如文件操作等 |
widgets | 封裝好的各種Widget |
結尾
項目創建於6月21日,到如今發佈1.0.0版本花了三十多天的時間,雖然我做過很多測試,解決了很多bug,但是時間確實不充裕。紕漏也會在所難免
所以如果使用過程中遇到什麼問題,或者對於項目有什麼好的建議,歡迎在app中的反饋界面提出來,也可以在下面留下評論,又或者在github上提issue。
項目的UI設計與後臺接口均由我獨自一人完成,所以這也是爲什麼時間不夠的原因。不過目前項目中只是包含了兩個自己寫的接口,後續計劃中應該會加入登錄功能,到時候會有很多接口操作。
若有興趣,請持續關注!
如果你覺得這個app不錯,或者這個項目有幫助到你,不妨給這個項目一個Star吧。項目後面也會持續保持更新和維護!
附錄
app下載
- Android 下載地址:
-
Ios 下載地址:
目前尚未購買一年99$的ios開發者賬號,這個以後可能會有!
項目地址
注意:目前項目運行環境是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