Flutter免費視訊教程第一季：開發環境搭建

技術胖發表於2018-11-08
Flutter開發環境

前言：

視訊在文章最後！！！

Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構建高質量的原生使用者介面。 Flutter可以與現有的程式碼一起工作。在全世界，Flutter正在被越來越多的開發者和組織使用，並且Flutter是完全免費、開源的。我們將在這裡揭開他可愛而神奇的面紗。

這個只是第一季，還會接著出，我爭取從基礎一直給大家講到實戰。每週更新三集。

第00節：課程說明，有用的廢話

建議學習方式

這是一套圖文視訊教程，你可以看視訊來進行學習，也可以在公司不忙時看文字教程。但是在這裡我希望你先看一邊視訊，然後複習或者工作中使用的時候再來檢視文章（省去了你記筆記的時間，所有重點的內容，都寫成了文字教程）。

文章更新頻率

本篇文章每週更新三集，由於本人不是專業講師，所以在時間上沒辦法保證。

  • 你可以跟著文章的腳步，從第一篇開始就一起學習。因為更新頻率並不快，所以你能跟上學習進度，而不那麼費力。

  • 當然你也可以等都更新完再進行學習，這樣更連貫，可以一氣呵成，讓知識更有條理性。

當然，你可以隨心而為，不便考慮那麼多，最主要的是有所收穫。

學習適合人群

  • 前端愛好者： 希望升級技能，掌握全端開發的技術。
  • Flutter從業人員： Flutter從業人員一定也可以學到很多知識。
  • 移動開發愛好者： 想從事移動開發，但是還沒有入門的新手。

視訊特點和收看建議

視訊依據了Flutter官方網站，也參照了中文網站。所以內容難免有所重複，但是這些知識也經過了我精心篩選和順序的排序，目的是希望你能快速學會這項技能。

本人語速較慢，建議使用1.5倍速來進行觀看視訊，這樣體驗更好。

第01節：認識一下Flutter

我們先來拷貝官網的一段介紹，讓大家有一個直觀的認識：

Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構建高質量的原生使用者介面。 Flutter可以與現有的程式碼一起工作。在全世界，Flutter正在被越來越多的開發者和組織使用，並且Flutter是完全免費、開源的。

我覺的這句話的重點有三個：

  • 跨平臺： 現在Flutter至少可以跨4種平臺，甚至支援嵌入式開發。我們常用的有 Linux、Android、IOS，甚至可以在谷歌最新的作業系統上 Fuchsia 進行執行。到目前為止，Flutter算是支援平臺最多的框架了，良好的跨平臺性，直接帶來的好處就是減少開發成本。
  • 原生使用者介面： 它是原生的，讓我們的體驗更好，效能更好。用官方的話講就是平滑而自然的滑動效果和平臺感知，為您的使用者帶來全新的體驗。（可以看一下圖片，這是Flutter的表現）
  • 開源免費： 這個不用多說，我們只要學會並使用，這些都是免費的。這對於大公司是非常必要的，有人說你可以用破解版什麼的….說明你還是小公司，我們公司的軟體全部是正版，就更不用說作業系統和生產環境了，否則各種公司的侵權官司你都解決不了。
alt

主流框架的對比

其實說這一塊是帶有主觀性的，很容易遭到攻擊，我也不敢保證我說的就完全正確，但是我還是給大家簡單介紹一下。

  • Cordova： 個人認為 Flutter 可以完勝了，因為Cordova還是基於網頁技術進行包裝，利用外掛的形式開發移動應用的，就這一點。無論是效能還是體驗，Flutter 都可以完勝了。
  • RN（React Native）： RN的效率由於是將View編譯成了原生View,所以效率上要比基於Cordova的HTML5高很多,但是它也有效率問題,RN的渲染機制是基於前端框架的考慮,複雜的UI渲染是需要依賴多個 view 疊加.比如我們渲染一個複雜的 ListView,每一個小的控制元件,都是一個native 的view,然後相互組合疊加.想想此時如果我們的 list 再需要滑動重新整理,會有多少個物件需要渲染.所以也就有了前面所說的RN的列表方案不友好。
  • Flutter： 吸收了前兩者的教訓之後,在渲染技術上,選擇了自己實現(GDI),由於有更好的可控性,使用了新的語言Dart,避免了RN的那種通過橋接器與Javascript通訊導致效率低下的問題,所以在效能方面比RN更高一籌;
    有經驗的開發者可以開啟Android手機開發者選項裡面的顯示邊界佈局,發現Flutter的佈局是一個整體.說明 Flutter 的渲染沒用使用原生控制元件進行渲染。

也有很多前端小夥伴問我為什麼不出 RN 的課程，而是出這個，因為個人覺的 Flutter 要優於 RN，會在前端的領域霸佔更久的舞臺，所以出了這套免費視訊。

120fps超高效能

Flutter 採用 GPU 渲染技術，所以效能極高。

Flutter 編寫的應用是可以達到120fps(每秒傳輸幀數),這也就是說，它完全可以勝任遊戲的製作。而我們常說的RN的效能只能達到60fps，這也算是Flutter的一個超高競爭力吧。官方宣稱Flutter甚至會超過原生效能。

如果你想邁入移動遊戲領域，學習 Flutter 也是一個非常好的選擇。

Flutter生態情況

由於有 google 這樣的超級公司支援和推廣，Flutter 雖然剛出來沒有多久，但是生態還是非常好的，中國也有了大量的Flutter愛好者，那技術胖也是其中之一。

我們先來看一下Flutter的外掛情況。由法國人總結了一個Flutter的外掛列表，我們可以開啟看一下，裡邊的外掛非常豐富。所以小夥伴們完全沒有必要為Flutter的生態環境而擔憂。

github地址： github.com/Solido/awes…

alt

目前阿里集團已經開始使用Flutter來進行開發了，比如我們經常使用的閒魚，主要模組就是Flutter進行開發的。再給大家一個圖片，這些效果都是Flutter進行開發的。

Flutter 的官方網站為我們提供了一個showcase,有興趣的小夥伴可以點選下方連結進行檢視。

Showcase地址：github.com/Solido/awes…

小夥伴們，快點上車吧，一起來掌握這門新技能。

第02節：Flutter開發環境搭建Windows版

作為一個老程式，還是喜歡在windows上進行開發的，雖然公司用MacOS開發，但是這樣也會增加你學習的成本，所以我們把中心還是放在windows上進行講解。windows上的安裝也要相對麻煩一點。

特別說明:如果你還不會翻牆，科學上網。那你先停止學習吧，因為你不可能安裝成功，先去學學這些東西，能開啟谷歌了，再返回來學效率更高。

系統的基本要求

  • **作業系統:**必須 windows7 以上 64 位作業系統。（這個一般都能很好的滿足）
  • **磁碟空間：**大於 3 個 G，雖然官方說的是 400M，但是你還需要安裝Android Studio 和 虛擬機器，所以至少要 3 個 G 左右，如果能達到 5 個 G 就更好了（滿足多個虛擬機器的要求）。
  • 需要Git環境：Flutter 需要 git 環境的支援，所以這個也要有，作為一個前端，這個是必備工具，所以我在文章中就不教大家安裝了。

JAVA環境的安裝

既然要做原生應用了，而且是基於 Android 的，那還是需要我們安裝一下 JAVA 的環境的，我比一般得到一個新系統後首先做的就是這一步。這個就相當於你按一個軟體，你不用考慮太多。

JAVA 環境下載地址：

https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html複製程式碼

這個地址會隨著 Java 升級有所變化，如果已經改變了，請百度搜尋java下載或者直接到 Java 官網下載。

alt

先點選紅圈，然後根據你係統是 64 位還是 32 位選擇版本，我這裡是 64 位的，所以選擇最下面的 x64 版本。

下載完成後進行安裝，這個就直接下一步下一步就可以了。我一般都是安裝到系統盤，也就是C盤。

安裝完成到終端（命令列）裡輸入java，能出現下圖中的結果，說明安裝成功。

alt

下載安裝 FlutterSDK

  1. 去官網下載Flutter安裝包，下載地址:flutter.io/sdk-archive…(這個官方會經常改動，如果不可用，請通知我，我再進行修改。)我選擇的版本是0.9.4。

  2. 將安裝包 zip 解壓到你想安裝 Flutter SDK 的路徑（如： E:\fluter\flutter；注意，不要將 flutter 安裝到需要一些高許可權的路徑如C:\Program Files\，這個沒必要跟我一樣，憑藉自己喜好設定就好）。

  3. 在 Flutter 安裝目錄的 flutter檔案下找到flutter_console.bat，雙擊執行並啟動 flutter 命令列，接下來，你就可以在 Flutter 命令列執行 flutter 命令了。

  4. 配置環境變數，Flutter 的執行是要進行聯網的，由於國內的原因，所以你需要設定環境變數（牆翻的好，這步可以省略.視訊中有具體講解）

export PUB_HOSTED_URL=https://pub.flutter-io.cnexport FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn複製程式碼
  1. 如果你想在任何地方都可以執行 Flutter 命令，你需要把 Flutter SDK 的目錄配到環境變數中的 path 條目下。（這個也看視訊吧）

進行 Flutter doctor 的測試

在終端中輸入flutter doctor，你可能會得到下面類似的結果。

Android toolchain - develop for Android devices    • Android SDK at D:\Android\sdk    ✗ Android SDK is missing command line tools;
 download from https://goo.gl/XxQghQ    • Try re-installing or updating your Android SDK,      visit https://flutter.io/setup/#android-setup for detailed instructions.複製程式碼

這時候你得到的x比這個會多一些，因為我們還沒有安裝Android studio那下一步就是進行 Android Studio 的安裝。

Android Studio 的安裝

其實前邊的都是比較簡單的，到這一步就開始耗時間了。因為在安裝 Android Studio 的時候，要到 google 的網站下很多的包，但是谷歌被牆的厲害，所以比較耗時間，希望小夥伴可以有點耐心，一邊不行就裝兩遍。

  1. 下載Android Studio：直接到官網進行下載就可以了。下載地址：developer.android.com/進入後向下拉，然後看到如下介面，點選紅圈處進行下載。

    alt

  2. 安裝 Android Studio 軟體：這個安裝也就是差不多下一步下一步，如果你真的不會，給你個比較詳細的教程。www.cnblogs.com/xiadewang/p…，（需要注意的是，到下圖時，會變的很慢，它去谷歌下載了很多包，我大概下載了30分鐘）

    alt

  3. 開啟 Android Stuido 軟體，然後找到 Plugin 的配置，搜尋 Flutter 外掛。

    alt

    出現上圖，點中間的Search in repositories,然後點選安裝。

    alt

    安裝完成後，你需要重新啟動一下 Android Studio 軟體。

安裝Android證照

安裝好 Android Studio 後，再次開啟終端（命令列），輸入flutter doctor,這時候的x會明顯減少，但是你還是會遇到1-2個，其中有一個就是提示沒有安裝證照。安裝證照只要在終端裡執行下面的命令。

flutter doctor --android-licenses複製程式碼

然後會提示你選 Y/N，不要猶豫，一律選擇Y，就可以把證照安裝好。（說的都是一大堆一大堆的英文，我也看不懂是啥）

到這裡windows的開發環境就安裝的差不多了，但是你不要高興的太早，我們下節課安裝虛擬機器，並在虛擬機器上執行也許你會碰上很大的麻煩。（如果你跟著學，一定要把這節課做完，再繼續學習）

第03節：Flutter開發環境搭建Mac版

由於我公司使用的是Mac電腦，但是家裡錄課的不是Mac。所以這節是文字版，但我會寫的儘量詳細。希望你能通過閱讀文章，也能在mac上搭建起Flutter環境。

系統環境要求

Flutter因為是新出的框架，所以對系統還是有一定的要求的。

  • MacOS （64-bit）
  • 磁碟空間：大於700M，如果算上Android Studio等編輯工具，儘量大於3G。
  • 命令號工具：bash、mkdir、rm、git、curl、unzip、which、brew 這些命令在都可以使用。

注意：一般你會在brew這個命令下載坑，很多mac系統都沒有安裝這個，你可以進行安裝，因為這個和本知識關係性不大，所以我就不寫流程了，如果你出現問題，直接點選連結學習安裝就可以了。

學習安裝brew：segmentfault.com/a/119000001…

下載Flutter SDK包

這裡推薦去官網下載就好，我掛了梯子，速度並不慢。

網址：flutter.io/setup-macos…

進入網址後，向下拖拽一下，然後看到圖片中的內容，點選紅框處就可以下載了。

alt

如果你這也感覺麻煩，那可以直接點選下面的連結：

點選直接下載：storage.googleapis.com/flutter_inf…

這個會隨著版本的升級，而失效，所以不建議使用。

配置環境變數

壓縮包下載好以後，找個位置進行解壓。這個位置很重要，因為下面配置環境變數的時候要用到。比如你配置到了根目錄下的app資料夾。

1.開啟終端工具（這個我就不用寫了吧），使用vim進行配置環境變數，命令如下：

vim ~/.bash_profile複製程式碼

在開啟的檔案裡增加一行程式碼，意思是配置flutter命令在任何地方都可以使用。

export PATH=/app/flutter/bin:$PATH複製程式碼

提示：這行命令你要根據你把壓縮包解壓的位置來進行編寫，寫的是你的路徑，很有可能不跟文章一樣。

配置完成後，需要用source命令重新載入一下 ，具體命令如下：

source ~/.bash_profile複製程式碼

完成這部以後，就算我們flutter的安裝工作完成了，但是這還不能進行開發。可以使用命令來檢測一下，是否安裝完成了。

flutter -h複製程式碼

出現下面的結果，說明到目前為止，我們安裝一切順利。

alt

檢查開發環境

到上邊為止，我們安裝好了Flutter，但是還不具備開發環境。開發還需要很多軟體和外掛的支援，那到底需要哪些外掛和軟體那？我們可以使用Flutter為我們提供的命令來進行檢查：

flutter doctor複製程式碼
alt

如果你英文很好，你應該可以很容易讀出上面的檢測結果，有很多條目都沒有通過。需要我們安裝檢測結果一條條進行安裝，直到滿足開發環境。（如果有[!]x標誌，表示本行檢測沒有通過，就需要我們設定或者安裝相應的軟體了。）

有可能你的Android studio也沒有安裝，那麼你要先安裝這個編輯器，安裝好後，可以順便下載Android SDK。

Android Studio下載地址：www.android-studio.org/

開啟後選擇對應的Mac版本，如下圖（隨著網站的改版，可能略有不同）

alt

下載Android SDK的時候，記得搭上梯子，否則你會等到天荒地老（祝君一切順利）。

如果你有安裝，那麼第一步要作的是允許協議（android-licenses）。允許方法就是在終端執行如下命令：

flutter doctor --android-licenses複製程式碼

然後讓你輸入Y/N的時候，一路Y就可以了（至於啥意思，我也沒仔細看，大概就和安裝軟體的下一步下一步是一樣的，你按N是不能成功的）。

這不完成後，我們再使用flutter doctor進行檢測後，會看到還是有很多x。大概如下：

  To install, run:    brew install --HEAD libimobiledevice    brew install ideviceinstaller✗ ios-deploy not installed. To install:    brew install ios-deploy✗ CocoaPods not installed.    CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side.    Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.    For more info, see https://flutter.io/platform-plugins  To install:    brew install cocoapods    pod setup複製程式碼

其實大概意思就是我們需要這些軟體，Flutter推薦你用brew命令進行安裝。

我們可以直接在終端裡輸入下列命令（每輸完一個都要等一會，等待軟體包安裝完成）

brew install --HEAD libimobiledevicebrew install ideviceinstallerbrew install ios-deploybrew install cocoapodspod setup複製程式碼

安裝完這些，我大概花了1個半小時左右，我這是百兆光纖還加了梯子。

這個大問題解決以後，我們還需要為Android Studio安裝一下Flutter外掛（這個有可能你安裝過，如果出現下面的提示，說明你還沒有安裝）

✗ Flutter plugin not installed;
 this adds Flutter specific functionality.✗ Dart plugin not installed;
 this adds Dart specific functionality.複製程式碼

開啟Android Stuido 軟體，然後找到Plugin的配置，搜尋Flutter外掛。

alt

出現上圖，點中間的Search in repositories,然後點選安裝。

alt

安裝完成後，你需要重新啟動一下Android Studio軟體。

我做到這裡環境就全部OK了，只有一個沒有找到除錯裝置了，因為我沒有除錯的手機硬體，所以出現這個提示,不用管它。

[!] Connected devices    ! No devices available複製程式碼

Pub源的配置

如果你沒有梯子，一個人人都知道的原因，你還需要在環境變數裡配置一下Pub源，不然你是無法進行使用的。

執行：

vim ~/.bash_profile複製程式碼

增加兩行配置

export PUB_HOSTED_URL=https://pub.flutter-io.cnexport FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn複製程式碼

重新載入環境變數

source ~/.bash_profile複製程式碼

希望大家都能安裝成功，這只是我的安裝過程，不敢保證全部正確，但是我儘量詳細的描述了我Mac的搭建過程，希望可以幫助到Flutter的愛好者。

第04節：安裝AVD虛擬機器 Flutter跑起來

在基礎的環境安裝完成後，開啟Android Studio可以新建一個Flutter專案了。當然如果你有手機（真機）來進行預覽效果是最好的，但是為了我們前端追求的熱更新和講課的需要，我們還是需要建立一個虛擬機器的。

Android studio新建Flutter專案

開啟Andorid Studio ，會出現下面的介面，我們選擇第二項，新建Flutter專案。

alt

（如果你第一次新建專案，可能會有些慢，這個可能跟技術胖700元的電腦有關，土豪請無視這句話。）

開啟第二個視窗後，選擇第一個選項Flutter Application(flutter應用)。

alt

這步完成後，系統就會自動為我們建立一個Flutter專案（新建專案的過程也是很慢的，它要去谷歌下載gradle，這個東西很容下載失敗，如果失敗，可以多反覆試幾次）。

alt

如果你到了這一步，堅持住，馬上成功了。

安裝AVD虛擬機器

  1. 現在需要一個虛擬機器來執行我們的程式，可以點選Android Studio中的上方選單tool –AVD Manager選項。

  2. 出現新建選單，選擇Create Virtual Device.....,如果你一個虛擬機器也沒建過，這個選項在對話方塊的中間（我一定跟我的圖一樣）。

    alt

  3. 選擇虛擬機器型別，這個你隨意選就好，我選擇的是Nexus 5x。（如果你螢幕小，就選擇一個小螢幕的虛擬機器）

    alt

  4. 選擇系統，這裡儘量選擇最新的，我選擇了Android 9.0系統，選擇好後，又是一個漫長的等待過程。

  5. 安裝好後，點選開始按鈕，執行虛擬機器了（第一次執行，需要安裝系統，會慢一些），執行起來後，如下圖。

    alt

讓Flutter跑起來

虛擬機器執行以後，可以點選debug按鈕，讓Flutter程式跑起來。如果你幸運的話，你的Flutter程式經過編譯後，就會跑起來了。（這種幸運的機會很小，總會碰到一些小錯誤，我在這裡介紹兩個常見的錯誤）。

alt

Error runing Gradle 錯誤解決

在Debug專案的時候，應該最常見的錯誤就是類似下面這樣的錯誤了。

Launching lib/main.dart on Android SDK built for x86 in debug mode...Initializing gradle...Resolving dependencies...* Error running Gradle:ProcessException: Process "/Users/rabbit/develop/android/flutter_app/android/gradlew" exited abnormally:Project evaluation failed including an error in afterEvaluate {
  }. Run with --stacktrace for details of the afterEvaluate {
  } error.FAILURE: Build failed with an exception.* Where:Build file '/Users/rabbit/develop/android/flutter_app/android/app/build.gradle' line: 25* What went wrong:A problem occurred evaluating project ':app'.>
 Could not resolve all files for configuration 'classpath'.   >
 Could not find lint-gradle-api.jar (com.android.tools.lint:lint-gradle-api:26.1.2).     Searched in the following locations:         https://jcenter.bintray.com/com/android/tools/lint/lint-gradle-api/26.1.2/lint-gradle-api-26.1.2.jar* 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.orgBUILD FAILED in 0s  Command: /Users/rabbit/develop/android/flutter_app/android/gradlew app:propertiesFinished with error: Please review your Gradle project setup in the android/ folder.複製程式碼

這個問題的產生的原因，還是中國特有的問題，解決方案是改位阿里的連結。

第一步：修改掉專案下的android目錄下的build.gradle檔案，把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' 
  }複製程式碼

全部程式碼：

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.1.2'    
  }
  }allprojects { 
   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' 
  }    
  }
  }rootProject.buildDir = '../build'subprojects { 
   project.buildDir = "${rootProject.buildDir
  }/${project.name
  }"
  }subprojects { 
   project.evaluationDependsOn(':app')
  }task clean(type: Delete) { 
   delete rootProject.buildDir
  }複製程式碼

注意是有兩個部分進行了修改，不要只修改一處。

第二步：修改Flutter SDK包下的flutter.gradle檔案,這個目錄要根據你的SDK存放的位置有所變化。比如我放在了D盤Flutter目錄下，那路徑就是這個。

D:\Flutter\flutter\packages\flutter_tools\gradle複製程式碼

開啟檔案進行修改，修改程式碼如下（其實也是換成阿里的路徑就可以了）。

buildscript { 
   repositories { 
       //jcenter()        // maven { 
       //     url 'https://dl.google.com/dl/android/maven2'        // 
  }        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.1.2'    
  }
  }複製程式碼

然後再重新Debug一下，就基本可以啟動起來。

還有一種錯誤是說硬體沒有啟動GPU，需要下載安裝一個程式，這個提示的很清楚，不做過多的介紹了。

第05節：VSCode下如何玩轉Flutter

我已經使用VSCode有幾年了，記得是從剛出VSCode就開始使用了，我個人是不喜歡用Android Studio來進行開發的，感覺它太重量級了（我700元的電腦跑起來很費勁）。所以必須想辦法用VSCode進行開發。幸運的是VSCode已經有了Flutter外掛，而且也非常完美。

VSCode安裝Flutter外掛

開啟VSCode的Flutter外掛介面，然後用在搜尋框中輸入Flutter,第一個就是Flutter外掛了。點選install就可以進行安裝了（具體看下圖）。

alt

安裝完成後，是需要重啟VSCode的。有的小夥伴肯定會問用不用裝Dart外掛，其實是用裝的，只不過安裝完Flutter外掛後，Dart也為我們安裝好了，不用我們自己安裝。

這時候已經可以編寫Flutter程式了，但是還沒有預覽的地方，也就是虛擬機器沒有開啟。

一條命令快速開啟虛擬機器

現在想開啟虛擬機器需要開啟Android Studio,然後再開啟AVD虛擬機器，我的電腦足足要等2分鐘左右(土豪電腦除外)，我反正是不能接受的，一點不符合極客精神。下面就用一條命令，或者說製作一個批處理檔案，來直接開啟AVD虛擬機器，這樣就不用再等兩分鐘來開啟Android Studio了。

開啟虛擬機器需要兩個步驟：

  1. 開啟emulator.exe這個程式，你可以巧妙利用windows的查詢工具進行查詢。
  2. 開啟你設定的虛擬機器，批處理時需要填寫你設定的虛擬機器名稱。

具體步驟如下：

  1. 新建一個xxx.bat檔案到桌面，xxx的意思是，你可以自己取名字，隨意叫什麼都可以。我這裡叫EmulatorRun.bat.
  2. 查詢emulator.exe檔案的路徑，把查詢到的路徑放到bat檔案中（如圖）。
    alt

    你一般會查詢到兩個emulator.exe檔案，一個是在tools目錄下，一個是在emulator目錄下，我們選擇emulator目錄下的這個,複製它的路徑。

C:\Users\Administrator\AppData\Local\Android\Sdk\emulator\emulator.exe複製程式碼

(特別說明，你的和我的很有可能不一樣，你要複製i電腦中的路徑，不要複製這裡的程式碼)

  1. 開啟Android Studio，並檢視你的AVD虛擬機器名稱（如圖所示）。

    alt

    如果你覺的輸入不方便和怕出錯，你可以點選圖片後邊的筆型按鈕，進入編輯模式，複製這個名稱。

    alt

  2. 然後根據你複製的名稱，把bat檔案輸入成如下形式。

C:\Users\Administrator\AppData\Local\Android\Sdk\emulator\emulator.exe -netdelay none -netspeed full -avd Nexus_5X_API_28複製程式碼

進行儲存後雙擊bat檔案，就可以迅速開啟虛擬機器了。

引數解釋：

  • -netdelay none :設定模擬器的網路延遲時間，預設為none，就是沒有延遲。
  • -netspeed full: 設定網路加速值，full代表全速。

flutter run 開啟預覽

現在模擬器也有了，VSCode也支援Flutter開發了.現在可以在VSCode中直接開啟終端，快捷鍵是ctrl+~，然後在終端中輸入下面的命令。

flutter run複製程式碼

經過短暫的編譯後就會啟動我們的程式了（如圖）。

alt

到此處，終於搭建出了適合前端程式設計師的開發環境，下節課開始，我們正式來學習Flutter程式碼的編寫知識。

第06節：寫一個HelloWorld程式

環境搭建好後，按照慣例就是寫一個HelloWorld程式，這節課就用最簡單的結構，寫一個HelloWorld，並介紹一下相關的Dart語法。

HelloWorld整體程式碼

先快速寫一個最簡單的結構體，這個介面只包含兩部分，頭部訂單的藍色bar條和螢幕中間區域的內容。（請看下面程式碼）

這段程式碼寫在根目錄\lib\main.dart檔案中，這就是Flutter主檔案。

import 'package:flutter/material.dart';
//主函式（入口函式），下面我會簡單說說Dart的函式void main() =>
runApp(MyApp());
// 宣告MyApp類class MyApp extends StatelessWidget{ 
 //重寫build方法  @override  Widget build(BuildContext context){ 
   //返回一個Material風格的元件   return MaterialApp(      title:'Welcome to Flutteraa',      home:Scaffold(        //建立一個Bar，並新增文字        appBar:AppBar(          title:Text('Welcome to Flutter'),        ),        //在主體的中間區域，新增一個hello world 的文字        body:Center(          child:Text('Hello World'),        ),      ),    );
  
  }
  }複製程式碼

寫完後開啟終端，執行flutter run,等待一小會，就會看到虛擬機器中顯示了Hello World的內容。

alt

也許你對上面的語法還不夠了解，但你不必驚慌，我們會一點點進行說明，那先來看一下Dart中的函式。

Dart語法Function函式

Dart是物件導向的語言，即使是函式也是物件，並且屬於Function型別的物件。這意味著函式可以分配給變數或作為引數傳遞給其他函式。當然你也可以像JavaScript一樣，呼叫一個函式。

比如我們寫Hello World中的第2行，就是一個函式。

void main() =>
runApp(MyApp());
複製程式碼

因為這個函式體裡只有一行程式碼，所以可以直接使用=>
來省略{
}，只有函式體裡只有一行時，才可以使用，否則請使用大括號。

（ps:學習Dart語法時你要記住一條，Dart裡一切皆物件，包括數字和函式…….,沒物件的程式設計師小哥哥可要抓緊學習了，程式中自有顏如玉的時代到了）

StatefulWidget和StatelessWidget

  • StatefulWidget ： 具有可變狀態的視窗部件，也就是你在使用應用的時候就可以隨時變化，比如我們常見的進度條，隨著進度不斷變化。
  • StatelessWidget：不可變狀態視窗部件，也就是你在使用時不可以改變，比如固定的文字（寫上後就在那裡了，死也不會變了）。

這個HelloWorld程式碼就繼承了不可變視窗部件StatelessWidget。

VSCode中如何熱載入

用VSCode編寫Flutter不好的一點就是要手動載入更新應用，個人感覺這至少會降低10%的工作效率。

當我們執行flutter run以後，會有一段紅色文字的提示，說明了我們可以作的事情。

To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".An Observatory debugger and profiler on Android SDK built for x86 isavailable at: http://127.0.0.1:64590/You can dump the widget hierarchy of the app (debugDumpApp) by pressing "w".To dump the rendering tree of the app (debugDumpRenderTree), press "t".For layers (debugDumpLayerTree), use "L";
 for accessibility (debugDumpSemantics), use "S" (for traversal order) or "U" (for inverse hit test order).To toggle the widget inspector (WidgetsApp.showWidgetInspectorOverride), press "i".To toggle the display of construction lines (debugPaintSizeEnabled),press "p".To simulate different operating systems, (defaultTargetPlatform), press "o".To display the performance overlay (WidgetsApp.showPerformanceOverlay), press "P".To save a screenshot to flutter.png, press "s".To repeat this help message, press "h". To detach, press "d";
 to quit, press "q".複製程式碼

我們來看幾個重點的：

  • r 鍵：點選後熱載入，也就算是重新載入吧。
  • p 鍵：顯示網格，這個可以很好的掌握佈局情況，工作中很有用。
  • o 鍵：切換android和ios的預覽模式。
  • q 鍵：退出除錯預覽模式。

常用的一般就這些，剩下的命令以後碰到我們再進行講解。

如果你覺的這太麻煩了，我們可以開啟Debug模式，這時就可以實現真正的熱載入了（我們儲存，效果立即就會改變），但有時報錯也挺煩人的。（下圖時Debug模式）

alt

這節課算我們上手編寫程式碼的第一節課，這個基本的結構很重要，小夥伴們可以多練習幾遍，把基本結構記熟練。

第一季到這裡就結束了，我希望小夥伴們都能把環境搭建出來。我們會緊接著開啟第二季的視訊，開始Flutter基本元件的講解。希望你持續關注。

學習討論群，歡迎加入

學習討論QQ群：674639629(千人群)

入群問題：Flutter出自於哪個公司？

入群答案：google

視訊列表：

  1. 第一節：課程說明，有用的廢話 v.qq.com/x/page/a078…
  2. 第二節：認識一下Flutter v.qq.com/x/page/d078…
  3. 第三節：Flutter開發環境搭建Windows版 v.qq.com/x/page/x078…
  4. 第四節：Flutter虛擬機器的安裝 v.qq.com/x/page/h078…
  5. 第五節：在VSCode下編寫Flutter程式碼 v.qq.com/x/page/p078…
  6. 第六節：Flutter第一個HelloWorld程式 v.qq.com/x/page/x078…

bilibli視訊地址：

全集地址：www.bilibili.com/video/av358…

請點選關注，第二季馬上開始更新…….

來源：https://juejin.im/post/5be3d54cf265da611d6624d3

相關文章