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

更新於 2024/10/30閱讀時間約 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
11會員
243內容數
哈囉!歡迎光臨我的沙龍!我是 KT,一位對應用程式開發充滿熱情的開發者。在這個專屬空間,我將與您分享我在應用開發領域的深入學習心得和豐富的實戰經驗。如果您對應用程式開發技術同樣充滿好奇,渴望不斷探索新知,歡迎成為我們的會員,一起在應用程式開發的旅途上,探索更深層次的技術世界,享受學習的樂趣。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
HKT實驗室 的其他內容
介紹在 Windows 上安裝 Flutter SDK 的三種主要方法。第一種是從 Flutter 官方網站手動下載並安裝。第二種方法是通過 Visual Studio Code 整合式開發環境安裝。第三種方法則是使用命令列工具,如 Chocolatey 。讀者可根據需求選擇合適的安裝方式。
主要介紹 Windows 和 macOS 的 Flutter 開發環境。需下載安裝 Flutter SDK 、 Visual Studio Code 、Android Studio 等相關可以開發 Android app; macOS 則需安裝 Xcode 等相關可以開發 iPhone app 。
本文專為 Flutter 開發者設計的實用指南,內容涵蓋了 Flutter SDK 的安裝、開發環境的設置、Dart 語言的核心概念、常用 UI 元件的應用及其實作等重要主題。透過豐富的實際範例和詳細的說明,讀者將能夠輕鬆掌握 Flutter 的基本概念,快速上手開發高效能的應用程式。
介紹在 Windows 上安裝 Flutter SDK 的三種主要方法。第一種是從 Flutter 官方網站手動下載並安裝。第二種方法是通過 Visual Studio Code 整合式開發環境安裝。第三種方法則是使用命令列工具,如 Chocolatey 。讀者可根據需求選擇合適的安裝方式。
主要介紹 Windows 和 macOS 的 Flutter 開發環境。需下載安裝 Flutter SDK 、 Visual Studio Code 、Android Studio 等相關可以開發 Android app; macOS 則需安裝 Xcode 等相關可以開發 iPhone app 。
本文專為 Flutter 開發者設計的實用指南,內容涵蓋了 Flutter SDK 的安裝、開發環境的設置、Dart 語言的核心概念、常用 UI 元件的應用及其實作等重要主題。透過豐富的實際範例和詳細的說明,讀者將能夠輕鬆掌握 Flutter 的基本概念,快速上手開發高效能的應用程式。
你可能也想看
Google News 追蹤
Thumbnail
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
Thumbnail
本章節旨在介紹如何在不同操作系統上安裝和配置PHP環境,並使用命令行工具進行基礎操作。此外,還介紹了使用Visual Studio Code進行PHP開發的步驟,包括安裝擴展和設置調試環境。
我自己是希望可以製作iOS app來更好存放我的文章, 更進階一點,可以變成直接錄音後, 照我設定的方式轉換成文檔,讓iPhone變成我更強的助手。 感覺有很多可以探索,用時間慢慢累積經驗。
Thumbnail
此章節旨在引導讀者如何建立Java開發環境,包括安裝JDK、使用命令行工具編寫和運行Java程式,以及如何在Visual Studio Code、IntelliJ IDEA和Eclipse等IDE中設置和使用Java環境。
Windows : 下載Git (git-scm.com)並按照指示安裝。 安裝完成後,你可以通過運行以下命令來確認安裝是否成功: git --version 初次設定GIT 接下來就是按照初次設定git,會需要配置你的用戶名和電子郵件地址,這些信息將被記錄在您提交的每個變更中。 git
Thumbnail
本章節介紹了如何建立並設置Swift項目以及如何選擇和設置Swift代碼編輯器。這包括在Xcode和命令行中建立Swift項目,選擇Xcode、Visual Studio Code或AppCode作為編輯器,以及如何使用SPM安裝插件。
Thumbnail
# 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
Thumbnail
Part.1 搞定基本的 UI 開始開發 iOS App。 首先準備一台 Mac,然後安裝 Xcode,新增專案,系統即刻生成基本的專案結構。coding 的起點在檔案 ContentView.swift: import SwiftUI struct ContentView: View {  
Thumbnail
有沒有想過,即使沒有任何編程背景,你的創意也能在六個月內轉化成真實的App?我可以以自身經歷跟你說有了 No-Code Tool (無代碼工具) 和 AI 的幫助,這一切都是可能的!你一行 code 都不需要打,甚至也無須學習任何編程語言!沒有什麼比實踐一個自小認為不可能的任務還振奮人心的事了!
Thumbnail
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
Thumbnail
本章節旨在介紹如何在不同操作系統上安裝和配置PHP環境,並使用命令行工具進行基礎操作。此外,還介紹了使用Visual Studio Code進行PHP開發的步驟,包括安裝擴展和設置調試環境。
我自己是希望可以製作iOS app來更好存放我的文章, 更進階一點,可以變成直接錄音後, 照我設定的方式轉換成文檔,讓iPhone變成我更強的助手。 感覺有很多可以探索,用時間慢慢累積經驗。
Thumbnail
此章節旨在引導讀者如何建立Java開發環境,包括安裝JDK、使用命令行工具編寫和運行Java程式,以及如何在Visual Studio Code、IntelliJ IDEA和Eclipse等IDE中設置和使用Java環境。
Windows : 下載Git (git-scm.com)並按照指示安裝。 安裝完成後,你可以通過運行以下命令來確認安裝是否成功: git --version 初次設定GIT 接下來就是按照初次設定git,會需要配置你的用戶名和電子郵件地址,這些信息將被記錄在您提交的每個變更中。 git
Thumbnail
本章節介紹了如何建立並設置Swift項目以及如何選擇和設置Swift代碼編輯器。這包括在Xcode和命令行中建立Swift項目,選擇Xcode、Visual Studio Code或AppCode作為編輯器,以及如何使用SPM安裝插件。
Thumbnail
# 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
Thumbnail
Part.1 搞定基本的 UI 開始開發 iOS App。 首先準備一台 Mac,然後安裝 Xcode,新增專案,系統即刻生成基本的專案結構。coding 的起點在檔案 ContentView.swift: import SwiftUI struct ContentView: View {  
Thumbnail
有沒有想過,即使沒有任何編程背景,你的創意也能在六個月內轉化成真實的App?我可以以自身經歷跟你說有了 No-Code Tool (無代碼工具) 和 AI 的幫助,這一切都是可能的!你一行 code 都不需要打,甚至也無須學習任何編程語言!沒有什麼比實踐一個自小認為不可能的任務還振奮人心的事了!