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, 總結的可能也不準確, 不足之處還望海涵, 後續會繼續優化相關文章

相關文章