### 1.2.2 MacOS環境搭建
首先解決網絡問題,參見上節“Windows環境搭建”。
1\.命令行工具
Flutter依賴的命令行工具有bash、mkdir、rm、git、curl、unzip、which。
2\.下載安裝Flutter SDK
請按以下步驟進行下載安裝Flutter SDK:
步驟1:去Flutter官網下載其最新可用的安裝包。
注意 Flutter的渠道版本會不停變動,請以Flutter官網為準。另外,在中國大陸地區,要想獲取安裝包列表或下載安裝包有可能發生困難,讀者也可以去Flutter GitHub項目下去下載安裝Release包。
Flutter官網下載地址:<https://flutter.io/docs/development/tools/sdk/archive#macos>
Flutter GitHub下載地址:<https://github.com/flutter/flutter/releases>
步驟2:解壓安裝包到你想安裝的目錄,如:
- - - - - -
```
cd /Users/ksj/Desktop/flutter/
unzip /Users/ksj/Desktop/flutter/v0.11.9.zip.zip
```
- - - - - -
步驟3:添加Flutter相關工具到path中:
- - - - - -
```
export PATH=`pwd`/flutter/bin:$PATH
```
- - - - - -
3\.運行Flutter命令安裝各種依賴
運行以下命令查看是否需要安裝其他依賴項:
- - - - - -
`flutter doctor`- - - - - -
該命令檢查你的環境并在終端窗口中顯示報告。Dart SDK已經捆綁在Flutter里了,沒有必要單獨安裝Dart。仔細檢查命令行輸出以獲取可能需要安裝的其他軟件或進一步需要執行的任務(以粗體顯示)。如下代碼中粗體提示表示,Android SDK缺少命令行工具,需要下載并且提供了下載地址,通常這種情況只需要把網絡連好,VPN開好,然后重新運行flutter doctor命令。
- - - - - -
```
[-] Android toolchain - develop for Android devices
? Android SDK at /Users/obiwan/Library/Android/sdk
x? 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.
```
- - - - - -
注意 一旦你安裝了任何缺失的依賴,需再次運行flutter doctor命令來驗證你是否已經正確地設置了,同時需要檢查移動設備是否連接正常。
4\.添加環境變量
使用vim命令打開~/.bash\_profile文件,添加如下內容:
- - - - - -
```
export ANDROID_HOME=~/Library/Android/sdk //android sdk目錄
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools
export PUB_HOSTED_URL=https://pub.flutter-io.cn //國內用戶需要設置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //國內用戶需要設置
export PATH=/Users/ksj/Desktop/flutter/flutter/bin:$PATH // 直接指定flutter的bin地址
```
- - - - - -
注意 請將PATH=/Users/ksj/Desktop/flutter/flutter/bin更改為你的路徑即可。
完整的環境變量設置如圖1-13所示。
設置好環境變量以后,請務必運行source$HOME/.bash\_profile刷新當前終端窗口,以使剛剛配置的內容生效。

圖1-13 MacOS環境變量設置
5\.編輯器設置
如果使用Flutter命令行工具,可以使用任何編輯器來開發Flutter應用程序。輸入flutter help在提示符下查看可用的工具。但是筆者建議最好安裝一款功能強大的IDE來進行開發,畢竟開發調試運行打包的效率會更高。由于MacOS環境既能開發Android應用也能開發iOS應用,Android設置請參考1.2.1節“Windows環境搭建”中的“安裝Android Studio”,接下來我們會介紹Xcode使用方法。
(1)安裝Xcode
安裝最新Xcode。通過鏈接下載:<https://developer.apple.com/xcode/>,或通過蘋果應用商店下載:<https://itunes.apple.com/us/app/xcode/id497799835>。
(2)設置iOS模擬器
要準備在iOS模擬器上運行并測試你的Flutter應用。要打開一個模擬器,在MacOS的終端輸入以下命令:
- - - - - -
```
open -a Simulator
```
- - - - - -
可以找到并打開默認模擬器。如果想切換模擬器,可以打開Hardware下在Device菜單選擇某一個模擬器,如圖1-14所示。
打開后的模擬器如圖1-15所示。
接下來,在終端運行flutter run命令或者打開Xcode,如圖1-16所示選擇好模擬器。點擊運行按鈕即可啟動你的應用。
(3)安裝到iOS設備
要在蘋果真機上測試Flutter應用,需要一個蘋果開發者賬戶,并且還需要在Xcode中進行設置。

圖1-14 選擇iOS模擬器

圖1-15 iOS模擬器效果圖

圖1-16 Xcode啟動應用
1)安裝Homebrew工具,Homebrew是一款MacOS平臺下的軟件包管理工具,擁有安裝、卸載、更新、查看、搜索等很多實用的功能。下載地址為:<https://brew.sh>。
2)打開終端并運行一些命令,安裝用于將Flutter應用安裝到iOS設備的工具,命令如下所示:
- - - - - -
```
brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup
```
- - - - - -
提示 如果這些命令中有任何一個失敗并出現錯誤,請運行brew doctor并按照說明解決問題。
接下來需要Xcode簽名。Xcode簽名設置有以下幾個步驟:
步驟1:在你Flutter項目目錄中通過雙擊ios/Runner.xcworkspace打開默認的Xcode工程。
步驟2:在Xcode中,選擇導航面板左側中的Runner項目。
步驟3:在Runner target設置頁面中,確保在General→Signing→Team(常規→簽名→團隊)下選擇了你的開發團隊,如圖1-17所示。當你選擇一個團隊時,Xcode會創建并下載開發證書,為你的設備注冊你的賬戶,并創建和下載配置文件。

圖1-17 設置開發團隊
步驟4:要開始你的第一個iOS開發項目,可能需要使用你的Apple ID登錄Xcode。任何Apple ID都支持開發和測試。需要注冊Apple開發者計劃才能將你的應用分發到App Store。請查看<https://developer.apple.com/support/compare-memberships/>這篇文章。登錄界面如圖1-18所示。

圖1-18 使用Apple ID
步驟5:當你第一次添加真機設備進行iOS開發時,需要同時信任你的Mac和該設備上的開發證書。點擊Trust即可,如圖1-19所示。

圖1-19 信任此電腦圖示
步驟6:如果Xcode中的自動簽名失敗,請查看項目的Bundle Identifier值是否唯一。這個ID即為應用的唯一ID,建議使用域名反過來寫,如圖1-20所示。
步驟7:使用flutter run命令運行應用程序。

圖1-20 驗證Bundle Identifier值
- 前言
- 第1章 開啟Flutter之旅
- 1.1 Flutter的特點與核心概念
- 1.1.1 一切皆為組件
- 1.1.2 組件嵌套
- 1.1.3 構建Widget
- 1.1.4 處理用戶交互
- 1.1.5 什么是狀態
- 1.1.6 分層的框架
- 1.2 開發環境搭建
- 1.2.1 Windows環境搭建
- 1.2.2 MacOS環境搭建
- 1.3 第一個Flutter程序
- 第2章 Flutter基礎知識
- 2.1 入口程序
- 2.2 Material Design設計風格
- 2.3 Flutter主題
- 2.3.1 創建應用主題
- 2.3.2 局部主題
- 2.3.3 使用主題
- 2.4 無狀態組件和有狀態組件
- 2.5 使用包資源
- 2.6 Http請求
- 第3章 Dart語言簡述
- 3.1 Dart重要概念與常用開發庫
- 3.2 變量與基本數據類型
- 3.3 函數
- 3.4 運算符
- 3.5 流程控制語句
- 3.6 異常處理
- 3.7 面向對象
- 3.7.1 實例化成員變量
- 3.7.2 構造函數
- 3.7.3 讀取和寫入對象
- 3.7.4 重載操作
- 3.7.5 繼承類
- 3.7.6 抽象類
- 3.7.7 枚舉類型
- 3.7.8 Mixins
- 3.8 泛型
- 3.9 庫的使用
- 3.10 異步支持
- 3.11 元數據
- 3.12 注釋
- 第4章 常用組件
- 4.1 容器組件
- 4.2 圖片組件
- 4.3 文本組件
- 4.4 圖標及按鈕組件
- 4.4.1 圖標組件
- 4.4.2 圖標按鈕組件
- 4.4.3 凸起按鈕組件
- 4.5 列表組件
- 4.5.1 基礎列表組件
- 4.5.2 水平列表組件
- 4.5.3 長列表組件
- 4.5.4 網格列表組件
- 4.6 表單組件
- 第5章 Material Design風格組件
- 5.1 App結構和導航組件
- 5.1.1 MaterialApp(應用組件)
- 5.1.2 Scaffold(腳手架組件)
- 5.1.3 AppBar(應用按鈕組件)
- 5.1.4 BottomNavigationBar(底部導航條組件)
- 5.1.5 TabBar(水平選項卡及視圖組件)
- 5.1.6 Drawer(抽屜組件)
- 5.2 按鈕和提示組件
- 5.2.1 FloatingActionButton(懸停按鈕組件)
- 5.2.2 FlatButton(扁平按鈕組件)
- 5.2.3 PopupMenuButton(彈出菜單組件)
- 5.2.4 SimpleDialog(簡單對話框組件)
- 5.2.5 AlertDialog(提示對話框組件)
- 5.2.6 SnackBar(輕量提示組件)
- 5.3 其他組件
- 5.3.1 TextField(文本框組件)
- 5.3.2 Card(卡片組件)
- 第6章 Cupertino風格組件
- 6.1 CupertinoActivityIndicator組件
- 6.2 CupertinoAlertDialog對話框組件
- 6.3 CupertinoButton按鈕組件
- 6.4 Cupertino導航組件集
- 第7章 頁面布局
- 7.1 基礎布局處理
- 7.1.1 Container(容器布局)
- 7.1.2 Center(居中布局)
- 7.1.3 Padding(填充布局)
- 7.1.4 Align(對齊布局)
- 7.1.5 Row(水平布局)
- 7.1.6 Column(垂直布局)
- 7.1.7 FittedBox(縮放布局)
- 7.1.8 Stack/Alignment
- 7.1.9 Stack/Positioned
- 7.1.10 IndexedStack
- 7.1.11 OverflowBox溢出父容器顯示
- 7.2 寬高尺寸處理
- 7.2.1 SizedBox(設置具體尺寸)
- 7.2.2 ConstrainedBox(限定最大最小寬高布局)
- 7.2.3 LimitedBox(限定最大寬高布局)
- 7.2.4 AspectRatio(調整寬高比)
- 7.2.5 FractionallySizedBox(百分比布局)
- 7.3 列表及表格布局
- 7.3.1 ListView
- 7.3.2 GridView
- 7.3.3 Table
- 7.4 其他布局處理
- 7.4.1 Transform(矩陣轉換)
- 7.4.2 Baseline(基準線布局)
- 7.4.3 Offstage(控制是否顯示組件)
- 7.4.4 Wrap(按寬高自動換行布局)
- 7.5 布局綜合示例
- 7.5.1 布局分析
- 7.5.2 準備素材
- 7.5.3 編寫代碼
- 第8章 手勢
- 8.1 用GestureDetector進行手勢檢測
- 8.2 用Dismissible實現滑動刪除
- 第9章 資源和圖片
- 9.1 添加資源和圖片
- 9.1.1 指定assets
- 9.1.2 加載assets
- 9.1.3 平臺assets
- 9.2 自定義字體
- 第10章 路由及導航
- 10.1 頁面跳轉基本使用
- 10.2 頁面跳轉發送數據
- 10.3 頁面跳轉返回數據
- 第11章 組件裝飾和視覺效果
- 11.1 Opacity(透明度處理)
- 11.2 DecoratedBox(裝飾盒子)
- 11.3 RotatedBox(旋轉盒子)
- 11.4 Clip(剪裁處理)
- 11.5 案例——自定義畫板
- 第12章 動畫
- 12.1 用AnimatedOpacity實現漸變效果
- 12.2 用Hero實現頁面切換動畫
- 第13章 Flutter插件開發
- 13.1 新建插件
- 13.2 運行插件
- 13.3 示例代碼分析
- 第14章 開發工具及使用技巧
- 14.1 IDE集成開發環境
- 14.1.1 Android Studio/IntelliJ
- 14.1.2 Visual Studio Code
- 14.2 Flutter SDK
- 14.3 使用熱重載
- 14.4 格式化代碼
- 14.5 Flutter組件檢查器
- 第15章 測試與發布應用
- 15.1 測試應用
- 15.1.1 簡介
- 15.1.2 單元測試
- 15.1.3 Widget測試
- 15.1.4 集成測試
- 15.2 發布Android版App
- 15.2.1 檢查App Manifest
- 15.2.2 查看構建配置
- 15.2.3 添加啟動圖標
- 15.2.4 App簽名
- 15.2.5 構建發布版APK并安裝在設備上
- 15.3 發布iOS版App
- 15.3.1 準備工作
- 15.3.2 在iTunes Connect上注冊應用程序
- 15.3.3 注冊一個Bundle ID
- 15.3.4 在iTunes Connect上創建應用程序記錄
- 15.3.5 查看Xcode項目設置
- 15.3.6 添加應用程序圖標
- 15.3.7 準備發布版本
- 15.3.8 將應用發布到App Store
- 第16章 綜合案例——即時通訊App界面實現
- 16.1 項目介紹
- 16.2 項目搭建
- 16.2.1 新建項目
- 16.2.2 添加源碼目錄及文件
- 16.3 入口程序
- 16.4 加載頁面
- 16.5 應用頁面
- 16.6 搜索頁面
- 16.6.1 布局拆分
- 16.6.2 請求獲取焦點
- 16.6.3 自定義TouchCallBack組件
- 16.6.4 返回文本組件
- 16.6.5 組裝實現搜索頁面
- 16.7 聊天頁面
- 16.7.1 準備聊天消息數據
- 16.7.2 聊天消息列表項實現
- 16.7.3 聊天消息列表實現
- 16.8 好友頁面
- 16.8.1 準備好友列表數據
- 16.8.2 好友列表項實現
- 16.8.3 好友列表頭實現
- 16.8.4 ContactSiderList類
- 16.8.5 Contacts類
- 16.9 我的頁面
- 16.9.1 通用列表項實現
- 16.9.2 Personal類