什么是Flutter

Flutter 是 Google 開源的 UI 工具包，幫助開發(fā)者通過一套代碼庫(kù)高效構(gòu)建多平臺(tái)精美應(yīng)用，支持移動(dòng)、Web、桌面和嵌入式平臺(tái)。

本文以Win10電腦、開發(fā)安卓為例搭建Flutter開發(fā)環(huán)境

Win10電腦?。。?！看清楚?。?/h2>

本文假設(shè)你是一個(gè)安卓開發(fā)人員，電腦上已經(jīng)安裝了完整的安卓開發(fā)環(huán)境，可以正常編寫安卓代碼并編譯運(yùn)行安卓apk（包括Java開發(fā)環(huán)境，AndroidStudio,Android SDK,Git for Window）

1.下載 Flutter SDK

Flutter SDK for window

Flutter SDK for macos

Flutter SDK for linux

2.解壓下載到的壓縮包

以window為例，下載好的壓縮包為 flutter_windows_v1.12.13+hotfix.5-stable.zip （可能隨著官方更新版本會(huì)不一樣）

解壓到相應(yīng)目錄

如 E:\flutter

解壓后目錄如下圖所示

image.png

3.配置環(huán)境變量

把第二步的解壓后的 flutter 目錄下的 flutter\bin 和 dart-sdk\bin 添加到系統(tǒng)變量的Path下

如果解壓到 E:\flutter
則把 E:\flutter\bin 和 E:\flutter\bin\cache\dart-sdk\bin 添加到系統(tǒng)變量的Path下

添加后如下圖所示

image.png

flutter_env_path.png
如果你在國(guó)內(nèi)使用 Flutter，那么你可能需要找一個(gè)與官方同步的可信的鏡像站點(diǎn)，幫助你的 Flutter 命令行工具到該鏡像站點(diǎn)下載其所需的資源。
你需要為此設(shè)置兩個(gè)環(huán)境變量: PUB_HOSTED_URL 和 FLUTTER_STORAGE_BASE_URL，然后再運(yùn)行 Flutter 命令行工具，查看設(shè)置教程。

Flutter 社區(qū)
FLUTTER_STORAGE_BASE_URL: https://storage.flutter-io.cn
PUB_HOSTED_URL: https://pub.flutter-io.cn

清華大學(xué) TUNA 協(xié)會(huì)
FLUTTER_STORAGE_BASE_URL: https://mirrors.tuna.tsinghua.edu.cn/flutter
PUB_HOSTED_URL: https://mirrors.tuna.tsinghua.edu.cn/dart-pub

添加 FLUTTER_STORAGE_BASE_URL 和 PUB_HOSTED_URL環(huán)境變量，和Path環(huán)境變量同級(jí)，不要添加到Path里
添加后如下圖所示:

image.png

image.png

添加完上面的環(huán)境變量后，在命令行窗口運(yùn)行flutter --version 和 dart --version 命令，測(cè)試環(huán)境變量是否配置成功，如果成功，會(huì)有相應(yīng)版本信息輸出

4.配置Android Studio

1.下載 Flutter 插件

File -> Settings -> Plugins 搜索 Flutter,安裝插件，重啟AndroidStudio,Flutter插件安裝完成后，會(huì)把Dart插件也一起安裝好
安裝后如下圖所示

image.png

<meta charset="utf-8">

2.設(shè)置Dart SDK路徑

File -> Settings -> Languages & Frameworks->Dart 設(shè)置相應(yīng)路徑并且點(diǎn)擊Apply保存

設(shè)置完成后，如下圖所示

image

3.設(shè)置Flutter SDK路徑

File -> Settings -> Languages & Frameworks->Flutter 設(shè)置相應(yīng)路徑并且點(diǎn)擊Apply保存

設(shè)置完成后，如下圖所示

image

5.檢查Android Studio Flutter開發(fā)環(huán)境是否配置好

運(yùn)行 flutter doctor 輸出如下信息代表環(huán)境已經(jīng)搭建成功

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.12.13+hotfix.5, on Microsoft Windows [Version 10.0.17134.1099], locale zh-CN)

[√] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[√] Android Studio (version 3.5)
[!] IntelliJ IDEA Community Edition (version 2019.3)
    X Flutter plugin not installed; this adds Flutter specific functionality.
[√] Connected device (1 available)

! Doctor found issues in 1 category.

6.升級(jí)Flutter SDK

運(yùn)行 flutter upgrade 升級(jí) 這個(gè)升級(jí)過程是自動(dòng)的。

如果運(yùn)行 flutter upgrade 命令升級(jí)失敗，可以把 第二步的 2.解壓下載到的壓縮包 解壓出來的文件夾從電腦上刪除，重新在第一步 1.下載 Flutter SDK 的地址下載最新的sdk包，重新解壓到第二步 2.解壓下載到的壓縮包 里的相應(yīng)目錄下即可

7.注意事項(xiàng)

Flutter SDK自帶對(duì)應(yīng)版本的Dart SDk,它們是配套使用的，某個(gè)Flutter SDK版本并不能使用任意的DartSDK版本，所以 3.配置環(huán)境變量 4.配置Android Studio 第3.第4步的Flutter SDK和Dart SDk都得指向第二步 2.解壓下載到的壓縮包 解壓出來的flutter\bin 和 dart-sdk\bin,否則可能會(huì)有些意想不到的異常。

意外BUG：

在flutter 命令里邊 輸入 flutter doctor 報(bào)了一個(gè)錯(cuò)誤：

? Android license status unknown.

字面意思是Android 證書無效，解決辦法：
在Android studio 里找到 tools 如圖：

image.png

點(diǎn)開 SDK Manager：

image.png

點(diǎn)開 SDK Tools

image.png

取消勾選底部選項(xiàng)：

image.png

再勾選選項(xiàng)：

image.png

之后等待他下載證書，最后finish就好了

完?。。。?/h2>