CSC's Home

一個試試看的地方

0%

flutter

發表於 更新於 Disqus：
1.7k 3 分鐘

基本步驟

  1. 檢查系統

    Linux
    Windows
    macOS

  2. 安裝flutter，android studio以及 visual studio code
  3. 設定flutter 環境
  4. 設定visual studio code 環境
  5. 神啟你的flutter 大業  

    Linux

  6. 於snap store 安裝flutter，android studio以及 visual studio code
  7. 設定flutter 環境
    1
    2
    3
    4
    5
    6
    7
    8
    1. android studio
        1. 在android studio中打開設定，點擊plugins，查詢flutter並安裝(請參照圖一)
        2. 在android studio中打開SDK manager，點擊SDK Platforms，勾選android 5.0至11.0並安裝(請參照圖二)
        3. 同樣於SDK manager，點擊SDK Tools，勾選 Android SDK Command-line Tools, and Android SDK Build-Tools並安裝(請參照圖三)
        4. 之後便可以於AVD manager選擇虛擬機的版本進行安裝
    2. flutter doctor
        1. 打開Shell
        2. 輸入 flutter doctor 並依照提示去確認所有錯誤直到第一個以及第二個打勾(請參照圖四、圖五)
  8. 設定visual studio code 環境
    1
    2
    1. 於VS Code中安裝flutter(請參照圖六)
    2. 於Invoke View > Command Palette…輸入 “doctor”, 然後選擇 Flutter: Run Flutter Doctor並檢查輸出(請參照圖七)

圖一

圖二

圖三

圖四

圖五

圖六

圖七

 

Windows

  1. 自行安裝android studio以及 visual studio code
  2. 安裝flutter
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    1. 於 https://storage.googleapis.com/flutter_infra/releases/stable/windows/flutter_windows_1.22.5-stable.zip 下載flutter
    2. 將下載好之.zip檔解壓縮
    3. 將flutter 資料夾置於C槽你想要的位置
        注意:請勿在C:\Program Files\需要提升權限的目錄中安裝Flutter 。
    4. 設定PATH環境
        1. 於開始頁面搜尋編輯系統環境參數(Edit environment variables for your account)並開啟
        2. 點擊環境變數(請參照圖八)
        3. 點擊使用者變數裡的PATH並按下編輯(請參照圖九)
        4. 新增一個PATH至flutter資料夾所在之處(要到flutter中的bin資料夾)(請參照圖十)
        5. 完成後請按下所有的套用以及確定並關閉編輯系統環境參數
  3. 設定flutter 環境
    1
    2
    3
    4
    5
    6
    7
    8
    1. android studio
        1. 在android studio中打開設定，點擊plugins，查詢flutter並安裝(請參照圖一)
        2. 在android studio中打開SDK manager，點擊SDK Platforms，勾選android 5.0至11.0並安裝(請參照圖二)
        3. 同樣於SDK manager，點擊SDK Tools，勾選 Android SDK Command-line Tools, and Android SDK Build-Tools, google USB Driver並安裝(請參照圖十一)
        4. 之後便可以於AVD manager選擇虛擬機的版本進行安裝
    2. flutter doctor
        1. 打開Shell
        2. 輸入 flutter doctor 並依照提示去確認所有錯誤直到第一個以及第二個打勾(請參照圖四、圖五)

    圖八

    圖九

    圖十

    圖十一

  1. 設定visual studio code 環境
    1
    2
    1. 於VS Code中安裝flutter(請參照圖六)
    2. 於Invoke View > Command Palette…輸入 “doctor”, 然後選擇 Flutter: Run Flutter Doctor並檢查輸出(請參照圖七)