Mac搭建Flutter開發環境

xiangzhihong發表於2019-07-15
MacFlutter開發環境

Flutter簡介

Flutter 是Google開發的一個移動跨平臺（Android 和 iOS）的開發框架，使用的是 Dart 語言。和 React Native 不同的是，Flutter 框架並不是一個嚴格意義上的原生應用開發框架。Flutter 的目標是用來建立高效能、高穩定性、高幀率、低延遲的 Android 和 iOS 應用。並且開發出來的應用在不同的平臺用起來跟原生應用具有一樣的體驗。

Flutter 包含了一個函式響應式框架（ functional-reactive framework）、一個 2D 渲染引擎、直接可用的 Widget 庫、和各種開發工具。這些元件在一起配合使用，可以幫助開發者完成設計、開發、測試和除錯應用的工作。

Widget

Widget 是每個 Flutter 應用的基礎組成部分，每個 Widget 是使用者介面最基本的元素。和其他框架把 View、controller、 Layout 和其他資源分開定義不一樣，Flutter 具有一致的、唯一的物件模型： Widget。

一個 Widget 具有如下的一些作用：

  • 一個結構性的元素（比如 按鈕或者選單）
  • 一個元素的風格（比如 字型或者顏色）
  • 指定佈局屬性（比如 padding）
  • 也可以包含一些業務邏輯
  • 以及其他等等

Widget 通過組合來組成特有的頁面層級結構，每個 Widget 都內嵌在父 Widget 中，並繼承父 Widget 的屬性。 並且，Widget沒有單獨的 “application” 物件，根 Widget 就相當於application。

佈局/樣式

首先從巨集觀上來說，Flutter 中的佈局、樣式中絕大多數的概念其實還是沿用了 CSS 中的概念。例如在佈局方面與 CSS 中 flex 佈局對應的有 Row、Column 兩個 Widget，分別提供了水平和垂直兩個方向的佈局方式。再比如 Stack Widget 提供了一種 Widget 之間相互堆疊的機制，這又和 CSS 中的 position:absolute; 很像。

檢視 Flutter 中所有和佈局相關的 Widget：flutter.io/widgets/lay…

概念上的相似是不是就可以讓我們輕鬆上手了呢？其實並不是，因為在具體的程式碼層面，為 Flutter 中的 Widget 新增樣式 和為一個 HTML 元素新增樣式還是有著很大的差別。這些差別主要表現在以下兩個方面：

1,不是所有 Widget 都可以新增任意的樣式屬性。

舉例來說，如果你想給一段文字新增一個 border。你必須建立一個 Container，把這段問題設定為這個 Container 的 child。然後給這個 Container 設定一個 BoxDecoration 屬性，並在該屬性中設定具體的邊框樣式。例如：

Container(
  decoration:BoxDecoration(
    border:Border.all(color:Colors.red)
),
  child:newText("My Awesome Border"),
)
複製程式碼

####2，Flutter樣式屬性都不在支援以字串的形式書寫。 由於 Dart 物件導向的特點，基本上所有的樣式屬性都不在支援以字串的形式書寫，而是必須建立特定類的例項或是使用 Flutter 中預先定義好的常量。例如：

ListView.builder(

  scrollDirection:Axis.horizontal,

  padding:EdgeInsets.all(10.0),

  itemCount:subCategories.length,

  itemBuilder:(BuildContext context,int index){ }

)
複製程式碼

這裡為了指定 ListView 的滾動方向，我們使用了 Flutter 中預先定義好的 Axis.horizontal 常量，為了表示 4 個方向上的 padding 值，我們建立了一個 EdgeInsets 類的例項。

組合大於繼承

Widget 通常通過組合的方式來構建複雜的 UI。例如，常用的 Container Widget 就是由幾個分別負責 佈局、繪製、佈局和計算大小的 Widget 組成。

具體來說，Container 由LimitedBox，ConstrainedBox，Align，Padding，DecoratedBox和 Transform組成。如果要自定義 Container 來實現自定義效果，相比使用繼承而言，可以使用組合一些簡單的 Widget 實現自定義效果。

分層架構

Flutter 框架有幾層結構，每層都依賴其下面的一層結構。其架構圖如下圖：

這裡寫圖片描述
開發應用的時候，經常使用最上面的層級提供的功能。 這種層級結構的設計是為了讓你用更少的程式碼實現更多的功能。比如，Material 層 是使用了 Widget 層的控制元件來構建的，而 Widget 層 依賴下面的 Rendering 層來構建的。

這些層級為構建應用提供了很多種選擇。使用自定義的方式構建應用可以使用框架的所有功能，或者使用 Widget 層的控制元件可以實現 UI 效果。 可以直接使用 Flutter 提供的 Widget 也可以自定義各種 Widget，如果上層實現不滿足你的要求，還可以直接使用更底層的功能來自定義。

Flutter框架與其他移動開發框架的區別

原生應用的區別

Flutter 應用執行在一個用 C++ 寫的引擎中，Flutter 應用可以看做是一個遊戲 App，程式碼都是在 引擎中執行。 對於 Android 應用來說，Flutter 框架在引擎中實現了一個 繼承於 SurfaceView 的 FlutterView 中，使用者所看到的 UI 都是在這個 SurfaceView 中顯示。如果要和原生平臺功能互動，則可以在 Activity 中使用 FlutterView，並通過 Flutter 提供的訊息 API 和原生平臺收發訊息。

與React Native 應用的區別

和React Native相比，主要有以下的一些區別：

  • 使用的程式語言不同，Flutter 使用的是 谷歌自己新的 Dart語言，新的語言可以吸收很多其他成功程式語言的特性，更具有表達性，編碼效率更高，而 React Native 使用的 JavaScript語言。
  • React Native 是把應用編譯為原生控制元件執行，這樣在轉換的時候會有效能損耗，並且有些平臺特性可能無法做成跨平臺使用。

目前，Flutter的首個釋出預覽版（Release Preview 1）正式釋出，這標誌著谷歌進入了Flutter正式版（1.0）釋出前的最後階段，相信在不久的將來，Flutter將會被使用的越來越廣泛。

Flutter開發環境搭建

“工欲善其事，必先利其器”，學習任何一門語言、技術，都需要從環境搭建開始，學習Flutter就從環境搭建開始。搭建環境最好參考官網的文件進行操作：flutterchina.club/get-started…

這裡寫圖片描述

系統要求

要安裝並執行Flutter，您的開發環境必須滿足以下最低要求：

  • 作業系統: macOS (64-bit)
  • 磁碟空間: 700 MB (不包括Xcode或Android Studio的磁碟空間）
  • 工具: Flutter 依賴下面這些命令列工具，如bash, mkdir, rm, git, curl, unzip, which等

獲取Flutter SDK

要獲得Flutter，請先使用git克隆Flutter，然後將該flutter工具新增到您的使用者路徑。執行 flutter doctor 顯示您可能需要安裝的剩餘依賴項。

Clone Flutter

如果是第一次在此機器上安裝Flutter，請克隆flutter的分支原始碼，然後將該flutter工具新增到系統的環境變數中。例如：

git clone -b beta https://github.com/flutter/flutter.git
export PUB_HOSTED_URL=https://pub.flutter-io.cn //國內使用者需要設定
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //國內使用者需要設定
export PATH=`pwd`/flutter/bin:$PATH 
複製程式碼

這裡的pwd/flutter/bin:$PATH 可以使用剛才的克隆的flutter的原始碼的路徑，如

/Users/xiangzhihong/Flutter/flutter/bin:$PATH
複製程式碼

說明：關於如何在mac上配置環境變數，請自行查詢相關資料。

執行 flutter doctor

執行以下命令來檢視是否需要安裝其它依賴項，如果缺乏相關的依賴，系統會給出提示。

flutter doctor
複製程式碼

執行該命令後，系統會檢測裝置相關的依賴情況，如下圖：

這裡寫圖片描述
該命令檢查您的環境並在終端視窗中顯示報告。Dart SDK已經在捆綁在Flutter裡了，沒有必要單獨安裝Dart。 仔細檢查命令列輸出以獲取可能需要安裝的其他軟體或進一步需要執行的任務（以粗體顯示）。例如：

Android toolchain - develop for Android devices
    • Android SDK at /Users/obiwan/Library/Android/sdk
    ✗ 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.
複製程式碼

如果提示xcode或Android Studio版本太低、或者沒有ANDROID_HOME環境變數等，請按照提示解決。下面貼一個筆者本機(mac)的環境變數配置：

export PATH=/Users/使用者名稱/Documents/flutter/flutter/bin:$PATH
export ANDROID_HOME="/Users/使用者名稱/Documents/android_sdk" //android sdk目錄，替換為你自己的即可
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
複製程式碼

第一次執行一個flutter命令（如flutter doctor）時，它會下載它自己的依賴項並自行編譯。一旦你安裝了任何缺失的依賴，請再次執行“flutter doctor”命令來驗證你是否已經正確地設定，並最終讓所有缺陷都得到解決，如下圖：

在這裡插入圖片描述

更新環境變數

您在命令列只能更新當前會話的PATH變數，如Clone Flutter repo所示。 但是，您可能需要的是永久更新此變數，以便您可以執行flutter命令在任何終端會話中。

對於所有終端會話永久修改此變數的步驟是和特定計算機系統相關的。通常，您會在開啟新視窗時將設定環境變數的命令新增到執行的檔案中。例如：

  1. 確定您Flutter SDK的目錄，您將在步驟3中用到。
  2. 開啟(或建立) $HOME/.bash_profile. 檔案路徑和檔名可能在您的機器上不同。
  3. 新增以下行並更改[PATH_TO_FLUTTER_GIT_DIRECTORY]為克隆Flutter的git repo的路徑。
export PUB_HOSTED_URL=https://pub.flutter-io.cn //國內使用者需要設定
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //國內使用者需要設定
export PATH= PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH
複製程式碼

注意：PATH_TO_FLUTTER_GIT_DIRECTORY 為你flutter的路徑，比如“~/document/code”

  1. 執行 source $HOME/.bash_profile 重新整理當前終端視窗。

注意: 如果你使用的是zsh，終端啟動時 ~/.bash_profile 將不會被載入，解決辦法就是修改 ～/.zshrc ，在其中新增：source ～/.bash_profile 2. 通過執行flutter/bin命令驗證目錄是否在已經在PATH中。命令為：

flutter/bin
複製程式碼

macOS支援為iOS和Android開發Flutter應用程式。現在完成兩個平臺設定步驟中的至少一個，以便能夠構建並執行您的第一個Flutter應用程式。

iOS 設定

安裝 Xcode

要為iOS開發Flutter應用程式，您需要Xcode 7.2或更高版本:

  • 安裝Xcode 7.2或更新版本，可以通過APP Stroe來安裝。
  • 配置Xcode命令列工具以使用新安裝的Xcode版本 sudo xcode-select --switch/Applications/Xcode.app/Contents/Developer對於大多數情況，當您想要使用最新版本的Xcode時，這是正確的路徑。如果您需要使用不同的版本，請指定相應路徑。
  • 確保Xcode許可協議是通過開啟一次Xcode或通過命令sudo xcodebuild -license同意。

設定iOS模擬器

要準備在iOS模擬器上執行並測試您的Flutter應用，請按以下步驟操作：

1，在Mac上，通過Spotlight或使用以下命令找到模擬器，命令如下：

open -a Simulator
複製程式碼

2，通過檢查模擬器 硬體>裝置 選單中的設定，確保您的模擬器正在使用64位裝置（iPhone 5s或更高版本）。

3，根據您的開發機器的螢幕大小，模擬的高清屏iOS裝置可能會使您的螢幕溢位。在模擬器的 Window> Scale 選單下設定裝置比例。

4，執行 flutter run啟動您的應用。

安裝到iOS裝置

要將您的Flutter應用安裝到iOS真機裝置，您需要一些額外的工具和一個Apple帳戶，您還需要在Xcode中進行設定。

1，安裝 homebrew （如果已經安裝了brew,跳過此步驟）。 2，開啟終端並執行這些命令來安裝用於將Flutter應用安裝到iOS裝置的工具。

brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup
複製程式碼

如果這些命令中的任何一個失敗並出現錯誤，請執行brew doctor並按照說明解決問題。

遵循Xcode簽名流程來配置您的專案。

a，在你Flutter專案目錄中通過 open ios/Runner.xcworkspace 開啟預設的Xcode workspace。 b，在Xcode中，選擇導航皮膚左側中的Runner專案。 c，在Runner target設定頁面中，確保在 常規>簽名>團隊 下選擇了您的開發團隊。當您選擇一個團隊時，Xcode會建立並下載開發證照，向您的裝置註冊您的帳戶，並建立和下載配置檔案（如果需要）。例如：

這裡寫圖片描述

Android設定

安裝Android Studio

要為Android開發Flutter應用，您可以使用Mac，Windows或Linux（64位）機器.

Flutter需要安裝和配置Android Studio，步驟如下：

  1. 下載並安裝 Android Studio。
  2. 啟動Android Studio，然後執行“Android Studio安裝嚮導”。這將安裝最新的Android SDK，Android SDK平臺工具和Android SDK構建工具，這是Flutter為Android開發時所必需的。

###設定您的Android裝置

要準備在Android裝置上執行並測試您的Flutter應用，您需要安裝Android 4.1（API level 16）或更高版本的Android裝置.

  • 在您的裝置上啟用 開發人員選項 和 USB除錯 。詳細說明可在Android文件中找到。
  • 使用USB將手機插入電腦。如果您的裝置出現提示，請授權您的計算機訪問您的裝置。
  • 在終端中，執行 flutter devices 命令以驗證Flutter識別您連線的Android裝置。
  • 執行啟動您的應用程式 flutter run。

預設情況下，Flutter使用的Android SDK版本是基於你的 adb 工具版本。 如果您想讓Flutter使用不同版本的Android SDK，則必須將該 ANDROID_HOME 環境變數設定為SDK安裝目錄。

設定Android模擬器

要準備在Android模擬器上執行並測試您的Flutter應用，請按照以下步驟操作：

  • 在您的機器上啟用 VM acceleration ；
  • 啟動 Android Studio>Tools>Android>AVD Manager 並選擇 Create Virtual Device；
  • 選擇一個裝置並選擇 Next選項；
  • 為要模擬的Android版本選擇一個或多個系統映像，然後選擇 Next. 建議使用 x86 或 x86_64 image ；
  • 在 Emulated Performance下, 選擇 Hardware - GLES 2.0 以啟用 硬體加速，驗證AVD配置是否正確，然後選擇 Finish；
  • 在 Android Virtual Device Manager中, 點選工具欄的Run按鈕。模擬器啟動並顯示所選作業系統版本或裝置的啟動畫面；
  • 執行 flutter run 啟動您的裝置. 連線的裝置名是 Android SDK built for <platform>,其中platform 是晶片系列, 如 x86。

開發工具及外掛

開發Flutter應用需要 Android Studio和VSCode配合使用。一方面，VSCode 提供了非常好的程式碼提示功能。，而在 Android Studio 中，或許是 Android Studio 上的 dart 外掛目前功能還不夠完善的原因，程式碼提示和開發功能並不是很強大。

Android Studio

安裝外掛

使用Android Studio開發Flutter移動應用，需要先安裝Flutter和Dart外掛。Android Studio安裝外掛的步驟如下： 進入Plugins -> Browse Repositories-> 搜尋Flutter-> 點選install。

新建專案

開啟AndroidStudio->選擇 Start a new Flutter project ->選擇 Flutter Application；如下圖：

在這裡插入圖片描述
建立的專案的原始碼位於lib/main.dart下，我們可以修改main.dart的原始碼內容。

執行專案

Flutter專案的執行也非常的簡單，定位到Android Studio 工具欄，然後點選執行按鈕即可，如下圖。

在這裡插入圖片描述
如果一切正常, 您應該在您的裝置或模擬器上會看到啟動的應用程式，如下圖：
在這裡插入圖片描述

VSCode

安裝外掛

按組合鍵【 command+shift+x】，開啟應用商店，然後搜尋“dart code”點選安裝，如下圖：

在這裡插入圖片描述

建立新專案

開啟VSCode->選擇檢視->命令皮膚->輸入指令flutter create Project名稱，點選確定，即可建立Flutter應用。

Flutter專案結構

使用Android Studio開啟建立的Flutter專案，如下圖：

在這裡插入圖片描述
在Flutter開發中，我們需要關注4個檔案，即android、ios、lib和pubspec.yaml。

  • android目錄：存放的是Flutter與android原生互動的一些程式碼，這個路徑的檔案和建立單獨的Android專案基本是一樣的。
  • ios目錄：存放的是Flutter與ios原生互動的一些程式碼。
  • lib：存放的是Dart語言編寫的程式碼，也是專案的核心程式碼。
  • pubspec.yaml：專案依賴配置檔案，作用類似於Android的build.gradle或者iOS的cocospod。例如剛才建立的專案的pubspec.yaml裡面的：cupertino_icons: ^0.1.2，表示專案要依賴cupertino_icons這個庫，版本號為0.1.2。

擴充套件閱讀： [1]gmtc.geekbang.org/

[2]marketplace.visualstudio.com/items?itemN…

[3]flutter.io/sdk-archive…

[4]www.dartlang.org/

[5]en.wikipedia.org/wiki/Just-i…

[6]en.wikipedia.org/wiki/Ahead-…

[7]www.dartlang.org/guides/lang…

[8]api.dartlang.org/dev

[9]hackernoon.com/why-flutter…

相關文章