### 1.2.1 Windows環境搭建
1\.使用鏡像
首先解決網絡問題。環境搭建過程中需要下載很多資源文件,當某個資源更新不到時,就可能會報各種錯誤。在國內訪問Flutter有時可能會受到限制,Flutter官方為中國開發者搭建了臨時鏡像,大家可以將如下環境變量加入到用戶環境變量中:
- - - - - -
```
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
```
- - - - - -
注意 此鏡像為臨時鏡像,并不能保證一直可用,讀者可以參考Using Flutter in China:<https://github.com/flutter/flutter/wiki/Using-Flutter-in-China>以獲得有關鏡像服務器的最新動態。
2\.安裝Git
Flutter依賴的命令行工具為Git for Windows(Git命令行工具)。Windows版本的下載地址為:<https://git-scm.com/download/win>。
3\.下載安裝Flutter SDK
去Flutter官網下載其最新可用的安裝包。
注意 Flutter的渠道版本會不停變動,請以Flutter官網為準。Flutter官網下載地址:[https://flutter.io/docs/development/tools/sdk/archive#windows。Flutter GitHub](https://flutter.io/docs/development/tools/sdk/archive#windows%E3%80%82Flutter%20GitHub)下載地址:<https://github.com/flutter/flutter/releases>。
將安裝包zip解壓到你想安裝Flutter SDK的路徑(如:D:\\Flutter)。在Flutter安裝目錄的Flutter文件下找到flutter\_console.bat,雙擊運行并啟動Flutter命令行,接下來,你就可以在Flutter命令行運行flutter命令了。
注意 不要將Flutter安裝到需要一些高權限的路徑如C:\\Program Files\\。
4\.添加環境變量
不管使用什么工具,如果想在系統的任意地方能夠運行這個工具的命令,則需要添加工具的路徑到系統path里去。這里路徑指向到Flutter文件的bin路徑,如圖1-5所示。同時,檢查是否有名為“PUB\_HOSTED\_URL”和“FLUTTER\_STORAGE\_BASE\_URL”的條目,如果沒有,也需要添加它們。重啟Windows才能使更改生效。

圖1-5 添加Flutter環境變量
5\.運行flutter命令安裝各種依賴
使用Windows命令窗口運行以下命令,查看是否需要安裝任何依賴項來完成安裝:
- - - - - -
```
flutter doctor
```
- - - - - -
該命令檢查你的環境并在終端窗口中顯示報告。Dart SDK已經捆綁在Flutter里了,沒有必要單獨安裝Dart。仔細檢查命令行輸出以獲取可能需要安裝的其他軟件或進一步需要執行的任務。如下代碼粗體顯示,Android SDK缺少命令行工具,需要下載并且提供了下載地址,通常這種情況只需要把網絡連好,VPN開好,然后重新運行flutter doctor命令即可。
- - - - - -
```
[-] Android toolchain - develop for Android devices
? Android SDK at D:\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命令來驗證你是否已經正確地設置了,同時需要檢查移動設備是否連接正常。
6\.編輯器設置
如果使用flutter命令行工具,可以使用任何編輯器來開發Flutter應用程序。輸入flutter help在提示符下查看可用的工具。但是筆者建議最好安裝一款功能強大的IDE來進行開發,畢竟開發調試運行打包的效率會更高。由于Windows環境只能開發Flutter的Android應用,所以接下來我們會重點介紹Android Studio這款IDE。
(1)安裝Android Studio
要為Android開發Flutter應用,你可以使用Mac或Windows操作系統。Flutter需要安裝和配置Android Studio,步驟如下:
1)下載并安裝Android Studio:<https://developer.android.com/studio/index.html>。
2)啟動Android Studio,然后執行“Android Studio安裝向導”。這將安裝最新的Android SDK、Android SDK平臺工具和Android SDK構建工具,這是Flutter為Android開發時所必需的。
(2)設置你的Android設備
要準備在Android設備上運行并測試你的Flutter應用,需要安裝Android 4.1(API level 16)或更高版本的Android設備。步驟如下:
1)在你的設備上啟用“開發人員選項”和“USB調試”,這些選項通常在設備的“設置”界面里。
2)使用USB線將手機與計算機連接。如果你的設備出現提示,請授權計算機訪問你的設備。
3)在終端中,運行flutter devices命令以驗證Flutter識別出你連接的Android設備。
4)用flutter run啟動你的應用程序。
提示 默認情況下,Flutter使用的Android SDK版本是基于你的adb工具版本。如果你想讓Flutter使用不同版本的Android SDK,則必須將該ANDROID\_HOME環境變量設置為SDK安裝目錄。
(3)設置Android模擬器
要準備在Android模擬器上運行并測試Flutter應用,請按照以下步驟操作:
1)啟動Android Studio→Tools→Android→AVD Manager并選擇Create Virtual Device,打開虛擬設備面板,如圖1-6所示。

圖1-6 打開虛擬設備面板
2)選擇一個設備并點擊Next,如圖1-7所示。

圖1-7 選擇模擬硬件設備
3)選擇一個鏡像點擊download即可,然后點擊Next,如圖1-8所示。

圖1-8 選擇系統鏡像
4)驗證配置信息,填寫虛擬設備名稱,選擇Hardware-GLES 2.0以啟用硬件加速,點擊Finish,如圖1-9所示。

圖1-9 驗證配置信息
5)在工具欄選擇剛剛添加的模擬器,如圖1-10所示。

圖1-10 在工具欄選擇模擬器
6)也可以在命令行窗口運行flutter run啟動模擬器。當能正常顯示模擬器時(如圖1-11所示),則表示模擬器安裝正常。

圖1-11 Android模擬器運行效果圖
提示 建議選擇當前主流手機型號作為模擬器,開啟硬件加速,使用x86或x86\_64image。
詳細文檔請參考:<https://developer.android.com/studio/run/emulator-acceleration.html>。
(4)安裝Flutter和Dart插件
IDE需要安裝兩個插件:
·Flutter插件:支持Flutter開發工作流(運行、調試、熱重載等)。
·Dart插件:提供代碼分析(輸入代碼時進行驗證、代碼補全等)。
打開Android Studio的系統設置面板,找到Plugins分別搜索Flutter和Dart,點擊安裝即可,如圖1-12所示。

圖1-12 Android Studio插件安裝
- 前言
- 第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類