Skip to content

[Flutter] 下載、安裝 Intellij IDEA IDE 來開發 Flutter 專案

Last Updated on 2021-05-12 by Clay

應該每個會寫程式的人都曾經想過寫出一個手機的 App 吧,當然,我也不例外。曾經我嘗試寫過 Unity 的小遊戲、Android Studio 上使用 Java 來寫發票辨識兌獎、甚至曾經拿自己僅有的 Ipad 來克難地練習寫 Swift。

在那之後,在朋友的推薦下,我一直想學習 Flutter 的。

Flutter 是由 Google 開發且開源的 App 開發套件,最大的優點便是它可以以一套程式碼便完成 Android 以及 iOS 兩邊平台 App 的開發。以前我曾經試過使用 Unity 來完成這樣的 App (Unity 也可以一套程式碼在兩個平台上發布)。但由於 Unity 的程式是逐幀渲染的,意味著即使畫面沒有產生變化依然是每幀都在使裝置的硬體運行,效能上來講並不適合開發工具型的 App,還是適合開發遊戲一點。

所以目前來看,可能還是 Flutter 比較適合開發行動裝置上工具型的 App。更厲害的是,Flutter 號稱效能跟原生開發相比並沒有太大的差別,這真的相當厲害。

話題扯遠了。

總之今天紀錄該怎麼配置好 Intellij IDEA 這個 IDE。一來我並不是那麼喜歡 Android Studio,二來這個 IDE 的大小也比較輕量。

以下大概分成幾個步驟,事先聲明,我這是在 Windows 上的配置,目前還沒在 Linux 的系統上測試:

  • 下載 Intellij IDEA
  • 安裝 Flutter、Dart Plugins
  • 建立 Flutter 專案
  • 安裝 Flutter SDK
  • 配置虛擬機器
  • 測試 Flutter 是否能編譯通過

更多學習的內容,也許可以直接參考官方的 Tutorial: https://flutter.dev/docs/reference/tutorials


下載 Intellij IDEA

這個方便的 IDE 同樣是由 JetBrains 開發的,跟開發 PyCharm、Android Studio 同一家公司。

首先我們來到以下網址下載: https://www.jetbrains.com/idea/

按下 Download。

先選擇一般版即可,點擊後開始下載。

下載好後雙擊執行,會看到以下視窗。

一路全部都選擇 Next,就會自動安裝好了。 我們可以在開始選單看到 Intellij IDEA。

開啟後長得像這樣:

我是一律都選黑色的主題,半夜寫程式時明顯比較不吃力。

進到這個畫面的時候先別急著創 New Project,我們先來把 Flutter 等等的套件裝好吧!(當然,先開始沒有關係,畢竟進去之後還可以安裝。)

選擇 Configure -> Plugins,跳出以下畫面:

這裡紀錄一下我遇到的一個坑:我一開始打開這裡的時候一直沒有辦法顯示可以下載安裝的套件,後來才注意到是 Windows 的防火牆擋住了。記得注意右下角,應該有可以開啟的選項,如果沒有,也可以開啟專案後再進去看。

最不濟,也可以自己選擇打開防火牆。

如果你很順利就看到了,那非常恭喜!我們可以直接往下一步前進了。


安裝 Flutter

這其實沒有什麼好說的。

大致上就是這樣,搜尋 "Flutter",然後下載。現在的話,其實是連 Dart 都會一起裝的。


安裝 Dart

若是你還沒有裝 Dart,也可以一樣搜尋 "Dart",然後下載安裝。

如果 IDE 已經幫你裝了,那現在就可以點選 Restart IDE 重新啟動 IDE 了。


建立 Flutter 專案

重新啟動之後,我們來建立一個專屬於 Flutter 的專案。

選擇 Create New Project。

首先選擇左側 Flutter 選項,然後至右側下載 Flutter 的 SDK,選擇喜歡的位置存放。這一步下載的動作可能比較久,要有點耐心。

這裡要輸入 Project 名稱,名稱只接受小寫且用底線隔開詞。底下可以輸入公司/組織 產品名。完成之後直接按 Finish。


配置虛擬機器

一打開專案,其實我就有虛擬機在上方,不知道跟我從前寫過 Android Studio 有沒有關係。若是沒有裝置的話,就新增一個裝置。


測試 Flutter 是否能編譯通過

當前專案應該會有測試的程式碼,直接使用 Shift+F10 開始執行。

若是編譯成功,應該會跳出模擬手機的畫面。

按按看右下方的按鈕,看看會不會增加畫面正中央的數字吧!

如果測試沒有問題,那恭喜你!接下來我們可以開始練習 Flutter 了。

Leave a Reply取消回覆

Exit mobile version