跳至主要內容
目錄

開始在 ChromeOS 上建構 Flutter Web 應用程式

目錄

驗證系統需求

#

若要安裝並執行 Flutter，您的 ChromeOS 環境必須符合下列硬體和軟體需求。

硬體需求

#

您的 ChromeOS Flutter 開發環境必須符合下列最低硬體需求。

需求最低建議
CPU 核心數48
記憶體 (GB)816
螢幕解析度 (像素)WXGA (1366 x 768)FHD (1920 x 1080)
可用磁碟空間 (GB)11.060.0

軟體需求

#

若要撰寫並編譯用於 Web 的 Flutter 程式碼，您必須擁有以下版本的 ChromeOS 和列出的軟體套件。

作業系統

#

Flutter 支援 ChromeOS。

開發工具

#

若要在 ChromeOS 上開發 Flutter

  1. 在您的 Chromebook 上啟用 Linux。

  2. 安裝下列套件： curl、git、unzip、xz-utils、zip、libglu1-mesa

    sudo apt-get update -y && sudo apt-get upgrade -y;
sudo apt-get install -y curl git unzip xz-utils zip libglu1-mesa

  3. 安裝 Google Chrome，以偵錯 Web 應用程式的 JavaScript 程式碼。

如何從命令列安裝 Chrome
wget https://dl-ssl.google.com/linux/linux_signing_key.pub -O /tmp/google.pub
gpg --no-default-keyring \
        --keyring /etc/apt/keyrings/google-chrome.gpg \
        --import /tmp/google.pub
echo 'deb [arch=amd64 signed-by=/etc/apt/keyrings/google-chrome.gpg] http://dl.google.com/linux/chrome/deb/ stable main' | sudo tee /etc/apt/sources.list.d/google-chrome.list
sudo apt-get update -y; sudo apt-get install -y google-chrome-stable

當您執行目前版本的 flutter doctor 時，它可能會列出這些套件的不同版本。如果這樣，請安裝它建議的版本。

上述軟體的開發人員會為這些產品提供支援。若要疑難排解安裝問題，請查閱該產品的文件。

設定文字編輯器或 IDE

#

您可以使用任何文字編輯器或整合開發環境 (IDE) 與 Flutter 的命令列工具來建置應用程式。

使用具有 Flutter 擴充功能或外掛程式的 IDE 可以提供程式碼完成、語法高亮、Widget 編輯輔助、偵錯和其他功能。

常見的選項包括

安裝 Flutter SDK

#

若要安裝 Flutter SDK，您可以使用 VS Code Flutter 擴充功能，或是自行下載並安裝 Flutter 套件。

使用 VS Code 安裝 Flutter

#

若要使用這些指示安裝 Flutter，請確認您已安裝 Visual Studio Code 1.77 或更新版本以及 用於 VS Code 的 Flutter 擴充功能。

提示 VS Code 安裝 Flutter

#

  1. 啟動 VS Code。

  2. 若要開啟「命令面板」，請按下 Control + Shift + P。

  3. 在「命令面板」中，輸入 flutter。

  4. 選取「Flutter: New Project (Flutter：新專案)」。

  5. VS Code 會提示您找出電腦上的 Flutter SDK。

    1. 如果您已安裝 Flutter SDK，請按一下「Locate SDK (尋找 SDK)」。

    2. 如果您未安裝 Flutter SDK，請按一下「Download SDK (下載 SDK)」。

      如果您未按照開發工具先決條件中的指示安裝 Git，這個選項會將您導向 Flutter 安裝頁面。

  6. 當提示「Which Flutter template? (使用哪個 Flutter 範本？)」時，請忽略它。按下 Esc。您可以在檢查您的開發設定後建立測試專案。

下載 Flutter SDK

#

  1. 當顯示「Select Folder for Flutter SDK (選取 Flutter SDK 的資料夾)」對話方塊時，請選擇您要安裝 Flutter 的位置。

    VS Code 會將您置於您的使用者設定檔中開始。請選擇其他位置。

    請考慮使用 ~/development/

  2. 按一下「Clone Flutter (複製 Flutter)」。

    下載 Flutter 時，VS Code 會顯示此快顯通知

    Downloading the Flutter SDK. This may take a few minutes.

    此下載需要幾分鐘。如果您懷疑下載已停止，請按一下「Cancel (取消)」，然後重新開始安裝。

  3. 下載 Flutter 完成後，會顯示「Output (輸出)」面板。

    Checking Dart SDK version...
Downloading Dart SDK from the Flutter engine ...
Expanding downloaded archive...

    成功時，VS Code 會顯示此快顯通知

    Initializing the Flutter SDK. This may take a few minutes.

    在初始化時，「Output (輸出)」面板會顯示以下內容

    Building flutter tool...
Running pub upgrade...
Resolving dependencies...
Got dependencies.
Downloading Material fonts...
Downloading Gradle Wrapper...
Downloading package sky_engine...
Downloading flutter_patched_sdk tools...
Downloading flutter_patched_sdk_product tools...
Downloading windows-x64 tools...
Downloading windows-x64/font-subset tools...

    此程序也會執行 flutter doctor -v。在此步驟中，請忽略此輸出。 Flutter Doctor 可能會顯示不適用於此快速入門的錯誤。

    當 Flutter 安裝成功時，VS Code 會顯示此快顯通知

    Do you want to add the Flutter SDK to PATH so it's accessible
in external terminals?

  4. VS Code 可能會顯示 Google Analytics 通知。

    如果您同意，請按一下「OK (確定)」。

  5. 若要在所有 Shell 視窗中啟用 flutter

    1. 關閉，然後重新開啟所有 Shell 視窗。
    2. 重新啟動 VS Code。

下載然後安裝 Flutter

#

若要安裝 Flutter，請從其封存下載 Flutter SDK 套件、將套件移動到您要儲存的位置，然後解壓縮 SDK。

  1. 下載下列安裝套件以取得 Flutter SDK 的最新穩定版本。

    (載入中...)

    如需其他發佈管道和較舊的組建，請查看 SDK 封存。

    Flutter SDK 應該會下載到 ChromeOS 的預設下載目錄：~/Downloads/。

  2. 建立一個您可以安裝 Flutter 的資料夾。

    請考慮在 ~/development/ 建立目錄。

  3. 將檔案解壓縮到您要儲存 Flutter SDK 的目錄中。

    tar -xf ~/Downloads/flutter_sdk_v1.0.0.zip -C ~/development/

    完成後，Flutter SDK 應該位於 ~/development/flutter 目錄中。

將 Flutter 新增至您的 PATH

#

若要在 Shell 中執行 Flutter 命令，請將 Flutter 新增至 PATH 環境變數。

  1. 檢查當您開啟新的主控台視窗時啟動哪個 Shell。這會是您的預設 Shell。

    echo $SHELL

    這與另一個告訴您哪個 Shell 在您目前的主控台中執行的命令不同。

    echo $0

  2. 若要將 Flutter 新增至您的 PATH，請展開您預設 Shell 的項目，然後選擇命令。

    顯示bashcommand
    echo 'export PATH="~/development/flutter/bin:$PATH"' >> ~/.bash_profile
    顯示zshcommand
    echo 'export PATH="~/development/flutter/bin:$PATH"' >> ~/.zshenv
    顯示fishcommand
    fish_add_path -g -p ~/development/flutter/bin
    顯示cshcommand
    echo 'setenv PATH "~/development/flutter/bin:$PATH"' >> ~/.cshrc
    顯示tcshcommand
    echo 'setenv PATH "~/development/flutter/bin:$PATH"' >> ~/.tcshrc
    顯示kshcommand
    echo 'export PATH="~/development/flutter/bin:$PATH"' >> ~/.profile
    顯示shcommand
    echo 'export PATH="~/development/flutter/bin:$PATH"' >> ~/.profile

  3. 若要套用此變更，請重新啟動所有開啟的終端機工作階段。

檢查您的開發設定

#

help 說明

執行 Flutter doctor

#

flutter doctor 命令會驗證 ChromeOS 完整 Flutter 開發環境的所有元件。

  1. 開啟 Shell。

  2. 若要驗證您所有元件的安裝，請執行下列命令。

    flutter doctor

當您選擇開發 Web 時，您不需要所有元件。如果您遵循本指南，您的命令結果應該會類似

Running flutter doctor...
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.24.5, on , locale en)
[!] Android toolchain - develop for Android devices
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] VS Code (version 1.95)
[✓] Connected device (1 available)
[✓] Network resources


! Doctor found issues in 3 categories.

疑難排解 Flutter doctor 問題

#

當 flutter doctor 命令傳回錯誤時，可能是因為 Flutter、VS Code、連線的裝置或網路資源發生錯誤。

如果 flutter doctor 命令針對這些元件中的任何一個傳回錯誤，請使用詳細旗標再次執行。

flutter doctor -v

檢查輸出，以了解您可能需要安裝的其他軟體或要執行的其他工作。

如果您變更 Flutter SDK 或其相關元件的組態，請再次執行 flutter doctor 以驗證安裝。

開始使用 Flutter 在 ChromeOS 上開發 Web 應用程式

#

恭喜。 安裝所有先決條件和 Flutter SDK 後，您可以開始在 ChromeOS 上開發適用於 Web 的 Flutter 應用程式。

若要繼續您的學習旅程，請參考下列指南

管理您的 Flutter SDK

#

若要深入了解如何管理您的 Flutter SDK 安裝，請參考下列資源。

除非另有說明，否則本網站上的文件會反映 Flutter 的最新穩定版本。頁面上次更新於 2024-10-28。 檢視原始碼 或 回報問題。