Flutter簡介

Flutter是Google開源的構(gòu)建用戶界面（UI）工具包，幫助開發(fā)者通過一套代碼庫高效構(gòu)建多平臺精美應(yīng)用，支持移動、Web、桌面和嵌入式平臺。 Flutter 開源、免費(fèi)，擁有寬松的開源協(xié)議，適合商業(yè)項(xiàng)目。目前Flutter已推出穩(wěn)定的2.5版本。

Flutter Mac環(huán)境搭建

下載Flutter SDK

• 進(jìn)入Flutter官網(wǎng)

image.png

• 選擇 MacOS 系統(tǒng)

image.png

• 下載最新版壓縮包

image.png

• 解壓SDK包

下載完成，把解壓出來的flutter包放到根目錄下即~/flutter。因?yàn)?code>Flutter的SDK中包含了很多命令行工具，我們需要配置環(huán)境變量，所以建議安裝到平時放命令行工具的地方，推薦放在根目錄~/flutter(僅供參考)

配置環(huán)境變量

flutter運(yùn)行的時候，需要去官方下載所需的資源，那么沒有梯子的小伙伴就需要鏡像服務(wù)器。

image.png

• 查看Shell默認(rèn)環(huán)境

$ echo $SHELL
/bin/bash

來到你對應(yīng)Shell的配置文件進(jìn)行配置
如果你默認(rèn)使用的是bash，那么配置~/.bash_profile
如果你默認(rèn)使用的是zsh，那么配置~/.zshrc,

• 配置鏡像
  在配置文件~/.bash_profile中添加如下

# Flutter鏡像配置
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

• 配置Flutter環(huán)境變量
  接下來把Flutter命令行工具的路徑配置一下，還是shell對應(yīng)的配置文件中。

#Flutter 配置
export FLUTTER=～/flutter
export PATH=$FLUTTER/bin:$PATH

• 終端執(zhí)行下面命令，載入配置

#bash .bash_profile 
// 如果你是zsh環(huán)境，就配置zsh文件。執(zhí)行$ source ~/.zshrc
$ source ~/.bash_profile

• 查看Flutter是否配置完成。Flutter有一個doctor檢測命令，用于檢測 flutter環(huán)境。

$ flutter doctor

image.png

安裝 Android Studio

• 下載并安裝 Android Studio
• 配置SDK
  手動安裝Android SDK Tools (Obslete)和Android SDK Command-line Tools工具包，下載安裝。Android Studio -> 偏好設(shè)置

image.png

• 安裝Android Studio插件
  Android Studio -> 偏好設(shè)置 -> 安裝flutter插件和Dart插件

image.png

• 創(chuàng)建Flutter工程

image.png

Flutter環(huán)境變量介紹

上面我們在搭建環(huán)境的時候，配置了環(huán)境變量。那什么是環(huán)境變量？

• 環(huán)境變量就是讓shell能夠找到工具，比如上面配置的export FLUTTER=～/flutter，就是讓shell找到flutter sdk
• shell就是操作系統(tǒng)
• Mac電腦的shell類型：bash、zsh(更強(qiáng))
• 不同的shell有不同的配置文件，bash的配置文件目錄~/.bash_profile，Linux系統(tǒng)中文件名稱前面有個.表示該文件是隱藏文件

flutter的命令行工具目錄 ～/flutter/bin/flutter，下面進(jìn)行證明？

$ which flutter
/Users/wn/flutter/bin/flutter

flutter命令行工具是shell在調(diào)用，而Android Studio開發(fā)工具在創(chuàng)建flutter項(xiàng)目的時候，需要配置flutter sdk路徑，編寫了.dart代碼，并且把MaterialApp顯示出來，是Android Studio在調(diào)用flutter命令行工具。

配置環(huán)境變量推薦使用終端命令，因?yàn)橛浭卤緯兄形姆枺乐挂恍┓柵渲缅e誤，又不容易排查

// 使用vi命令進(jìn)行配置
$ vi ~/.bash_profile

// 主要用來配置PATH路徑  
// $PATH表示把前面路徑讀進(jìn)去  $表示展開PATH變量
// 不同的命令可以使用 : 隔開，比如 export PATH=$FLUTTER/bin:$PATH:$PATH1 
export FLUTTER=/Users/wn/flutter
export PATH=$FLUTTER/bin:$PATH

$ fluttera  //表示配置的環(huán)境變量中沒有找到 fluttera 指令
-bash: fluttera: command not found

注意！??！

• 如果有的電腦是由原來的bash切換到zsh，需要在~/.bash_profile、~/.zshrc都配置環(huán)境變量
• 也可以在~/.zshrc中配置source ~/.bash_profile，加載出bash中配置過的環(huán)境變量

遇到問題

• 問題一：解決許可證問題

image.png

解決辦法：打開終端輸入下面的命令，按提示都輸入y，回車直到最后出現(xiàn) All SDK package licenses accepted

$ flutter doctor --android-licenses

image.png