跳到主內容

軟體要求

#

要編寫和編譯用於 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 程式碼。

上述軟體的開發者提供這些產品的支援。要解決安裝問題，請查閱該產品的文件。

配置文字編輯器或 IDE

#

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

使用帶有 Flutter 擴充套件或外掛的 IDE 可提供程式碼補全、語法高亮、小部件編輯輔助、除錯及其他功能。

流行的選項包括

安裝 Flutter SDK

#

要安裝 Flutter SDK，你可以使用 VS Code Flutter 擴充套件，或自行下載並安裝 Flutter 包。

使用 VS Code 安裝 Flutter

#

要按照這些說明安裝 Flutter，請驗證您已安裝 Visual Studio Code 和 VS Code 版 Flutter 擴充套件。

提示 VS Code 安裝 Flutter

#

  1. 啟動 VS Code。

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

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

  4. 選擇Flutter: 新建專案。

  5. VS Code 會提示你定位電腦上的 Flutter SDK。

    1. 如果你已安裝 Flutter SDK，請點選定位 SDK。

    2. 如果你未安裝 Flutter SDK，請點選下載 SDK。

      如果您尚未按照開發工具先決條件中的說明安裝 Git，此選項會將您帶到 Flutter 安裝頁面。

  6. 當提示哪個 Flutter 模板？時，請忽略。按 Esc。你可以在檢查開發環境設定後建立一個測試專案。

下載 Flutter SDK

#

  1. 當顯示選擇 Flutter SDK 資料夾對話方塊時，選擇你想要安裝 Flutter 的位置。

    VS Code 會首先將你定位到使用者配置檔案目錄。請選擇其他位置。

    考慮使用 ~/development/

  2. 點選克隆 Flutter。

    下載 Flutter 時，VS Code 會顯示以下彈窗通知：

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

    下載和安裝需要幾分鐘。如果你懷疑下載已卡住，請點選取消，然後重新開始安裝。

    Flutter 安裝成功後，VS Code 會顯示此彈窗通知：

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

  3. 點選新增 SDK 到 PATH。

    成功時，會顯示通知

    The Flutter SDK was added to your PATH

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

    如果你同意，點選確定。

  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 條目，然後選擇命令。

    顯示 bash 命令
    echo 'export PATH="$HOME/development/flutter/bin:$PATH"' >> ~/.bash_profile
    顯示 zsh 命令
    echo 'export PATH="$HOME/development/flutter/bin:$PATH"' >> ~/.zshenv
    顯示 fish 命令
    fish_add_path -g -p ~/development/flutter/bin
    顯示 csh 命令
    echo 'setenv PATH "$HOME/development/flutter/bin:$PATH"' >> ~/.cshrc
    顯示 tcsh 命令
    echo 'setenv PATH "$HOME/development/flutter/bin:$PATH"' >> ~/.tcshrc
    顯示 ksh 命令
    echo 'export PATH="$HOME/development/flutter/bin:$PATH"' >> ~/.profile
    顯示 sh 命令
    echo 'export PATH="$HOME/development/flutter/bin:$PATH"' >> ~/.profile

  3. 要應用此更改，請重新啟動所有開啟的終端會話。

檢查開發環境設定

#

幫助

執行 Flutter doctor

#

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

  1. 開啟 Shell。

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

    flutter doctor

由於您選擇為 Web 開發，因此您不需要所有元件。如果您遵循本指南，該命令應輸出 [✓] 表示您已設定的工具和平臺。

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 的最新穩定版本。頁面最後更新於 2025-09-05。 檢視原始碼 或 報告問題。