編寫一個(gè)非常精美的Flutter Todo-List項(xiàng)目

開頭

花費(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)

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市案腺,隨后出現(xiàn)的幾起案子庆冕,更是在濱河造成了極大的恐慌,老刑警劉巖劈榨,帶你破解...
    沈念sama閱讀 219,427評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件访递,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡同辣,警方通過(guò)查閱死者的電腦和手機(jī)拷姿,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,551評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)旱函,“玉大人响巢,你說(shuō)我怎么就攤上這事“舴粒” “怎么了踪古?”我有些...
    開封第一講書人閱讀 165,747評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)券腔。 經(jīng)常有香客問(wèn)我伏穆,道長(zhǎng),這世上最難降的妖魔是什么纷纫? 我笑而不...
    開封第一講書人閱讀 58,939評(píng)論 1 295
  • 正文 為了忘掉前任枕扫,我火速辦了婚禮,結(jié)果婚禮上辱魁,老公的妹妹穿的比我還像新娘烟瞧。我一直安慰自己诗鸭,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,955評(píng)論 6 392
  • 文/花漫 我一把揭開白布参滴。 她就那樣靜靜地躺著强岸,像睡著了一般。 火紅的嫁衣襯著肌膚如雪卵洗。 梳的紋絲不亂的頭發(fā)上请唱,一...
    開封第一講書人閱讀 51,737評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音过蹂,去河邊找鬼十绑。 笑死,一個(gè)胖子當(dāng)著我的面吹牛酷勺,可吹牛的內(nèi)容都是我干的本橙。 我是一名探鬼主播,決...
    沈念sama閱讀 40,448評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼脆诉,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼甚亭!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起击胜,我...
    開封第一講書人閱讀 39,352評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤亏狰,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后偶摔,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體暇唾,經(jīng)...
    沈念sama閱讀 45,834評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,992評(píng)論 3 338
  • 正文 我和宋清朗相戀三年辰斋,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了策州。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,133評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡宫仗,死狀恐怖够挂,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情藕夫,我是刑警寧澤孽糖,帶...
    沈念sama閱讀 35,815評(píng)論 5 346
  • 正文 年R本政府宣布,位于F島的核電站毅贮,受9級(jí)特大地震影響梭姓,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜嫩码,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,477評(píng)論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望罪既。 院中可真熱鬧铸题,春花似錦铡恕、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,022評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至烘挫,卻和暖如春诀艰,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背饮六。 一陣腳步聲響...
    開封第一講書人閱讀 33,147評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工其垄, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人卤橄。 一個(gè)月前我還...
    沈念sama閱讀 48,398評(píng)論 3 373
  • 正文 我出身青樓绿满,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親窟扑。 傳聞我的和親對(duì)象是個(gè)殘疾皇子喇颁,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,077評(píng)論 2 355