Flutter系列教程——環(huán)境搭建（一）

一塔粒、Flutter 介紹

Flutter 是 Google 開源的 UI 工具包阀溶，幫助開發(fā)者通過一套代碼庫高效構建多平臺精美應用，支持移動玄括、Web冯丙、桌面和嵌入式平臺。

Flutter 的主要組成部分包括：

基礎庫
Skia 2D渲染引擎
定制化設計風格的組件

Flutter 引擎

? Flutter 的引擎使用 C++ 開發(fā)遭京，通過谷歌的 Skia 圖形庫提供底層渲染支持胃惜，亦提供平臺相關的 SDK泞莉，例如 Android 和 iOS。

基礎庫

? 基礎庫由 Dart 編寫船殉，提供了用 Flutter 構建應用所需的基本的類和函數(shù)鲫趁。

組件

? Flutter 是通過組織、創(chuàng)建不同的組件完成用戶界面設計的捺弦。

定制化設計風格的組件

? Flutter 框架包含了兩套符合特定設計語言的組件饮寞。

? Material Design 的組件實現(xiàn)的是同名的谷歌設計語言

? Cupertino 的組件模仿了蘋果 iOS 的設計。

1.1 系統(tǒng)要求：

名稱	說明
編程語言	Dart
操作系統(tǒng)	Windows列吼、macOS幽崩、Linux （iOS、Android寞钥、web）
官方網(wǎng)站	https://flutter.dev/docs
中文網(wǎng)站	https://flutter.cn/
源代碼庫	https://github.com/flutter/flutter

二慌申、Flutter準備

2.1 下載 Flutter SDK：

macOS Flutter SDK 版本列表

2.2 解壓文件

cd Desktop/GitHub
unzip ~/Downloads/flutter_macos_v1.9.1+hotfix.4-stable.zip

2.3 配置 Flutter 的 PATH 環(huán)境變量

export PATH="$PATH:`pwd`/flutter/bin"

# 驗證 flutter 是否可用
flutter

image-20191016150620834.png

2.4 二進制文件預下載（可選）

# 可以通過下面這個命令預先下載 iOS 和 Android 的開發(fā)二進制文件
flutter precache

# 更多 precache 使用方式
flutter help precache

2.5 升級 Flutter 版本

參考鏈接：https://flutter.cn/docs/development/tools/sdk/upgrading

2.6 環(huán)境配置檢測

# 查看當前環(huán)境是否需要安裝其他的依賴
flutter doctor

# 解決報錯問題

# 1.同意 Android 許可協(xié)議
flutter doctor --android-licenses

# 2.安裝 Flutter 插件，支持Flutter開發(fā)工作流 (運行理郑、調(diào)試蹄溉、熱重載等)
# 3.安裝 Dart 插件，提供代碼分析 (輸入代碼時進行驗證您炉、代碼補全等)
# 注意：（Flutter 會附帶安裝 Dart SDK柒爵，不需要再對 Dart 單獨安裝）
打開 Android Studio、IDEA赚爵、VSCode 安裝 Flutter 插件

2.7 更新 PATH 環(huán)境變量（全局配置）

出現(xiàn)： flutter: command not found 問題

原因：設置環(huán)境變量的時候棉胀，直接在命令行通過 export 命令進行的，并沒有全局設置冀膝，需要做如下修改唁奢。

# 將flutter/bin添加到.bash_profile或.zshrc文件中
export PATH="$PATH:[替換為FlutterSDK保存的路徑]/flutter/bin"

# 修改.bash_profile文件，并更新環(huán)境變量 (適用于： Linux窝剖、macOS Mojave 之前的系統(tǒng))
open -e $HOME/.bash_profile
source $HOME/.bash_profile

# 修改.zshrc文件麻掸，并更新環(huán)境變量 (適用于：macOS Catalina)
open -e $HOME/.zshrc
source $HOME/.zshrc

三、平臺配置

macOS 可以開發(fā) iOS赐纱、Android 和 Web（技術預覽版正式發(fā)布）三個平臺的 Flutter 應用脊奋。

iOS 開發(fā)環(huán)境

1. 安裝 Xcode

2. 配置 Xcode command-line tools (可選)

# 安裝多個 Xcode，可以通過命令配置配置
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

3. Xcode 的許可協(xié)議（可選）

# 打開 Xcode疙描，或者通過命令同意許可協(xié)議
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

4. 配置 iOS 模擬器

# 運行模擬器
open -a Simulator

Android 開發(fā)環(huán)境

1. 安裝 Android Studio

2. 配置 Android 模擬器

激活機器上的 VM acceleration 選項诚隙。
啟動 Android Studio > Tools > Android > AVD Manager，然后選擇 Create Virtual Device 選項淫痰。（只有在 Android 項目中才會顯示 Android 子選項最楷。）
選擇相應的設備并選擇 Next 選項。
選擇一個或多個你想要模擬的 Android 版本的系統(tǒng)鏡像，然后選擇 Next 選項籽孙。推薦選擇 x86 或者 x86_64 鏡像烈评。
在 Emulated Performance 下選擇 Hardware - GLES 2.0 選項來開啟硬件加速。
確保 AVD 選項配置正確犯建，并選擇 Finish 選項讲冠。想要查看上述步驟的更多詳細信息，請查看 Managing AVDs 頁面适瓦。
在 Android Virtual Device Manager 中竿开，點擊工具欄中的 Run 選項，模擬器會啟動并為你所選擇的系統(tǒng)版本和設備顯示出相應的界面玻熙。

Web 開發(fā)環(huán)境

1. 安裝 Chrome

四否彩、Flutter 常用命令

1. 通過 `flutter --help` 查看 Flutter 常用命令

常用命令:
  flutter create <output directory> 創(chuàng)建項目
  flutter run [options]             運行項目
  
使用: flutter <command> [arguments]

全局選項:
-h, --help                  打印幫助信息
-v, --verbose               動態(tài)日志

-d, --device-id             目標設備 ID 或名稱
    --version               查看命令版本
    --suppress-analytics    禁止分析報告
    --bug-report            提交 bug

可用的命令:
  analyze          分析 dart 代碼
  attach           附加應用到連接中的設備
  build            構建應用
  channel          列出或者切換通道
  clean            刪除 build/ 文件夾
  config           配置 flutter
  create           創(chuàng)建項目
  devices          列出已連接的設備
  doctor           檢查 flutter 信息
  drive            Runs Flutter Driver tests for the current project.
  emulators        列出可用的設備
  format           格式化 Dart 文件
  fuchsia_reload   熱加載
  help             顯示幫助信息
  install          在連接的設備中安裝 app
  logs             顯示正在運行的應用的日志
  packages         包
  precache         Populates the Flutter tool's cache of binary artifacts.
  run              運行應用
  screenshot       為應用截圖
  stop             停止運行
  test             Run Flutter unit tests for the current project.
  trace            Start and stop tracing for a running Flutter app.
  upgrade          更新 flutter

五、運行效果

1. 創(chuàng)建 Flutter 應用

# 創(chuàng)建新的 Flutter 應用
cd Desktop/GitHub
flutter create my_app

2. 啟動 Flutter 應用

# 切換目錄
cd Desktop/GitHub/my_app

# 注意：首先要啟動模擬器 (iOS 或 Android)

# 可用模擬器設備列表
flutter devices

# 運行 Flutter 應用
flutter run -d 設備ID或名稱

3. iOS嗦随、Android 運行效果

問題匯總

Q1. Got socket error trying to find package cupertino_icons at https://pub.dartlang.org.

# 修改flutter所需資源的訪問方式
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

Q2. Waiting for another flutter command to release the startup lock...

# 刪除flutter lockfile文件重新啟動
rm Desktop/GitHub/flutter/bin/cache/lockfile