Flutter學(xué)習(xí)筆記第一課-環(huán)境搭建

一、了解一下Flutter

Flutter 是 Google推出并開源的移動應(yīng)用開發(fā)框架衷蜓，主打跨平臺拟糕、高保真判呕、高性能。開發(fā)者可以通過 Dart語言開發(fā) App已卸，一套代碼同時運行在 iOS 和 Android平臺佛玄。 Flutter提供了豐富的組件、接口累澡，開發(fā)者可以很快地為 Flutter添加 native擴(kuò)展梦抢。同時 Flutter還使用 Native引擎渲染視圖，這無疑能為用戶提供良好的體驗愧哟。

跨平臺：

Flutter與用于構(gòu)建移動應(yīng)用程序的其它大多數(shù)框架不同奥吩，因為Flutter既不使用WebView，也不使用操作系統(tǒng)的原生控件蕊梧。相反霞赫，F(xiàn)lutter使用自己的高性能渲染引擎來繪制widget。這樣不僅可以保證在Android和iOS上UI的一致性肥矢，而且也可以避免對原生控件依賴而帶來的限制及高昂的維護(hù)成本端衰。

原生用戶界面：

它是原生的，讓我們的體驗更好甘改，性能更好旅东。用官方的話講就是平滑而自然的滑動效果和平臺感知，為您的用戶帶來全新的體驗十艾。

二抵代、Flutter開發(fā)環(huán)境搭建Windows版

下載安裝 FlutterSDK

1.下載地址:https://flutter.io/sdk-archive/#windows將安裝包zip解壓到你想安裝Flutter SDK的路徑（如： E:\flutter；注意：不需要將flutter安裝到一些高權(quán)限的路徑如C:\Program Files)
2.設(shè)置環(huán)境變量忘嫉，F(xiàn)lutter的執(zhí)行是要進(jìn)行聯(lián)網(wǎng)的荤牍，由于國內(nèi)的原因，所以你需要設(shè)置環(huán)境變量

export PUB_HOSTED_URL=https://pub.flu tter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

如果你想在任何地方都可以執(zhí)行Flutter命令庆冕，你需要把Flutter SDK的目錄配到環(huán)境變量中的path條目下
3.進(jìn)行Flutter doctor 的測試康吵，打開終端執(zhí)行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.

下一步就去安裝Android studio

下載安裝 Android Studio

下載Android Studio：直接到官網(wǎng)進(jìn)行下載就可以了访递。下載地址：https://developer.android.com/
安裝Android Studio 軟件：安裝完后打開Android Stuido 軟件晦嵌，然后找到Plugin的配置，搜索Flutter插件。安裝完成后耍铜，你重新啟動一下Android Studio。

安裝Android證書

安裝好Android Studio后跌前，再次打開終端輸入flutter doctor --android-licenses安裝證書

安裝AVD虛擬機(jī)

1.打開Andorid Studio 棕兼，新建Flutter項目。
2.找到菜單欄中tool - AVD Manager選項抵乓，選擇Create Virtual Device伴挚，選擇你喜歡的虛擬機(jī)類型。
3.安裝好后灾炭，點擊開始按鈕茎芋，運行虛擬機(jī)

運行Flutter程序

如果你是1.0以下的版本，可能會報Error running Gradle錯誤蜈出，如下

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.org

BUILD FAILED in 0s
  Command: /Users/rabbit/develop/android/flutter_app/android/gradlew app:properties

Finished with error: Please review your Gradle project setup in the android/ folder.

這個坑已經(jīng)踩過了田弥，已經(jīng)找到解決辦法，只需要修改掉項目下的android目錄下的build.gradle文件铡原，把google() 和 jcenter()這兩行去掉偷厦，改為阿里的代理鏈接。

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

allprojects {
    repositories {
        //google()
        //jcenter()
        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/jcenter' }
    }
}

如何使用VS code進(jìn)行開發(fā)

到這里燕刻，基本可以運行起來了只泼，但是用Android Studio來進(jìn)行開發(fā)的話，感覺它太重量級了卵洗，還是習(xí)慣了用VS code并且VS code已經(jīng)有了Flutter插件请唱，搜索安裝即可。
安裝完導(dǎo)入項目过蹂，打開VS code終端輸入命令flutter run開啟預(yù)覽

如何快速開啟虛擬機(jī)

如果使用VS code開發(fā)的話十绑，打開虛擬機(jī)的可以直接通過快捷方式打開，不再通過打開Android Studio榴啸，然后再去打開AVD虛擬機(jī)孽惰。
開啟虛擬機(jī)需要兩個步驟：
1.新建一個xxx.bat文件到桌面，xxx輸入自己取的名字
2.查找emulator.exe文件的路徑鸥印，然后把emulator.exe文件的路徑 + 你安裝的虛擬機(jī)名稱放到bat文件中勋功，如下

C:\Users\Administrator\AppData\Local\Android\Sdk\emulator\emulator.exe -netdelay none -netspeed full -avd Nexus_4_API_26

保存后雙擊bat文件，就可以迅速打開虛擬機(jī)了
參數(shù)解釋：
-netdelay none :設(shè)置模擬器的網(wǎng)絡(luò)延遲時間库说，默認(rèn)為none狂鞋，就是沒有延遲。
-netspeed full: 設(shè)置網(wǎng)絡(luò)加速值潜的，full代表全速骚揍。