Flutter的安裝和配置

RunTitan發表於2019-02-12
Flutter
  • 原文部落格地址: Flutter的安裝和配置
  • Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構建高質量的原生使用者介面, 並且是未來新作業系統Fuchsia的預設開發套件
  • 在全世界，Flutter正在被越來越多的開發者和組織使用，並且Flutter是完全免費、開源的----Flutter中文網
  • Flutter同時支援Windows、Linux和MacOS作業系統作為開發環境，並且在Android Studio和VS Code兩個IDE上都提供了全功能的支援
  • Flutter以Dart語言為開發語言(之後的文章會介紹)

跨平臺框架

  • 在Flutter誕生之前，已經有許多跨平臺UI框架的方案，比如基於WebView的Cordova、AppCan等，還有使用HTML+JavaScript渲染成原生控制元件的React Native、Weex等(雖然我只用過React Native)
  • 基於WebView的框架
    • 優點很明顯，它們幾乎可以完全繼承現代Web開發的所有成果（豐富得多的控制元件庫、滿足各種需求的頁面框架、完全的動態化、自動化測試工具等等），當然也包括Web開發人員，不需要太多的學習和遷移成本就可以開發一個App
    • 缺點也很致命, 在對體驗和效能有較高要求的情況下, WebView的渲染效率和JavaScript執行效能太差。再加上Android各個系統版本和裝置廠商的定製，很難保證所在所有裝置上都能提供一致的體驗
  • React Native一類的框架
    • 將最終渲染工作交還給了系統，雖然同樣使用類HTML+JS的UI構建邏輯，但是最終會生成對應的自定義原生控制元件，以充分利用原生控制元件相對於WebView的較高的繪製效率
    • 同時這種策略也將框架本身和App開發者綁在了系統的控制元件上，不僅框架本身需要處理大量平臺相關的邏輯，隨著系統版本變化和API的變化，開發者可能也需要處理不同平臺的差異，甚至有些特性只能在部分平臺上實現，這樣框架的跨平臺特性就會大打折扣
  • Flutter框架
    • Flutter則開闢了一種全新的思路，從頭到尾重寫一套跨平臺的UI框架，包括UI控制元件、渲染邏輯甚至開發語言
    • Flutter使用自己的高效能渲染引擎來繪製widget, Flutter使用C、C ++、Dart和Skia（2D渲染引擎）構建
    • 在iOS上，Flutter引擎的C/C ++程式碼使用LLVM編譯，任何Dart程式碼都是AOT編譯為原生程式碼的，Flutter應用程式使用本機指令集執行（不涉及直譯器）
    • 而在Android下，Flutter引擎的C/C ++程式碼是用Android的NDK編譯的，任何Dart程式碼都是AOT編譯成原生程式碼的，Flutter應用程式依然使用本機指令集執行（不涉及直譯器）

Flutter安裝

  • 可參考官網的安裝Flutter, 支援Windows、Linux和MacOS作業系統
  • 我使用的系統是MacOS作業系統

系統要求

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

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

獲取Flutter SDK

下載SDK

  • 去Flutter官網下載其最新可用的安裝包，轉到下載頁
  • 注意，Flutter的渠道版本會不停變動，請以Flutter官網為準
  • 另外，在中國大陸地區，要想正常獲取安裝包列表或下載安裝包，可能需要翻牆，讀者也可以去Flutter github專案下去下載安裝包，轉到下載頁

Flutter_SDK

環境配置

  • 解壓SDK並把解壓好的檔案全部放在你想要放置的位置, 建議和其他開發語言的SDK放置在一起, 比如~/Library/Flutter
  • 為了方便後續使用，需要將專案根目錄下bin路徑加入環境變數PATH中
    • 編輯器開啟~/.bash_profile檔案, 新增如下
# Flutter 相關配置
# xxx是你自己的Flutter資料夾路徑
export PATH=/xxx/Flutter/bin:$PATH
複製程式碼

由於在國內訪問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 以獲得有關映象伺服器的最新動態

儲存檔案, 並更新當前配置

# 執行命令
source ~/.bash_profile
複製程式碼

驗證flutter/bin目錄是否在你的PATH中

# 執行下面命令
echo $PATH
複製程式碼

如果安裝成功, 會輸出類似/xxx/Flutter/bin的路徑

安裝開發工具

安裝Android Studio

  • 下載並安裝Android Studio
  • 啟動Android Studio，然後執行Android Studio安裝嚮導, 這將安裝最新的Android SDK，Android SDK平臺工具和Android SDK構建工具, 這是Flutter開發Android應用時所必備的
  • 安裝完成後, 配置一個需要的Android模擬器

安裝Xcode

在App Store搜尋最新版本Xcode下載安裝即可

VSCode

開發IDE，直接去官網下載安裝即可

環境配置檢測

通過flutter doctor命令來執行Flutter的安裝程式了，經過一段時間的下載和安裝，Flutter會輸出安裝結果(時間可能會比較久)

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.5.1, on Mac OS X 10.13.5 17F77, locale en-NZ)
[!] Android toolchain - develop for Android devices (Android SDK 26.0.2)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[!] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
    ✗ Missing Xcode dependency: Python module "six".
    Install via 'pip install six' or 'sudo easy_install six'.
    ✗ libimobiledevice and ideviceinstaller are not installed. To install, run:
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install:
        brew install ios-deploy
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
        For more info, see https://flutter.io/platform-plugins
    To install:
        brew install cocoapods
        pod setup
[✓] Android Studio
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] Android Studio (version 3.0)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] IntelliJ IDEA Ultimate Edition (version 2017.1.1)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.24.1)
[!] Connected devices
    ! No devices available

! Doctor found issues in 5 categories.
複製程式碼
  • 其中前面有[✓]標識的是已經安裝成功的
  • [!]標識是需要安裝或者更新的
  • 下面介紹需要安裝的編輯器及其配置

開發工具

執行flutter doctor命令可看到相關資訊

  • Flutter的版本和資訊
  • Flutter執行所需的Android工具鏈，有些許可證沒有接受，輸入提示命令，輸入y確認
  • Flutter執行所需的iOS工具鏈不滿足
  • AS、IDEA的Flutter外掛沒有安裝，所以需要安裝，因此需要配置AS或IDEA
  • 有可用的連線裝置

Android Studio

  • 開啟外掛選擇項Preferences > Plugins
  • 選擇Browse repositories，搜尋Flutter外掛並安裝(同時自動安裝Dart外掛)
  • 外掛安裝完成後, 重啟Android Studio後外掛生效

android_flutter

這時候在命令列執行flutter doctor，可以看到Android Studio已經好了

[✓] Android Studio (version 3.2)
複製程式碼

iOS配置

  • 在進行iOS配置之前, 首先需要安裝CocoaPods, 可自行百度
  • 安裝CocoaPods後, 在執行flutter doctor命令, 可能會出現如下問題
  • 此時在終端中依次執行出現的命令即可
[!] iOS toolchain - develop for iOS devices

# 可能出現的命令, 若出現, 依次執行出現的命令即可, 未出現的可不執行
$ brew install --HEAD usbmuxd
$ brew link usbmuxd
$ brew install --HEAD libimobiledevice
$ brew install ideviceinstaller ios-deploy cocoapods
$ pod setup
複製程式碼

這時候在命令列執行flutter doctor，可以看到iOS相關配置也好了

VSCode外掛

在擴充套件中搜尋Flutter和Dart安裝後, 過載即可

配置完成

此刻, 在執行flutter doctor命令, 應該就沒有問題了

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.0.0, on Mac OS X 10.14.3 18D109, locale
    zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK 28.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 10.1)
[✓] Android Studio (version 3.0)
[✓] VS Code (version 1.30.2)
[✓] Connected device (1 available)

• No issues found!
複製程式碼

建立Flutter應用

CSCode建立

中文版: vscode -> 檢視 -> 命令皮膚 -> Flutter: new project -> 輸入專案名稱

注意: 專案名稱不支援大寫字母

Android Studio建立

開啟Android studio就可以看見Flutter工程模板如下

android_create_flutte

命令建立

flutter create helloflutter
複製程式碼

這裡建立了一個名為helloflutter的Dart package

  • 引數介紹
  • 要建立外掛包，請使用--template=plugin引數執行flutter create
  • 使用--org選項指定您的組織，並使用反向域名錶示法。該值用於生成的Android和iOS程式碼中的各種包和包識別符號。
flutter create --org com.example --template=plugin helloflutter
複製程式碼
  • 預設情況下，外掛專案針對iOS程式碼使用Objective-C，Android程式碼使用Java。
  • 如果您更喜歡Swift或Kotlin，則可以使用-i或-a 為iOS或Android指定語言。例如：
flutter create --template=plugin -i swift -a kotlin helloflutter
複製程式碼

參考文章

初識Flutter, 總結的可能也不準確, 不足之處還望海涵, 後續會繼續優化相關文章

相關文章