Flutter環境安裝

這篇來簡單紀錄一下 Flutter 環境的安裝步驟。

安裝步驟

下載Flutter

下載連結｜Install | Flutter

放置下載的檔案

將檔案解壓縮後，放到一個沒有特殊字元與空格的路徑（C:\src\flutter）

將Flutter路徑放入環境變數Path中

1. 點選Windows，輸入「環境變數」，點選進入「編輯系統環境變數」
2. 將上面放置flutter的路徑加到「使用者變數」的「PATH」中
   • 以上面範例來說就是「C:\src\flutter\bin」
3. 確認是否設定成功
   1. 關閉windows console，並重新開啟
   2. 輸入「where flutter dart」
   3. 確認是否有顯示可執行檔的正確位置

C:\>src\flutter> where flutter dart

C:\src\flutter\bin\flutter
C:\src\flutter\bin\flutter.bat
C:\src\flutter\bin\dart
C:\src\flutter\bin\dart.bat

修正flutter相關環境問題

執行「flutter doctor」

依照回報的狀況進行修正

建立Web專案

執行以下指令

flutter create 專案名稱

如果專案名稱不符合規則時，會出現「”XXX” is not a valid Dart package name.」的錯誤訊息

專案名稱允許使用a~z（字母必須為小寫）、0~9、_的字元。開頭不能是數字，且不能使用保留字。

完整的專案名稱的命名規則，參考 這裡

使用IntelliJ建立專案

套件管理

安裝套件

在command mode模式下

進入專案資料夾
C:\>cd d:\projects\flutter01
D:\projects\flutter01>

安裝套件
D:\projects\flutter01> flutter pub add 套件名稱

移除套件
D:\projects\flutter01> flutter pub remove 套件名稱

套件批次安裝

在 pubspec.yaml 中新增所需要的套件與版本資訊。如果有之前的專案，也可以從先前的專案複製過來。類似以下的粗體字部份。

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  mysql1: ^0.20.0
  fl_chart: ^0.55.2
  http: ^0.13.5
  flutter_local_notifications: ^13.0.0
  numberpicker: ^2.1.1
  flutter_riverpod: ^2.3.6
  shared_preferences: ^2.1.0

dev_dependencies:
  flutter_test:
    sdk: flutter

接著，透過指令的執行來批次安裝套件

D:\projects\flutter01> flutter pub get

進行Debug

>>flutter run -d chrome

建構web發佈版本

>>flutter build web

於本地端運行

安裝httpd

>>dart pub global activate dhttpd

於本地端運行

變更執行目錄

>>cd build/web

開始執行httpd

>>dart pub global run dhttpd

//在指定的路徑下啟動
>> dart pub global run dhttpd --path build\web\

//dhttpd相關設定
>> dhttpd --help
-p, --port=<port>    The port to listen on.
                     (defaults to "8080")
    --path=<path>    The path to serve. If not set, the current directory is used.
    --host=<host>    The hostname to listen on.
                     (defaults to "localhost")
-h, --help           Displays the help.

其他

flutter的版本更新

#會列出目前的flutter版本channel（目前有master、beta、dev、stable）
flutter channel

#切換flutter版本
flutter channel channel名稱

#檢查flutter版本
flutter --version

#Flutter SDK的版本更新
flutter upgrade

#Flutter 套件的更新
 flutter pub upgrade

使用IntelliJ

建立專案時，沒有flutter的選項

到「Plugins」中新增「flutter」，中途還會提到需要安裝「Dart」