0%

Flutter 起始...

logo_lockup_flutter_horizontal

Flutter 在 2018.12 被正式發佈後,很快速地吸引了諸多行動裝置開發者的目光。相信這個詞對大家來說已不那麼地陌生,所以本篇不打算著墨太多在它的介紹(咦

目標是讓大家能夠容易地上手,所以,以下將開始逐步帶著想要 動手 的朋友知道,我們需要準備哪些東西。

需要準備什麼

這標題應該很直白 XD
基本上大家需要知道的東西如下

  • Flutter SDK 要去哪裡下載
    • Windows
    • macOS
    • Linux
  • 可以使用哪些編輯工具
    • Android Studio
    • IntelliJ
    • Visual Studio Code

Flutter SDK 要去哪裡下載

可以從 Flutter 官網 首頁裡,找到 Get started 點進 Install 的頁面,可以看到如下的畫面中,分別有 WindowsmacOS以及Linux,三種主流平台皆有,請點擊自己作業系統的版本進去看操作步驟。

flutter-install-page

在裡面的頁面其實也有完整的安裝步驟,所以請大家自行跟著操作……(揍
是請跟著接下來的說明來逐步操作 ^^”

進到操作頁,可以看到一個很重要的章節 - Get the Flutter SDK,於此中能看到下載 SDK 壓縮檔的按鈕,接著就看自己想要解壓縮到哪個資料夾裡了。

環境設定


macOS/Linux

因為 macOS 跟 Linux 在這部份的指令差不多,就寫在一起了。我們就按著官網的說明,先在家目錄下建立一個名為 development 的目錄,然後將解壓後的 flutter 目錄放置其中。

可以依官方的說明,直接在這個當下先執行下面指令,就能暫時以環境變數執行之

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

或是直接將 flutter 指令的目錄設定到自己的環境變數裡,依自己放置 SDK 的路徑設定之。比方說按著上面所說,在家目錄下建立了development後而放入其中,那就是路徑就是 ~/development/flutter/bin

接下來先打開編輯

1
vi ~/.bash_profile

輸入

1
2
export PATH=~/development/flutter/bin:$PATH
#這邊的 "~/development" 就看各位自行將 SDK 放在哪裡而自行做調整嘍

輸入完畢後,按下 esc鍵,再輸入wq執行,完成編輯

mac_evn_setting

最後再執行讓它生效

1
source ~/.bash_profile

當環境變數設定好後
官方文件裡建議大家可以用下面這個指令,來為系統預載開發所需的二進位檔

1
flutter precache

Windows

官方文件上之於 Windwos 的環境,先在 C槽的根目錄下建立名為src的目錄,讓大家將解壓縮的 fluuter 目錄放置其中。然後將 C:\src\flutter\bin加入環境變數裡。

按編: 目前手邊沒有 windows 可用,截圖請容後補上

Flutter 檢測

Flutter 裡面有個指令在為我們檢測目前系統與開發環境上,還缺了哪些東西,指令如下,

1
flutter doctor

如果跟我一樣把幾個主要的 IDE 都裝上的話,會看到類似如下的結果

flutter_docker_01

接下來我們逐條來看一下

  • Flutter (Channel stable…
    當我們能執行 flutter doctor這個指令也意謂著這個項目是完全沒問題的。
  • Android toolchain
    Android 的設定環境,倘若是安裝 Android Studio 在開發的話,這個項目沒有解決,其實不會有問題。
  • iOS toolchain
    iOS 的設定環境,這個項目應該是發生在 macOS 且 XCode 上才會出現。
  • Android Studio
    因為我的環境安裝了 Android Studio Stable 與 Preview 的版本,因此跑了兩個項目出來,不然一般來說只會有一個
  • VS Code
    此項目在已安裝 Visual Studio Code 的環境中,才會出現。
  • Connected device
    只要開好了任何虛擬機器皆可通過