谷歌移動UI框架Flutter入門


引言

作為Android開發人員,很有必要學習一下Flutter,那么Flutter是什么呢?它到底有什么作用呢?我們一一來揭曉。
Flutter是谷歌的移動UI框架,可以快速在iOS和Android上構建高質量的原生用戶界面。 Flutter可以與現有的代碼一起工作。在全世界,Flutter正在被越來越多的開發者和組織使用,並且Flutter是完全免費、開源的。它也是構建未來的Google Fuchsia應用的主要方式。Fuchsia是谷歌繼Android和Chrome OS之后開發的第三個系統,未來,谷歌是計划將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'  //谷歌服務庫依賴

    }
}

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/


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM