編寫一個很是精美的Flutter Todo-List項目

開頭

花費大概一個多月的時間，這個徹底由Flutter編寫的Todo-List項目總算初步完成了！如今，它終於要被開源出來了。

app靈感來源這個地方:

iPhone X - Todo Concept

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

介紹

「一日清單」是一個小巧、簡潔而又漂亮的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開發者帳號，這個之後可能會有！

項目地址

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