Mac搭建Flutter開發環境

時間  2019-11-08
標籤 mac 搭建 flutter 開發環境 欄目 MacBook 简体版
原文   原文鏈接

Flutter簡介

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

Flutter 包含了一個函數響應式框架（ functional-reactive framework）、一個 2D 渲染引擎、直接可用的 Widget 庫、和各類開發工具。這些組件在一塊兒配合使用，能夠幫助開發者完成設計、開發、測試和調試應用的工做。react

Widget

Widget 是每一個 Flutter 應用的基礎組成部分，每一個 Widget 是用戶界面最基本的元素。和其餘框架把 View、controller、 Layout 和其餘資源分開定義不同，Flutter 具備一致的、惟一的對象模型： Widget。android

一個 Widget 具備以下的一些做用：ios

  • 一個結構性的元素（好比 按鈕或者菜單）
  • 一個元素的風格（好比 字體或者顏色）
  • 指定佈局屬性（好比 padding）
  • 也能夠包含一些業務邏輯
  • 以及其餘等等

Widget 經過組合來組成特有的頁面層級結構，每一個 Widget 都內嵌在父 Widget 中，並繼承父 Widget 的屬性。 而且，Widget沒有單獨的 「application」 對象，根 Widget 就至關於application。git

佈局/樣式

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

查看 Flutter 中全部和佈局相關的 Widget：flutter.io/widgets/lay…macos

概念上的類似是否是就可讓咱們輕鬆上手了呢？其實並非，由於在具體的代碼層面，爲 Flutter 中的 Widget 添加樣式 和爲一個 HTML 元素添加樣式仍是有着很大的差異。這些差異主要表如今如下兩個方面：編程

1,不是全部 Widget 均可以添加任意的樣式屬性。

舉例來講，若是你想給一段文字添加一個 border。你必須建立一個 Container，把這段問題設置爲這個 Container 的 child。而後給這個 Container 設置一個 BoxDecoration 屬性，並在該屬性中設置具體的邊框樣式。例如：api

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

####2，Flutter樣式屬性都不在支持以字符串的形式書寫。 因爲 Dart 面向對象的特色，基本上全部的樣式屬性都不在支持以字符串的形式書寫，而是必須建立特定類的實例或是使用 Flutter 中預先定義好的常量。例如：xcode

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…

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程