在Windows 10上搭建Flutter環境,初次體驗Flutter開發app

2019-07-11     最美分享Coder

介紹

Flutter發布到現在已經有一段時間了,但是到現在依然沒有體驗過一次,都說它很優秀,那麼作為一個愛折騰的人,優秀的東西總是要學習的,那麼今天就試一下坑,看看到底Flutter開發app的體驗是怎麼樣的,我會從頭開始一步步從環境安裝直到到手機運行起來第一個體驗app為止(本文僅限安卓)!



Flutter中文網

對於英文不好的小夥伴來說,有中文網就夠了

https://flutterchina.club

同時附上原官網

https://flutter.dev

開發工具

  • SDK

開發任何軟體,SDK都是必須要安裝的,在windows下下載下來的安裝包是壓縮包,我們將其解壓到某一個文件夾下,最好是權限限制低的文件夾,比如我就放在我的D盤的flutter文件夾下面,然後就是將SDK加入到環境變量中去,第一反應就是將bin文件夾路徑加入到環境變量:

這裡不做詳細介紹,相信大家都會



然後運行flutter doctor來驗證是否添加成功,如果有輸出說明添加到環境變量成功

  • Android Studio

安裝Android Studio的目的是安裝安卓的環境,這個地方相信大家都可以搞定

  • 編輯器配置

由於我本人喜歡用VSCode,因此就用它來作為我的開發Flutter應用的首選開發工具,我們首先到擴展商店安裝Flutter插件



安裝完成後我們打開命令面板,或者快捷鍵Ctrl+Shift+P打開命令面板



在命令面板輸入Doctor,然後點擊『Flutter: Run Flutter Doctor』,來驗證Flutter環境情況,這個地方我遇到了一個問題,報了如下錯誤

Android licenses not accepted

經過一番搜索,執行以下命令,然後一路y就完事了

flutter doctor --android-licenses

創建第一個體驗項目

在VSCode中創建一個Flutter項目非常簡單,同樣打開命令面板,輸入flutter,選擇Flutter: New Project來新建第一個項目,輸入項目名稱,就叫first吧

  • 連接手機,打開USB調試模式

這個地方我沒有選擇連接安卓模擬器,因為我覺得連接手機更方便,我使用的是華為系列的手機,,點擊設置=》系統=》關於手機=》版本號,連續點擊5次以上,即可打開開發者模式,然後到系統=》開發人員選項=》打開USB調試模式即可

  • 進入到剛剛創建好的項目

大致是這個樣子



直接F5進行調試即可,然後就是漫長的等待(顯然是等不及了,然後就是在一番搜索)

到SDK目錄下:

flutter\\packages\\flutter_tools\\gradle\\flutter.gradle

修改如下:

buildscript {
repositories {
// google()
// jcenter()
maven{ url 'https://maven.aliyun.com/repository/google' }
maven{ url 'https://maven.aliyun.com/repository/jcenter' }
maven{url 'http://maven.aliyun.com/nexus/content/groups/public'}
}
dependencies {
classpath 'com.android.tools.build:gradle:3.2.1'
}
}

package get 慢的話:

新建兩個環境變量:

PUB_HOSTED_URL https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL https://storage.flutter-io.cn

分別對應名稱和值;然後繼續F5調試,這個時候應該會很快了,不出意外等程序構建完成會在在真機上提示安裝,我們信任即可,下面是打開後的app的頁面


Flutter是支持熱加載的,那麼我們直接修改下title文字



已經直接變了,而且很快,快到我這段文字輸入中途就跟著變化



PS:需要注意的是,如果中途你拔線或者將後台APP進程關掉了,調試會自動終止,就需要重新Debug才能進行重新運行調試



總結

總的來說從環境搭建,到新建項目調試運行第一個APP不是很費事,可能我還沒遇到其他的一些嚴重的不好解決的問題,總體感受是一個驚喜,真的很不錯,雖然我的主要工作在Web應用上,但是開發app是遲早的事,實現體驗下也是不錯的,還沒有嘗試過的小夥伴們,趕緊去試試吧!



文章來源: https://twgreatdaily.com/zh-cn/lQ7vX2wBUcHTFCnfgyyC.html