【Flutter 學習筆記】如何在 macOS 上安裝 Flutter SDK

更新於 發佈於 閱讀時間約 6 分鐘
raw-image
【Flutter 學習筆記】線上課程教學影片:連結
【Flutter 學習筆記】系列文章目錄:連結

在 macOS 上安裝 Flutter SDK 主要的三種方式

raw-image

在 macOS 上安裝 Flutter SDK 有多種方式,以下將介紹三種常見的方法,幫助讀者能夠輕鬆開始使用 Flutter 進行開發。

方法一:從 Flutter 官方網站直接下載與手動安裝

這是最直接的安裝方式,適合喜歡手動配置的開發者。

  • 訪問 Flutter 官方網站:前往 flutter.dev
  • 選擇 macOS 平台:在下載頁面中選擇適合 macOS 的版本。
  • 下載 SDK 壓縮檔:根據您的 CPU 類型(Intel 或 Apple Silicon)下載相對應的 SDK 壓縮檔。
  • 解壓縮檔案:將下載的檔案解壓縮到指定目錄,例如桌面上的 development 資料夾。
  • 設定環境變數

- 如果使用 Zsh shell:

1. 編輯 ~/.zshrc

2. 將 Flutter 的 `bin` 目錄添加到 `PATH` 中,例如:

export PATH="$PATH:[Flutter SDK 的安裝路徑]/flutter/bin"

3. 儲存文件後,重新載入設定:

source ~/.zshrc

- 如果使用 Bash shell:

1. 編輯 ~/.bash_profile

2. 將 Flutter 的 `bin` 目錄添加到 `PATH` 中,例如:

export PATH="$PATH:[Flutter SDK 的安裝路徑]/flutter/bin"

3. 儲存文件後,重新載入設定:

source ~/.bash_profile
  • 檢查安裝

打開終端機,執行以下命令以確認安裝是否成功:

flutter --version
flutter doctor

方法二:使用 Visual Studio Code 整合式開發環境安裝 Flutter SDK

如果您偏好使用整合式開發環境(IDE),Visual Studio Code 是一個不錯的選擇。

  • 安裝 Visual Studio Code
  • 安裝 Flutter 擴充套件
    • 在 VS Code 中,前往擴充套件市場,搜尋並安裝 Flutter 擴充套件。
  • 建立新 Flutter 專案
    • 使用命令面板(Command Palette)執行 "Flutter: New Project"。
    • 選擇您之前安裝的 SDK 位置。
  • 設定環境變數

- 如果使用 Zsh shell:1. 編輯 ~/.zshrc。2. 將 Flutter 的 `bin` 目錄添加到 `PATH` 中,例如:

export PATH="$PATH:[Flutter SDK 的安裝路徑]/flutter/bin"
3. 儲存文件後,重新載入設定:
source ~/.zshrc
- 如果使用 Bash shell:1. 編輯 ~/.bash_profile。2. 將 Flutter 的 `bin` 目錄添加到 `PATH` 中,例如:
export PATH="$PATH:[Flutter SDK 的安裝路徑]/flutter/bin"
3. 儲存文件後,重新載入設定:
source ~/.bash_profile

  • 檢查安裝

打開終端機,執行以下命令以確認安裝是否成功:

flutter --version

flutter doctor

方法三:使用命令列工具安裝 Flutter SDK

對於喜歡使用命令列的開發者,這種方式非常方便。

  • 使用 Homebrew 安裝
    • 首先,確保您已安裝 Homebrew。如果尚未安裝,可以在終端機中執行以下命令:
      bash複製代碼/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
    • 然後執行以下命令安裝 Flutter:
      bash複製代碼brew install flutter
  • 使用 Git 安裝
    • 選擇一個目錄,然後執行以下命令以克隆 Flutter 的 Git 倉庫:
      bash複製代碼git clone https://github.com/flutter/flutter.git
  • 設定環境變數

- 如果使用 Zsh shell:

1. 編輯 ~/.zshrc

2. 將 Flutter 的 `bin` 目錄添加到 `PATH` 中,例如:

export PATH="$PATH:[Flutter SDK 的安裝路徑]/flutter/bin"

3. 儲存文件後,重新載入設定:

source ~/.zshrc

- 如果使用 Bash shell:

1. 編輯 ~/.bash_profile

2. 將 Flutter 的 `bin` 目錄添加到 `PATH` 中,例如:

export PATH="$PATH:[Flutter SDK 的安裝路徑]/flutter/bin"

3. 儲存文件後,重新載入設定:

source ~/.bash_profile
  • 檢查安裝

打開終端機,執行以下命令以確認安裝是否成功:

flutter --version
flutter doctor

透過以上三種方式,您可以根據自己的需求選擇最適合的安裝方法,快速開始您的 Flutter 開發之旅。

留言
avatar-img
留言分享你的想法!
avatar-img
HKT實驗室
22會員
261內容數
哈囉!歡迎光臨我的沙龍!我是 KT,一位對應用程式開發充滿熱情的開發者。在這個專屬空間,我將與您分享我在應用開發領域的深入學習心得和豐富的實戰經驗。如果您對應用程式開發技術同樣充滿好奇,渴望不斷探索新知,歡迎成為我們的會員,一起在應用程式開發的旅途上,探索更深層次的技術世界,享受學習的樂趣。
HKT實驗室的其他內容
2024/11/28
在本文中,我們將介紹 TextField 文字輸入框元件及其基本用法。TextField 是一個關鍵的元件,使用者可以輕鬆地輸入文字,廣泛應用於各類應用程式中,如表單、搜尋框和聊天介面等。
Thumbnail
2024/11/28
在本文中,我們將介紹 TextField 文字輸入框元件及其基本用法。TextField 是一個關鍵的元件,使用者可以輕鬆地輸入文字,廣泛應用於各類應用程式中,如表單、搜尋框和聊天介面等。
Thumbnail
2024/11/28
本篇文章將深入探討如何在 Flutter 中使用 Image 圖片元件。我們將涵蓋從資源管理到顯示本地資料夾中的圖片,以及如何載入網路圖片的完整過程。透過這篇文章,您將學會如何有效地管理圖片資源,並在應用程式中正確顯示圖片,提升您的 Flutter 開發技能。
Thumbnail
2024/11/28
本篇文章將深入探討如何在 Flutter 中使用 Image 圖片元件。我們將涵蓋從資源管理到顯示本地資料夾中的圖片,以及如何載入網路圖片的完整過程。透過這篇文章,您將學會如何有效地管理圖片資源,並在應用程式中正確顯示圖片,提升您的 Flutter 開發技能。
Thumbnail
2024/11/26
這篇文章深入探討了 Flutter 框架中的 ElevatedButton(漂浮按鈕)元件。文章介紹了其基本用法,包括必填參數 onPressed 和 child 的解析,並示範了如何使用匿名函數來處理按鈕點擊事件。此外,還說明了如何設定按鈕的顏色和形狀,並提供了完整的範例程式碼。
Thumbnail
2024/11/26
這篇文章深入探討了 Flutter 框架中的 ElevatedButton(漂浮按鈕)元件。文章介紹了其基本用法,包括必填參數 onPressed 和 child 的解析,並示範了如何使用匿名函數來處理按鈕點擊事件。此外,還說明了如何設定按鈕的顏色和形狀,並提供了完整的範例程式碼。
Thumbnail
看更多
你可能也想看
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
介紹了在 Windows 和 macOS 上如何建置 Flutter Android 應用程式開發環境的方法。包括硬體需求、軟體需求、安裝開發工具、設置 Android 開發環境、驗證安裝及開始開發等步驟。
Thumbnail
介紹了在 Windows 和 macOS 上如何建置 Flutter Android 應用程式開發環境的方法。包括硬體需求、軟體需求、安裝開發工具、設置 Android 開發環境、驗證安裝及開始開發等步驟。
Thumbnail
介紹在 macOS 上安裝 Flutter SDK 的三種主要方法。第一種是從 Flutter 官方網站手動下載並安裝。第二種方法是通過 Visual Studio Code 整合式開發環境安裝。第三種方法則是使用命令列工具,如 Chocolatey 。讀者可根據需求選擇合適的安裝方式。
Thumbnail
介紹在 macOS 上安裝 Flutter SDK 的三種主要方法。第一種是從 Flutter 官方網站手動下載並安裝。第二種方法是通過 Visual Studio Code 整合式開發環境安裝。第三種方法則是使用命令列工具,如 Chocolatey 。讀者可根據需求選擇合適的安裝方式。
Thumbnail
介紹在 Windows 上安裝 Flutter SDK 的三種主要方法。第一種是從 Flutter 官方網站手動下載並安裝。第二種方法是通過 Visual Studio Code 整合式開發環境安裝。第三種方法則是使用命令列工具,如 Chocolatey 。讀者可根據需求選擇合適的安裝方式。
Thumbnail
介紹在 Windows 上安裝 Flutter SDK 的三種主要方法。第一種是從 Flutter 官方網站手動下載並安裝。第二種方法是通過 Visual Studio Code 整合式開發環境安裝。第三種方法則是使用命令列工具,如 Chocolatey 。讀者可根據需求選擇合適的安裝方式。
Thumbnail
主要介紹 Windows 和 macOS 的 Flutter 開發環境。需下載安裝 Flutter SDK 、 Visual Studio Code 、Android Studio 等相關可以開發 Android app; macOS 則需安裝 Xcode 等相關可以開發 iPhone app 。
Thumbnail
主要介紹 Windows 和 macOS 的 Flutter 開發環境。需下載安裝 Flutter SDK 、 Visual Studio Code 、Android Studio 等相關可以開發 Android app; macOS 則需安裝 Xcode 等相關可以開發 iPhone app 。
Thumbnail
這篇使用pubspec.yaml來管理第三方依賴套件。YAML是一種直覺、可讀性高的文件格式;他和xml或Json相比語法簡單且容易解析,所以常用於配置文件。 Flutter預設的設定檔是pubspec.yaml,底下是關鍵字解釋: name:應用程式或套件名稱。 description: 應用
Thumbnail
這篇使用pubspec.yaml來管理第三方依賴套件。YAML是一種直覺、可讀性高的文件格式;他和xml或Json相比語法簡單且容易解析,所以常用於配置文件。 Flutter預設的設定檔是pubspec.yaml,底下是關鍵字解釋: name:應用程式或套件名稱。 description: 應用
Thumbnail
本文教你如何在配備 M1 晶片的 MacBook Air 上安裝Flutter,以同時開發Android和iOS apps。
Thumbnail
本文教你如何在配備 M1 晶片的 MacBook Air 上安裝Flutter,以同時開發Android和iOS apps。
Thumbnail
今天要來介紹如何在Fedora 作業系統上安裝Android Studio,小魚實際安裝Android Studio後發現步驟其實蠻簡單的。 然後整個安裝過程記錄在這篇文章,如果有不會安裝Android Studio的初學者可以參考這篇文章。 android studio 安裝 首先到an
Thumbnail
今天要來介紹如何在Fedora 作業系統上安裝Android Studio,小魚實際安裝Android Studio後發現步驟其實蠻簡單的。 然後整個安裝過程記錄在這篇文章,如果有不會安裝Android Studio的初學者可以參考這篇文章。 android studio 安裝 首先到an
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News