Flutter之旅 02 - 創(chuàng)建第一個(gè)項(xiàng)目

Flutter項(xiàng)目可以用三種方式開發(fā)：

創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供德州網(wǎng)站建設(shè)、德州做網(wǎng)站、德州網(wǎng)站設(shè)計(jì)、德州網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、德州企業(yè)網(wǎng)站模板建站服務(wù)，十年德州做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

可以根據(jù)自己的需求選擇，由于之前一直做iOS開發(fā)，也做過RN項(xiàng)目開發(fā)，Mac上裝過Android Studio 和 其他安卓模擬器 Genymotion ，所以我選擇Android Studio開發(fā)工具，之前裝的版本 3.0.1 比較老了，所以進(jìn)行了升級(jí) 3.4 。

體驗(yàn)Flutter

PS：第一次創(chuàng)建項(xiàng)目可以成功，之后再執(zhí)行這一步操作創(chuàng)建新的Flutter項(xiàng)目時(shí)，一直卡住，重啟過很多次Android Studio一直都是這樣，后面查詢資料，發(fā)現(xiàn)自己沒有同意使用 android-licenses ，可以通過下列命令驗(yàn)證，第一步，先驗(yàn)證：

第一步檢測結(jié)果，發(fā)現(xiàn)是需要同意 android-licenses ：

第二步執(zhí)行同意命令，操作時(shí)會(huì)有很多個(gè) android-licenses 需要同意：

第二步檢測結(jié)果：

第三步再次驗(yàn)證，當(dāng)?shù)玫揭韵陆貓D中結(jié)果時(shí)，代表所有環(huán)境配置已經(jīng)完成：

上述命令創(chuàng)建一個(gè)Flutter項(xiàng)目，項(xiàng)目名為 myapp ，在項(xiàng)目目錄中，有安卓和iOS兩個(gè)項(xiàng)目目錄。

Android Studio中會(huì)列出所有已經(jīng)連接了電腦的設(shè)備，包括安卓和iPhone。如果想在模擬器上運(yùn)行，下面可以選擇對應(yīng)的模擬器，如圖：

PS：如果想在模擬器上運(yùn)行，需要先安裝一個(gè)模擬器，選擇Tools AVD Manager，如圖：

然后選擇Create Virtual Device，根據(jù)提示一步一步操作即可（建議翻墻條件下操作），添加完成后就可以在這個(gè)界面看到自己已經(jīng)添加的模擬器，點(diǎn)擊綠色的運(yùn)行按鈕，即可打開該模擬器：

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

花費(fèi)大概一個(gè)多月的時(shí)間，這個(gè)完全由Flutter編寫的Todo-List項(xiàng)目總算初步完成了！現(xiàn)在，它終于要被開源出來了。

在開始介紹之前，先來簡單的看一下真機(jī)運(yùn)行效果吧

下面，針對使用者和開發(fā)者，我將來分別介紹一次

app中，可以在主題切換界面選擇各種主題顏色進(jìn)行切換，app自帶六個(gè)默認(rèn)主題，這些都是我經(jīng)過多次嘗試所挑選出來的顏色搭配。同時(shí)你也可以選擇自定義主題顏色

在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)行自定義的

比如說主頁測滑欄的頭部展示內(nèi)容。當(dāng)然，還有一些其他的操作，就由你去自行體驗(yàn)了

當(dāng)你完成了一項(xiàng)任務(wù)后，這個(gè)任務(wù)就會(huì)從主頁轉(zhuǎn)移到完成列表頁面，在這里你可以看到任務(wù)的一些額外信息

那么，對于使用者的介紹就到這里結(jié)束

下面就是為廣大開發(fā)者們介紹的時(shí)間了！

各位開發(fā)者們請扶好你們的秀發(fā)，下面就我來帶領(lǐng)各位參觀參觀這個(gè)項(xiàng)目的內(nèi)部構(gòu)造

項(xiàng)目中使用了一些非常優(yōu)秀的第三方庫，也特別感謝這些開發(fā)者們，讓我的發(fā)量保持健康

下面就是這些控件的信息

項(xiàng)目使用的狀態(tài)管理框架是 codeProvider/code ,而整個(gè)項(xiàng)目的架構(gòu)如下

看起來是不是和 Android 中的 MVP 模式很像呢？其實(shí)都差不多的，只是名字略有不同罷了，你也可以就把上面的模式當(dāng)作是 MVP 模式。

Flutter 可以說是特別適合這種架構(gòu)模式的，因?yàn)橐晥D跟隨數(shù)據(jù)而變化，你基本上不用去關(guān)心View，只要去對數(shù)據(jù)進(jìn)行操作就好了。

項(xiàng)目目錄結(jié)構(gòu)如下：

先說明一下除了 lib 外的其他目錄：

然后是 lib 目錄

項(xiàng)目創(chuàng)建于6月21日，到如今發(fā)布1.0.0版本花了三十多天的時(shí)間，雖然我做過很多測試，解決了很多bug，但是時(shí)間確實(shí)不充裕。紕漏也會(huì)在所難免

所以如果使用過程中遇到什么問題，或者對于項(xiàng)目有什么好的建議，歡迎在app中的反饋界面提出來，也可以在下面留下評論，又或者在github上提issue。

項(xiàng)目的UI設(shè)計(jì)與后臺(tái)接口均由我獨(dú)自一人完成，所以這也是為什么時(shí)間不夠的原因。不過目前項(xiàng)目中只是包含了兩個(gè)自己寫的接口，后續(xù)計(jì)劃中應(yīng)該會(huì)加入登錄功能，到時(shí)候會(huì)有很多接口操作。

若有興趣，請持續(xù)關(guān)注！

如果你覺得這個(gè)app不錯(cuò)，或者這個(gè)項(xiàng)目有幫助到你，不妨給這個(gè)項(xiàng)目一個(gè)Star吧。項(xiàng)目后面也會(huì)持續(xù)保持更新和維護(hù)！

ToDo-List

UI項(xiàng)目地址

密碼:Aczh

4. VS Code創(chuàng)建flutter項(xiàng)目

如果和我一樣，用慣了VS Code來開發(fā)項(xiàng)目的話，那就跟我一起來配置一下如何在VS Code里運(yùn)行flutter項(xiàng)目。

1.在VS Code里安裝擴(kuò)展：

2.在VScode上打開打開終端，快捷鍵：Ctrl+~（Tab上一個(gè)鍵），在終端上輸入：flutter create flutter_app02，即可創(chuàng)建完成！

也可以把之前的項(xiàng)目放到工作區(qū)

3.在終端中運(yùn)行命令：flutter run

運(yùn)行的時(shí)候你會(huì)發(fā)現(xiàn)手機(jī)提示你安裝個(gè)app，點(diǎn)擊安裝完成，項(xiàng)目就在手機(jī)上顯示了，下圖是運(yùn)行成功的提示。

下圖是手機(jī)效果：

如果報(bào)錯(cuò)的話，運(yùn)行下清緩存的命令：flutter clean，把文件夾.gradle刪掉，然后flutter run重新跑下項(xiàng)目。

Flutter上線項(xiàng)目實(shí)戰(zhàn)——Vap視頻動(dòng)畫

透明視頻動(dòng)畫是目前比較流行的實(shí)現(xiàn)動(dòng)畫的一種, 大廠也相繼開源自己的框架，最終我們選中 騰訊vap ，它支持了Android、IOS、Web，為我們封裝flutter_vap提供了天然的便利，并且它提供了將幀圖片生成帶alpha通道視頻的工具，這簡直太贊了。

VAP（Video Animation Player）是企鵝電競開發(fā)，用于播放酷炫動(dòng)畫的實(shí)現(xiàn)方案。

video for youtube

video for qiniu

apk download

github

網(wǎng)站標(biāo)題：包含flutter實(shí)現(xiàn)項(xiàng)目的詞條
網(wǎng)站網(wǎng)址：http://chinadenli.net/article42/dsdicec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、微信小程序、網(wǎng)站策劃、建站公司、軟件開發(fā)、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)