【Flutter 程式設計入門實戰 30 天】Day 2：安裝 Flutter 開發環境

作者： -

【Flutter 程式設計入門實戰 30 天】線上教學課程目錄 使用 Dart 程式語言，開發 Android 和 iOS APP 應用程式。

哈囉～大家好，我是 KT ，今天實戰第二天，KT 將為大家來介紹，如何安裝 Flutter 開發環境。

安裝 Flutter 開發環境

Windows 和 Linux 作業系統環境下只能開發 Android 應用程式。而 macOS 作業系統環境下則可以開發 Android 和 iOS 應用程式。本篇介紹將以 macOS 環境安裝為主。其他作業系統安裝步驟與方法可以參考官網說明介紹。

Flutter 官網介紹 Windows 安裝方式：
https://flutter.dev/docs/get-started/install/windows

Flutter 官網介紹 MacOS 安裝方式：
https://flutter.dev/docs/get-started/install/macos

Flutter 官網介紹 Linux 安裝方式：
https://flutter.dev/docs/get-started/install/linux

俗話說「萬事起頭難，好事多折磨」，要建立 Flutter 開發環境，目前確實不簡單，非一鍵即可完成安裝。因可開發多平台應用程式，所以需要安裝多種軟體：

  • Flutter SDK ：
    Flutter 開發工具包。

  • Android Studio ：
    Android 程式整合開發環境。
    (若要開發 Android APP 應用程式)

  • Xcode：
    iOS 程式整合開發環境。
    (若要開發 iOS APP 應用程式)

安裝 Flutter 開發環境

Step 1：先下載 Flutter SDK

目前寫此篇文章 Flutter SDK 最新版本為 2.2.1，壓縮檔案大小約為 1,015 MB。

Flutter SDK For MacOS 官方下載點：flutter_macos_2.2.1-stable.zip

Step 2：將下載回來的 zip 壓縮檔，解壓縮到你想存放的位置

  • 開啟終端機

 # 在桌面建立一個 development 資料夾
mkdir ~/Desktop/development

 # 進入 development 目錄
cd ~/Desktop/development

 # 解壓縮 Flutter.zip 壓縮檔到此目錄
unzip ~/Downloads/flutter_macos_2.2.1-stable.zip

Step 3：設定 Flutter 指令路徑

之後需要 Flutter 指令，若沒有設定指令路徑，將無法使用 Flutter

 # 語法
export PATH=$PATH:[你剛剛 Flutter 目錄路徑]/flutter/bin

 # 範例
export PATH=$PATH:/Users/CalvinHuo/Desktop/development/flutter/bin

 # 上面需注意的事，這裡是使用KT登入電腦的使用者資料夾名稱 CalvinHuo，可能會跟大家有所差異

透過上面方式只是暫時性設定 Flutter 指令路徑，若關閉終端機，下次進來，若沒再設定一次 flutter 指令路徑，將無法使用 flutter 指令，若需要永久設定 Flutter 指令路徑，需要修改 .bash_profile 檔：

 # 使用 nano 文字編輯器，開啟 「.bash_profile」
nano .bash_profile

 # 在「.bash_profile」檔案中加入 Flutter 指令路徑：
export PATH=$PATH:/Users/CalvinHuo/Desktop/development/flutter/bin

 # ctrl + x 存檔離開，將永久可使用 flutter 指令，不會因會關閉終端機，下次進來就無法使用 flutter 指令

 #新增的設定檔，需要重開終端機才會生效，若不想重開，可以執行以下指令
source ~/.bash_profile

Step 4：檢查需要安裝哪些軟體

透過 「flutter doctor」指令來檢查

flutter doctor

會出現類似下方指示:

「✓」 最左邊出現綠色勾勾，代表該項完成。
「！」驚嘆號即表示，還有遺漏。
「✗」叉叉表示，該項尚未安裝。

看到「！」、「✗」不用太擔心害怕，覺得出大問題了，只要根據上面命令指示，分別執行即可完成初步開發環境架設。 所以我們就接著再安裝 Android Studio 和 Xcode。若迫不及待想馬上體驗 flutter，可以先裝一套環境即可，如 Android 或 iOS 擇一環境，之後再裝另外一套。

同理，再一次強調 Windows 和 Linux 作業系統環境下只能開發 Android 應用程式。若要用 flutter 開發 iOS APP 只能在 MacOS 蘋果作業系統環境。附帶一提，若你最近剛好考慮換新電腦，KT 誠心無業配推薦，Mac 蘋果電腦，絕對是寫 Code 電腦的最佳選擇，每個專業程式設計工程師皆都應該要配備一台。

Step 5：下載並安裝 Android Studio

Android Studio 官方下載點：https://developer.android.com/studio

安裝完成，可以再執行「flutter doctor」指令來檢查，是否還有需要安裝的？

執行後，出現需要授權使用合約：

[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor
      --android-licenses

執行「flutter doctor --android-licenses」來授權使用合約：
PS. 接著都是按 Y，如果按Ｎ不同意將無法繼續使用。

flutter doctor --android-licenses

Step 6：下載並安裝 Xcode

Xcode 官方下載點：https://apps.apple.com/tw/app/xcode/id497799835

安裝完成，可以再執行「flutter doctor」指令來檢查，是否還有需要安裝的？

執行後，出現下方需安裝的內容，依照指示，分別執行提示語法

[!] iOS toolchain - develop for iOS devices (Xcode 10.2.1)
    ✗ libimobiledevice and ideviceinstaller are not installed. To install with
      Brew, run:
        brew update
        brew install --HEAD usbmuxd
        brew link usbmuxd
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install:
        brew install ios-deploy
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS platform side's plugin code that
        responds to your plugin usage on the Dart side.
        Without resolving iOS dependencies with CocoaPods, plugins will not work
        on iOS.
        For more info, see https://flutter.dev/platform-plugins
      To install:
        brew install cocoapods
        pod setup
[!] Android Studio (version 3.1)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] IntelliJ IDEA Community Edition (version 2019.1.3)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] Connected device
    ! No devices available

其中 brew 指的是 macOS 的 Homebrew 套件管理工具。若在安裝 brew 發生問題，可以使用「brew doctor」指令來解決發生的問題。

而 CocoaPods 是管理專案相依性的工具。Android 是使用 Gradle。

如果你的電腦 macOS 升級到 High Sierra (10.13.1) 以上，可能會遇到執行 pod setup 出現以下問題：

-bash: /usr/local/bin/pod: /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/ruby: bad interpreter: No such file or directory

解決方式：先移除 cocoapods 然後再安裝

# 反安裝，先移除 cocoapods 
sudo gem uninstall cocoapods  

# 重新安装，主要問題是因為 10.11 之後就需要指定文件夹
sudo gem install -n /usr/local/bin cocoapods

# 在執行，就不會遇到紅框內的問題
pod setup

Step 7：下載並安裝 Flutter IDE 整合程式碼編輯器

「Flutter 程式設計入門實戰 30 天」， KT 將使用 IntelliJ IDEA 程式碼編輯器來介紹如何開發 Flutter。KT 會選 IntelliJ IDEA 因為它可以單純建立一個很乾淨、很簡單的 Dart 專案來練習語法，可以把他想像成小孩子的遊樂場。不用開到 Flutter 專案。不然其實 Android Studio 就可以直接來使用，不用裝到三個大型 IDE 軟體。但如果真的有空間與運行資源的考量，可以只裝 Android Studio 直接在上面開發 Flutter 專案即可，需要另外練習 Dart 程式語言可以到 DartPad 上練習。

IntelliJ IDEA 下載點：IntelliJ IDEA Community。

安裝完直接開啟 IntelliJ IDEA ，點選 Preferences 選單

  • 安裝 Flutter 套件：Plugins -> Flutter -> Install

  • 安裝 Dart 套件：Plugins -> Dart -> Install 。安裝完點擊 Restart IDE ，將重新開啟Intellj IDEA 整合程式碼編輯器

另外補充：坊間常見另一套程式碼編輯器：Visual Studio Code 純粹看個人習慣喜好。擇一安裝一個 IDE 整合程式碼編輯器即可。

Visual Studio Code下載點：Visual Studio Code。

升級 Flutter SDK 版本

當 Flutter 有新版本釋出，可以透過下方終端機指令，來升級 Flutter SDK 版本

# 升級 Flutter SDK 版本
flutter upgrade

檢查確認 Flutter SDK 版本

# 檢查確認 Flutter SDK 版本
flutter --version

檢查當下頻道

$ flutter channel

Flutter channels:
* stable
  beta
  dev
  master

切換頻道

建議使用預設 stable 頻道，想要嚐鮮，提早體驗下一個版本才切換到 beta。

$ flutter channel [頻道名稱]

那今天就介紹到這邊囉～

順帶一提，KT 線上教室，臉書粉絲團，會不定期發佈相關資訊，不想錯過最新資訊，不要忘記來按讚，加追蹤喔！也歡迎大家將這篇文章分享給更多人喔。

我們明天見囉！！！掰掰～

參考資料

HKT 線上教室
http://tw-hkt.blogspot.com/

Background vector created by freepik
https://www.freepik.com

Flutter 官網
https://flutter.dev/docs

這個網誌中的熱門文章

2023 最新入門零基礎 Kotlin教學【從零開始學 Kotlin 程式設計】Kotlin 教學課程目錄 (Android Kotlin, IntelliJ IDEA, Android Studio, Android APP 開發教學)

作者： -
圖片
【從零開始學 Kotlin 程式設計】 線上教學課程目錄： https://bit.ly/2Kx7GrM Youtube 課程播放清單： https://bit.ly/3qJ5a5Q 本課程開發環境： Intellij IDEA 2023.1.2 Kotlin 1.8.x Java JDK 17.0.x (Eclipse Temurin - AdoptOpenJDK) HKT 講師，線上教學相關課程 HKT 講師，相關課程： 🎬 Jetpack Compose 教學講義 https://bit.ly/3JF4SFA 🎬 Swift 教學講義 https://bit.ly/3ekjsEP 🎬 Android 入門開發實戰：口罩地圖(Kotlin) 教學講義 https://bit.ly/2KKZcju 🎬 Dart 教學講義 https://bit.ly/2OJW6hl 🎬 Flutter 教學講義 https://bit.ly/37L47Ij 🎬 Java 教學講義 https://bit.ly/2WlCn6y 🎬 kotlin 教學講義 https://bit.ly/2Kx7GrM 從零開始學 Kotlin 程式設計 Kotlin 程式語言基礎入門課程，寫給新手的開發筆記，學習 Kotlin 最佳指南。這是一個非常好的學習資源，它可以幫助初學者更快地學習 Kotlin 程式語言。 課程說明 Kotlin 又被稱之為 Android 界的 Swift，Google I/O 2017 年，正式宣布 Kotlin 成為 Android 官方開發語言。Android Studio 3 官方正式直接支援 Kotlin 語法，可以使用 Kotlin 來開發 Android 行動應用程式。 Google I/O 2019 年，再次對外宣布 Kotlin 已成為 Android 第一首選開發語言 (First Language)。kotlin 的重要性今非昔比，你還在用 Java 開發 Android 應用程式嗎？ 這門課程完全適合初學者，無須任何撰寫過程式碼經驗，我們將從零基礎開始介紹，撰寫程式語言需具備的基礎知識。我們將從安裝 Kotlin 開發環境，然後學習寫第一行 Kotlin 程式。接下來介紹 Kotlin 基礎語法、邏輯判斷條件控制並討論循環控制等 Ko
Read more »

nano 文字編輯器

作者： -
圖片
新建／打開文件 nano 路徑+文件名 複製、剪下和貼上 # 複製一整行: Alt +6 # 剪下一整行： Ctrl +K # 貼上 Ctrl +U 搜尋 Ctrl+W 搜尋關鍵字 存檔 Ctrl+O 退出離開 nano 文字編輯器 Ctrl+X 如果你修改了文件，尚未存檔，會詢問你是否需要保存修改。輸入Y確認保存，輸入N不保存，按Ctrl+C取消返回。 如果輸入了Y，下一步會讓你輸入想要保存的文件名。如果不需要修改文件名，直接按 enter即可；若想要保存成別的名字或是另存檔名，則輸入新的名稱然後按 enter即可。這個時候也可用Ctrl+C來取消返回。
Read more »

2022 最新入門零基礎 Flutter教學 【Flutter 程式設計入門實戰 30 天】Flutter 教學課程目錄 (IntelliJ IDEA 開發教學)

作者： -
圖片
【Flutter 程式設計入門實戰 30 天】 線上教學課程目錄  使用 Dart 程式語言，開發 Android 和 iOS APP 應用程式。 HKT 講師，相關課程 HKT 講師，相關課程： 🎬 從零開始學 kotlin 程式設計 免費講義 https://bit.ly/2Kx7GrM 🎬 從零開始學 Jetpack Compose 程式設計 https://bit.ly/3JF4SFA 🎬Android 入門開發實戰：口罩地圖(Kotlin) 免費講義 https://bit.ly/2KKZcju 🎬從零開始學 Dart 程式設計 免費講義 https://bit.ly/2OJW6hl 🎬 Flutter 程式設計入門實戰 免費講義 https://bit.ly/37L47Ij 🎬從零開始學 Java 程式設計 免費講義 https://bit.ly/2WlCn6y 🎬 從零開始學 Swift 程式設計 免費講義 https://bit.ly/3ekjsEP Flutter 程式設計入門實戰 30 天 學習 Flutter 程式語言最佳指南，Flutter 程式語言基礎入門課程 課程說明 Flutter 是由 Google 主導的 Dart 程式語言研發出來的開源跨平台軟體框架 (Framework)，可開發 Android、iOS APP 行動應用程式、Web 網頁服務、Windows、macOS、Linux 和下一世代神秘 Fuchsia 作業系統桌面應用程式。且具有相當高效率 120FPS 的渲染性能，豐富的UI元件，媲美 Native 原生效能體驗。眾多優勢之下使得 Flutter 成為今年最熱門的新技術。看得出來 Google 未來將透過 Flutter 一統江山。只需要用一套程式語言就可以在多平台上任遊運行。 這門課程完全適合初學者，無須任何編寫過程式碼經驗，我們將從零基礎開始介紹，編寫程式語言需具備的基礎知識。完全從零開始，初學者無痛上手，將會了解如何使用 Dart 程式語言，由淺入深，快速掌握開發 Flutter 精髓與技巧。幫助您輕鬆快速建立 Flutter 開發基礎，早日順利邁向成為專家級一流開發人才。 網路自學 Flutter 最常見的三大痛 學習資訊東拼西湊，無法有系統很完整性的學習 英文資料看得霧煞煞，一頭霧水 觀念混
Read more »

16天記下7000單字

作者： -
圖片
最近剛好在看7000單字，正不知道怎麼下手來解碼這龐大的一隻害蟲， 在網路上正好看到了這個「800個句子背下7000個單詞」，又名「16天記下7000單字」， 顧名思義一天只要看懂50個句子，16天後就可以看懂800個句子也記下7000個單字。 感覺好像還蠻厲害的。但出處不明，不知那個好心人士分享的，所以我也無法註明出處， 這點到是有點可惜。 相關文章: 16天記下7000單字 傳說中的100句英語可以幫你背7000單詞-公開大解密 傳說中的7000單字由來??? 800個有趣句子幫你記憶7000個單字   1. With my own ears I clearly heard the heart beat of the nuclear bomb. 我親耳清楚地聽到原子彈的心臟的跳動。 2. Next year the bearded bear will bear a dear baby in the rear. 明年，長鬍子的熊將在後方產一頭可愛的小崽。 3. Early I searched through the earth for earthenware so as to research in earthquake. 早先我在泥土中搜尋陶器以研究地震。 4. I learn that learned earnest men earn much by learning. 我得知有學問而認真的人靠學問掙很多錢。 5. She swears to wear the pearls that appear to be pears. 她發誓要戴那些看起來像梨子的珍珠。 6. I nearly fear to tear the tearful girl's test paper. 我幾乎害怕撕那個淚流滿面的女孩的試卷。 7. The bold folk fold up the gold and hold it in hand. 大膽的人們將黃金折疊起來拿在手裡。 8. The customers are accustomed to the disgusting custom. 顧客們習慣了令人討厭的風俗。
Read more »

最新入門零基礎 Java 教學【從零開始學 Java 程式設計】Java教學課程目錄 (IntelliJ IDEA 開發教學)

作者： -
圖片
【從零開始學 Java 程式設計】  線上教學課程目錄 ，使用 Java 程式語言，開發應用程式。 本課程 Java 開發環境：IntelliJ IDEA Community 2019 + Java 8 HKT 講師，相關課程 HKT 講師，相關課程： 🎬 從零開始學 kotlin 程式設計 免費講義 https://bit.ly/2Kx7GrM 🎬 從零開始學 Jetpack Compose 程式設計 https://bit.ly/3JF4SFA 🎬Android 入門開發實戰：口罩地圖(Kotlin) 免費講義 https://bit.ly/2KKZcju 🎬從零開始學 Dart 程式設計 免費講義 https://bit.ly/2OJW6hl 🎬 Flutter 程式設計入門實戰 免費講義 https://bit.ly/37L47Ij 🎬從零開始學 Java 程式設計 免費講義 https://bit.ly/2WlCn6y 🎬 從零開始學 Swift 程式設計 免費講義 https://bit.ly/3ekjsEP 從零開始學 Java 程式設計 學習 Java 程式語言最佳指南，從完全不會到登峰造極 課程說明 想學程式語言，但完全不懂怎麼辦？不知道要從哪一個程式語言開始，KT 強力推薦就從 Java 開始吧！在 2019 年 TIOBE 最新調查，最熱門、最受歡迎程式語言 Java 仍穩穩占據榜首第一名，多年來無人可撼動當今 Java 程式語言霸主地位。這也意謂者最多工作職缺，在 104、1111 和 518 等人力銀行，查詢關鍵字「Java 軟體工程師」皆可以看到，學會 Java 不怕找不到工作，學會 Java 正式跟低薪 22Ｋ說掰掰，我是 HKT，深耕程式教育多年，網紅知名講師，我知道新手、入門學習的痛，讓 KT 親自帶你，手拉手一步一步，邁向人生新的未來，成為未來趨勢科技，最搶手的人才。學會 Java，高薪工作馬上來。 這門課程完全適合初學者，無須任何編寫過程式碼經驗，我們將從零基礎開始介紹，編寫程式語言需具備的基礎知識。完全從零開始，初學者無痛上手，將會了解如何使用 Java 程式語言，由淺入深，快速掌握開發 Java 精髓與技巧。幫助您輕鬆快速建立 Java 開發基礎，早日順利邁向成為專家級一流開發人才。 網路自學 Java 最常見
Read more »