1. 程式人生 > >Android-Flutter從基礎到入門(一)

Android-Flutter從基礎到入門(一)

Flutter是谷歌的移動UI框架,可以快速在iOS和Android上構建高質量的原生使用者介面。 Flutter可以與現有的程式碼一起工作。在全世界,Flutter正在被越來越多的開發者和組織使用,並且Flutter是完全免費、開源的。

它也是構建未來的Google Fuchsia  應用的主要方式。

以上來自百度百科

此篇主要是介紹如何安裝flutter,併成功run,

因為本人是mac系統,所以主要是針對mac系統的安裝流程做下介紹,如果是win系統,請自行轉義.

系統要求

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

  • 作業系統: macOS (64-bit)
  • 磁碟空間: 700 MB (不包括Xcode或Android Studio的磁碟空間).
  • 工具: Flutter 依賴下面這些命令列工具.
    • bashmkdirrmgitcurlunzipwhich

下載sdk需要翻牆,或者去github下載安裝包都是可以的

1. 安裝

下載完成之後進行解壓.並且新增到環境中

vim ~/.bash_profile

新增環境

export PATH=`pwd`/flutter/bin:$PATH

然後輸入:wq進行儲存,接著輸入source,進行同步

source ~/.bash_profile

通過echo命令,來檢視PATH是否有剛剛配的環境

echo $PATH

執行 flutter doctor

執行以下命令檢視是否需要安裝其它依賴項來完成安裝:

flutter doctor

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

我輸入完之後顯示

其中android studio顯示

[✓] Android Studio (version 3.1)

    ✗ Flutter plugin not installed; this adds Flutter specific functionality.

    ✗ Dart plugin not installed; this adds Dart specific functionality.

說明沒有安裝flutter的外掛.我們需要進去android studio的plugin介面,進行外掛的安裝

安裝完成之後重啟as.

再次輸入

flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.9.4, on Mac OS X 10.13.4 17E199, locale zh-Hans-CN)
[!] Android toolchain - develop for Android devices (Android SDK 28.0.3)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[✗] iOS toolchain - develop for iOS devices
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
    ✗ Brew not installed; use this to install tools for iOS device development.
      Download brew at https://brew.sh/.
[✓] Android Studio (version 3.2)
[!] IntelliJ IDEA Ultimate Edition (version 2018.2.1)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] Connected devices
    ! No devices available

! Doctor found issues in 4 categories.

說明android studio已經沒有問題.可以正常跑了.

2. 執行

Android Studio: 為Flutter提供完整的IDE體驗.

建立新應用

  1. 選擇 File>New Flutter Project
  2. 選擇 Flutter application 作為 project 型別, 然後點選 Next
  3. 輸入專案名稱 (如 myapp), 然後點選 Next
  4. 點選 Finish
  5. 等待Android Studio安裝SDK並建立專案.

上述命令建立一個Flutter專案,專案名為myapp,其中包含一個使用Material 元件的簡單演示應用程式。

然後點選Run.即可開跑..

注:熱載入記得開起來.

3. 問題解決

如果碰到執行,卻一直處在這個介面的時候.別慌.

Waiting for another flutter command to release the startup lock...

去到下載的flutter目錄下bin目錄.cache下把lockfile刪除即可.

flutter -> bin -> cache -> lockfile

刪除完成之後重啟as