介紹
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是遲早的事,實現體驗下也是不錯的,還沒有嘗試過的小夥伴們,趕緊去試試吧!