Google移動UI框架Flutter入門

2020 年 1 月 19 日
筆記

引言

作為Android開發人員，很有必要學習一下Flutter，那麼Flutter是什麼呢？它到底有什麼作用呢？我們一一來揭曉。 Flutter是Google的移動UI框架，可以快速在iOS和Android上構建高品質的原生用戶介面。 Flutter可以與現有的程式碼一起工作。在全世界，Flutter正在被越來越多的開發者和組織使用，並且Flutter是完全免費、開源的。它也是構建未來的Google Fuchsia應用的主要方式。Fuchsia是Google繼Android和Chrome OS之後開發的第三個系統，未來，Google是計劃將Flutter作為這款作業系統的構建方式的。

什麼是Flutter？

Flutter實際上是一個包含多種內容的軟體包，它是用來創建移動2D應用程式SDK的軟體開發包，如果你計劃在某些遊戲中使用3D應用程式，那麼Flutter將無法滿足你的需求，但如果你的計劃是在APP商店中的大多數的2D應用程式，那麼Flutter就是你的選擇。 Flutter軟體包中最重要的就是編程框架，編程框架使用Dart作為程式語言。而實際上，我們不會直接調用Dart，所以我們不需要去深入學習Dart語言。Flutter附帶了大量的小控制項，能夠幫助開發者省去很多功夫。

下載安裝Flutter

現在我們就來看看如何下載安裝Flutter，首先瀏覽器搜索Flutter，找到官網進入，點擊Get started。

選擇對應的作業系統，就會跳轉至下載介面。由於在中國訪問Flutter有可能會受到限制，Flutter官方為中國開發者搭建了臨時鏡像，大家可以將如下環境變數加入到用戶變數中。

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

Flutter鏡像設置完成以後，接下來就可以獲取Flutter SDK了。去Flutter官網下載最新可用的安裝包。下載完成後解壓即可。解壓完後，打開flutter文件夾，找到flutter_console.bat，雙擊運行，進行命令行的安裝。

當看到這樣的一個控制台介面，說明Flutter啟動成功。啟動成功後，我們還需要配置Flutter的環境變數。需要將bin文件夾的位置配置到用戶環境中。需要注意的是：這裡配置的是用戶變數，不是系統變數。將bin目錄位置添加到用戶變數的path中。配置完後，我們就可以使用Flutter命令了，打開一個控制台，輸入指令：

flutter doctor

這是一條用於檢查當前電腦是否包含運行Flutter的全部環境。運行該條指令便會去自動下載所需資源。

需要注意的是，打勾的地方說明資源下載成功，而感嘆號的位置說明資源下載異常，我們需要去解決這些異常的下載，才能使Flutter正常地運行。

解決資源異常問題

我這裡因為有了Android的運行環境和Android Studio開發工具，所以都是感嘆號，而沒有這些東西的同學就會打一個紅色的叉，看到紅色的叉也不要驚慌失措，只需要將Android的環境下載好即可。下載好Android環境後，我們接著輸入指令：

flutter doctor --android-licenses

該條指令的作用是接受Android許可，執行該條指令後會多次詢問是否許可，只需輸入』y』回車即可。再次輸入flutter doctor來檢查一下環境。

證明第二項的異常我們解決了。接下來我們解決第三個異常，也就是Android Studio的異常。我們打開Android Studio，點擊File，然後點擊Setting，最後點擊Plugins，打開插件窗口，在該窗口中點擊Browse repositories，選擇從網路上下載插件。在搜索框中搜索Flutter並下載，在下載前Android Studio會詢問是否同意下載Dart插件，我們允許即可。下載完成後重啟Android Studio，我們再次到控制台中檢查一下資源，輸入flutter doctor指令，會發現，第三項也打勾了，問題成功解決。

第四項異常是因為IDEA沒有安裝Flutter的插件，這裡我們只用Android Studio進行開發，所以可以不用管，沒有這個開發工具的同學也不會產生這個問題。那麼接下來，我們看最後一個異常，這個異常是因為現在沒有設備連接，所以我們必須準備一個Android設備。

創建Flutter項目並啟動

經過前面的一些操作，Flutter總算是成功安裝上來了，那麼，接下來，我們就嘗試創建一個Flutter項目並運行到設備上。在這之前，我們需要再設置一些資訊，在Android Studio中點擊File，然後點擊Setting，找到Flutter設置介面。

將我們最開始下載的Flutter的解壓文件路徑設置上去，Dart我們可以不用設置，它會自動去尋找路徑。設置完成後點擊OK，然後新建一個Flutter Project，點擊Flutter Application。

點擊Next，然後點擊Finish。等待片刻，Android Studio會自動幫我們構建開發環境。構建完成後我們右上角選擇一下運行設備，然後點擊運行。

然而點擊運行之後，有些同學會發現Android Studio停留在了這個介面。

再也沒有變化過，這不禁讓人感到奇怪，這麼長的構建時間，它到底在幹什麼？其實這不奇怪，展開gradle-wrapper文件夾。

發現了沒，構建工具並不存在，所以，Android Studio其實就是在下載構建工具，通過觀察文件夾變化，我找出了它需要下載的版本。

這個版本確實是我所有構建版本中沒有的，然後因為網路的原因，下載速度極慢，於是便出現了剛才的那一幕，所以，該怎麼解決呢？兩種辦法，要麼就一直等，網速再慢，幾十MB的東西下個一天還下不完嗎？哈哈，開個玩笑。第二個辦法，就是自己把它需要的構建版本下載好，然後放到這個文件夾下面去。當然，還是有其它辦法的，就是去gradle-wrapper.properties文件中將構建工具版本改為自己已經有的，這樣也是可以的，我就不演示了。將下載完的構建工具放進去，我們停止構建，然後重新運行，果然這一次就快了許多，應用很快就運行到了Android設備上。

這是Flutter項目自動生成的，我們並沒有編寫一條程式碼。需要注意的是，很多同學可能在這裡還會遇到一些問題，比如在運行的時候報這個錯。

Error:FAILURE: Build failed with an exception.    * What went wrong:  Could not resolve all files for configuration ':app:debugCompileClasspath'.  > Could not resolve com.google.android.gms:play-services-ads:latest.release.    Required by:        project :app     > Could not resolve com.google.android.gms:play-services-ads:12.0.1.        > Could not get resource 'https://jcenter.bintray.com/com/google/android/gms/play-services-ads/12.0.1/play-services-ads-12.0.1.pom'.           > Could not GET 'https://jcenter.bintray.com/com/google/android/gms/play-services-ads/12.0.1/play-services-ads-12.0.1.pom'.              > Read timed out    * Try:  Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.    * Get more help at https://help.gradle.org    BUILD FAILED in 35s

這還是因為網路的原因，無法下載到這些資源文件，解決方案如下：在project級別下的build.gradle文件中添加如下程式碼：

buildscript {        repositories {          google()          jcenter()      }      dependencies {          classpath 'com.android.tools.build:gradle:3.1.1'          classpath 'com.google.gms:google-services:4.0.1'  //Google服務庫依賴        }  }    allprojects {      repositories {          google()          jcenter()          mavenCentral ()          maven {url 'https://dl.bintray.com/jetbrains/anko'} //這個是解決這個問題的關鍵      }  }    task clean(type: Delete) {      delete rootProject.buildDir  }

這樣問題應該就解決了，我也不可能一一地列舉出所有的問題，如果大家還是碰到了問題，可以自行百度解決。

總結

經歷了千辛萬苦，第一個Flutter項目終於成功運行起來了。Flutter打包出來的是純原生應用，和瀏覽器應用完全不同，原生應用指的是安裝在手機內部會帶圖標的應用，這種應用是可以發布到Android市場或者App Store裡面的。

最後貼上gradle構建工具的下載網址：http://services.gradle.org/distributions/