2021年12月29日 星期三

設定 Flutter 開發環境 (Linux)

 1.  下載開發相關套件

1-1.  下載 Visual Studio Code 的IDE套件

1-2.  下載Flutter SDK

1-3.  下載Android Studio

2.  安裝及解壓縮相關套件

2-1.  安裝Visual Studio Code 和解壓縮Flutter SDK

2-2.  解壓縮Android Studio檔案

2-3.  安裝Git套件

2-4.  設定相關的系統環境變數

 在bashrc檔案中設定:  (1) Flutter SDK  (2) Android Studio路徑 

3.  安裝Visual Studio Code開發擴充套件介面

3-1.  開啟擴充套件介面:

     View -> Command Paletted -> install extensions

3-2.  安裝Dart套件

3-3.  安裝 Flutter 擴充套件介面

4.  安裝Androd相關開發套件

4-1.  開啟SDK Manager的介面

4-2.  安裝Android SDK Command-line Tools

4-3.  執行flutter doctor 確認相關套件是否安裝完成,若否則執行flutter doctor --android-licenses

 4-4.  執行Flutter doctor 確認 Android 相關套件是否安裝完成

5.  安裝Chrome相關開發套件

5-1.  下載Chrome 瀏覽器

5-2.  安裝 Chrome 瀏覽器套件和執行flutter doctor 確認安裝結果

6.  安裝Linux相關開發套件

6-1.  安裝 Linux Desktop Application 開發套件

6-2.  開啟支援 Linux Desktop App 功能

6-3.  執行flutter doctor 確認安裝結果

設定 Flutter 開發環境 (Windows)

1.  下載開發相關套件

1-1.  下載 Visual Studio Code 的IDE套件


 

1-2.  下載Flutter SDK

 

1-3.  下載Android Studio

2.  安裝及解壓縮相關開發套件

2-1.  設定Flutter SDK路徑

3.  安裝Visual Studio Code開發擴充套件介面

3-1.  開啟擴充套件介面:

View -> Command Paletted -> install extensions

3-2.  安裝Dart套件

3-3.  安裝 Flutter 擴充套件介面 

3-4.  執行flutter doctor 確認安裝結果

4.  安裝Visual Studio 開發相關套件

4-1.  依目前Flutter支援的Visual Studio下載對應的版本

https://docs.flutter.dev/get-started/install/windows

4-2.  安裝使用C++的桌面開發套件

4-3.  執行flutter doctor 確認安裝結果

5.  安裝Androd相關開發套件

5-1.  開啟SDK Manager的介面

5-2.  安裝Android SDK Command-line Tools 

5-3.  執行flutter doctor --android-licenses 

5-4.  執行flutter doctor 確認安裝結果

6.  安裝Chrome 相關開發套件

6-1.  下載 Chrome 瀏覽器

6-2.  執行flutter doctor 確認安裝結果