開頭
花費(fèi)大概一個(gè)多月的時(shí)間,這個(gè)完全由Flutter編寫的Todo-List項(xiàng)目總算初步完成了!現(xiàn)在火脉,它終于要被開源出來(lái)了。
在開始介紹之前柒啤,先來(lái)簡(jiǎn)單的看一下真機(jī)運(yùn)行效果吧
介紹
“一日清單”是一個(gè)小巧倦挂、簡(jiǎn)潔而又漂亮的app,它可以幫你隨手記錄日常的各項(xiàng)計(jì)劃,如果你恰好有寫任務(wù)計(jì)劃的習(xí)慣担巩,那么它一定非常適合你方援。
下面,針對(duì)使用者和開發(fā)者涛癌,我將來(lái)分別介紹一次
面向使用者的介紹
豐富的主題選擇
app中犯戏,可以在主題切換界面選擇各種主題顏色進(jìn)行切換,app自帶六個(gè)默認(rèn)主題拳话,這些都是我經(jīng)過(guò)多次嘗試所挑選出來(lái)的顏色搭配先匪。同時(shí)你也可以選擇自定義主題顏色
豐富的任務(wù)圖標(biāo)
在app中,每項(xiàng)任務(wù)都會(huì)帶有一個(gè)圖標(biāo)弃衍,而app提供了所有 Flutter 自帶的?Material design?風(fēng)格的圖標(biāo)呀非。這些圖標(biāo),你同樣可以進(jìn)行任意顏色的自定義
多樣的自定義組合
在app中镜盯,有多項(xiàng)其他的操作是你可以進(jìn)行自定義的
比如說(shuō)主頁(yè)測(cè)滑欄的頭部展示內(nèi)容岸裙。當(dāng)然,還有一些其他的操作形耗,就由你去自行體驗(yàn)了
完成列表
當(dāng)你完成了一項(xiàng)任務(wù)后哥桥,這個(gè)任務(wù)就會(huì)從主頁(yè)轉(zhuǎn)移到完成列表頁(yè)面,在這里你可以看到任務(wù)的一些額外信息
那么激涤,對(duì)于使用者的介紹就到這里結(jié)束
下面就是為廣大開發(fā)者們介紹的時(shí)間了!
面向開發(fā)者的介紹
如果你對(duì)于Flutter有著濃厚的興趣而又遲遲沒(méi)有行動(dòng)判呕,別猶豫了倦踢,快點(diǎn)上車吧!這個(gè)項(xiàng)目對(duì)于新手司機(jī)再適合不過(guò)了侠草。
各位開發(fā)者們請(qǐng)扶好你們的秀發(fā)辱挥,下面就我來(lái)帶領(lǐng)各位參觀參觀這個(gè)項(xiàng)目的內(nèi)部構(gòu)造
第三方庫(kù)
項(xiàng)目中使用了一些非常優(yōu)秀的第三方庫(kù),也特別感謝這些開發(fā)者們边涕,讓我的發(fā)量保持健康
下面就是這些控件的信息
控件? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?說(shuō)明
dio? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?網(wǎng)絡(luò)請(qǐng)求
shared_preferences? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 本地存儲(chǔ)
provider? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?狀態(tài)管理
test? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 單元測(cè)試
carousel_slider? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 滑動(dòng)控件
circle_list? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??環(huán)形列表
intl? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?intl語(yǔ)言包
sqflite? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?本地?cái)?shù)據(jù)庫(kù)
flutter_colorpicker? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?取色框
cached_network_image? ? ? ? ? ? ? ? ? ? ? ? ? ?圖片緩存
image_picker? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 圖片選取
permission_handler? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 權(quán)限申請(qǐng)
path_provider? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?路徑獲取
image_crop? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 圖片裁剪
flutter_svg? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? svg解析
package_info? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?獲取package信息
flutter_webview_plugin? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?網(wǎng)頁(yè)
pull_to_refresh? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 上拉加載
photo_view? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?圖片展示
url_launcher? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 可以用來(lái)打開應(yīng)用商店
open_file? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 打開文件晤碘,android更新下載安裝包用
項(xiàng)目使用的狀態(tài)管理框架是?Provider?,而整個(gè)項(xiàng)目的架構(gòu)如下
View 層用于展示布局褂微,基本上就是各種被?ChangeNotifierProvider?包裹的?StatelessWidget?頁(yè)面
Model層用于處理數(shù)據(jù),是繼承了?ChangeNotifier?的各種Model類
Logic 層不會(huì)保存任何數(shù)據(jù)园爷,只進(jìn)行邏輯操作
看起來(lái)是不是和 Android 中的?MVP?模式很像呢宠蚂?其實(shí)都差不多的,只是名字略有不同罷了童社,你也可以就把上面的模式當(dāng)作是 MVP 模式求厕。
Flutter 可以說(shuō)是特別適合這種架構(gòu)模式的,因?yàn)橐晥D跟隨數(shù)據(jù)而變化扰楼,你基本上不用去關(guān)心View呀癣,只要去對(duì)數(shù)據(jù)進(jìn)行操作就好了。
目錄結(jié)構(gòu)
項(xiàng)目目錄結(jié)構(gòu)如下:
├── android
├── build
├── images
├── intl.sh
├── ios
├── lib
├── local_json
├── pubspec.lock
├── pubspec.yaml
├── res
├── svgs
├── test
└── todo_list.iml
先說(shuō)明一下除了?lib?外的其他目錄:
目錄說(shuō)明images用于存放各種圖片local_json我將Flutter的Icon信息封裝成了Json文件存放在這個(gè)目錄中res存放“國(guó)際化”插件生成的語(yǔ)言文件svgs存放svg格式的圖片
然后是?lib?目錄
目錄說(shuō)明config存放各種配置類弦赖,比如Dio請(qǐng)求封裝類等database存放數(shù)據(jù)庫(kù)操作相關(guān)類i10n存放國(guó)際化相關(guān)操作的類items存放部分List列表的Item類json各種網(wǎng)絡(luò)請(qǐng)求项栏、數(shù)據(jù)庫(kù)等相關(guān)的json文件logic上面提到的,Locig層的目錄modelModel層的目錄pages存放各個(gè)頁(yè)面蹬竖,是View層的目錄utils封裝好的各?工具類沼沈,比如文件操作等widgets封裝好的各種Widget
正在跳轉(zhuǎn)(iOS交流裙 密碼:123)