Flutter 的安裝與設定

紅寶鐵軌客
Join to follow...
Follow/Unfollow Writer: 紅寶鐵軌客
By following, you’ll receive notifications when this author publishes new articles.
Don't wait! Sign up to follow this writer.
WriterShelf is a privacy-oriented writing platform. Unleash the power of your voice. It's free!
Sign up. Join WriterShelf now! Already a member. Login to WriterShelf.
寫程式中、折磨中、享受中 ......
921   0  
·
2021/06/02
·
8 mins read


這篇文章 2021/5 月寫的,此時 Flutter 是 2.2.0 版,使用的是 Mac,OS 是 11.4。

Flutter SDK

Flutter 版本隨著時間自然後一直往前,所以安裝還是要依照官方的程序為準,以下是官方網址:

Install: Install Flutter and get started. Downloads available for Windows, macOS, Linux, and Chrome OS operating systems.

不過,就算是有新的版本,基本上的安裝程序不會有太大的改變,所以這篇文章應該還是很好的參考,我的建議是同時打開官網跟這篇文章,兩邊一起參考比對向前行。

Windows、Mac 等不同的開發平台系統都有它的開發限制,例如 Windows 上不能開發 iOS 手機,不過應該沒差,反正現在就是要學會 Flutter 而已。

下載 Flutter SDK 很花時間,我是習慣把下載的檔案都放在一起,就在自己 user 下開個 flutter22 目錄(因為是 2.2 版),下載的檔案就放在,然後解壓:

unzip flutter_macos_2.2.0-stable.zip

再來就是將 shell 加上 path,讓你不論跑到哪裡都可以找到 Flutter,不要用臨時的方法,請選擇更改 shell rc,我是用 Bash,所以就是改:.bash_profile,在最後加上:

export PATH="$PATH:/Users/[your user name]/flutter22/flutter/bin"

改了後自然要 reload rc,不然就是要重開機:

source $HOME/.bash_profile

然後就可以用 echo $PATHwhich flutter 確認一下了,沒問題就代表 fluter 裝好了。

但是,這只是 flutter SDK,你寫 flutter 總要有工具吧,也會需要其他的開發環境,所以,執行下面這行:

flutter doctor

Doctor 就會跟你說,哈哈哈,你還有很多「東西」沒裝。


iOS 

如果你不要開發 iOS 就不用裝 Xcode,要裝請到 Mac 的 app store,很慢,而且電腦不能睡著,不然下載就停了......

安裝好了,為了怕有太多版本的 Xcode,要用 command line 確定一下:

$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
$ sudo xcodebuild -runFirstLaunch

其中,xcode-select 是選擇 xcode 的版本的,後面是你要選擇的 xcode 版本所在位置;xcodebuild -runFirstLaunch 是指令列用來接受其他所需要的 xcode 元件,很無聊,其實一般來說,只要打開 xcode 就可以了,如果你堅持就是不要先執行 xcode,那你還要用 sudo xcodebuild -license 來接受授權,哎,話說,有必要那麼堅持、那麼懶嗎?!

iOS simulator 模擬器

Xcode 裝好了就有模擬器了,按下 command+space,打 Simulator 就會看到,點開就可以用了,如果不要預設的蘋果裝置,就在 File>New 選個新的,比較要注意的是要選 iPhone 5s 以上,因為才是 64 位元(誰還會選 5s 以下啊?iPhone 6 都不支援了),還有 Window> 下面有幾個選項,Physical Szie,Pixel Accurate,Point Accurate,玩玩看,這會設定模擬器的螢幕,很方便,當然,模擬器的螢幕也可以拉動的。

再來當然就是要試試模擬器了,很簡單,就建立一個新的 Flutter 專案,也就是 project,跑跑看,超級簡單,在 flutter22 目錄:

flutter create my_app
cd my_app
flutter run

第一行就是建立一個新的 Flutter 專案叫 my_app,新專案是存在 my_app 目錄中,所以要 cd 進去,然後再呼叫 Flutter 跑 run,就是執行啦,就這樣,你就可以看到下面這個畫面在模擬器上出現了。如果沒看到,或是出現錯誤,你就要自己上網查了,不要覺得難過,這其實是很好的學習。

第一次執行很慢,我的電腦跑了六分鐘才出來,以後會快一些,而且可以用 r 來 hot reload,結束就按 q 就出來了。

直接在 iOS 裝置上執行

如果你有 iOS 裝置,例如蘋果牌手機,你的 Flutter 就能直接在這個蘋果 iOS 裝置上跑,這叫 deploy,需要做下面的動作:

先要安裝 cocoapods: 在 flutter22 目錄執行 sudo gem install cocoapods,cocoapods 就是一個 iOS 的套件管理器,現在的開發平台都有很棒的套件分享,flutter 有幾萬個,你不可能不用啦,當然如果你很皮,很頑固,也確定不會用,那就不要裝,至於 flutter 有那些套件,可以到 pub.dev 來聞香一下。

接下來就要用 Xcode 來 deploy 了,我們就用之前的 my_app 來 deploy,你可以用 Xcode 打開 my_app,也可以在 flutter22/my_app 目錄中執行 open ios/Runner.xcworkspace,效果一樣。

選左邊的 runner,然後再來就要自己摸索一下了,基本上就是看缺什麼改什麼,你大概會碰到以下幾個問題:

  • 每一個 app 一定要有開發團隊設定,這可以在 Signing & Capabilities > Team 設定,
  • Bundle Identifier 的名稱一定要 unique(=與眾不同),
  • 你的 Mac 跟 iOS 要 Trust 雙方,要在裝置管理同意,
  • 蘋果 iOS 14 版以後,不能直接在 iOS 上執行你開發中的程式了,要在 Mac Xcode 中按「run」。

目前大概就這樣,但是蘋果跟 Flutter 都一直在改,所以,我想每個人碰到的問題都會不一樣,如果一切順利,Xcode 中按「play」,測試的專案就出現在蘋果的 iOS 裝置上了!


Android 模擬器 / Android Studio

我們將使用 Android Studio 開發 Flutter,所以一定要裝, 照著官網的指示下載安裝,是個超大的東西,1.81GB。安裝過程中:

  1. import android studio setting 不知道就選不用,
  2. install type: 不知道就選 standard,
  3. UI theme: 我是選我最愛黑黑的吸血鬼 Darcula,你自己選你愛的。


以為這樣就結束了嗎?沒有!還要再下載 1.6GB 的東東,我用固網都花了四個小時,所以,不要耍帥,不要出外時安裝!

如果你要開發 Android 裝置,再下來就是要設定裝置,有 Android 的機器就連上,不管有沒有 Android 機器都可以使用 Android emulator 模擬器:

先要將虛擬機 VM 加速 acceleration 打開,因為在 Mac OS X v10.10 後,基本上 VM 就是使用內建的 Hypervisor,所以通常已經有了,可以用下面的指令來確定是不是已經有 VM 了,注意:下面有底線部分是 Android sdk 的位置,要改到你的位置(正確位置可以到 Android Studio > Preferences 中搜尋 ‘sdk’) :

./Users/[your user name]/Library/Android/sdk/emulator/emulator -accel-check

如果看到 Hypervisor.Framework OS X Version xxx accel 就代表已經有在使用 Mac 內建的 Hypervisor VM 了。

再來就是要設定 Android Studio 了:

  1. 打開它,點右下角的 config,
  2. 選 AVD Manager icon > Create Virtual Device,選你想要模擬的裝置,
  3. 然後再「下載」你想要模擬的作業系統,哎,又是 1.x GB = 又要等很久,
  4. 下載完後,如果可以就選硬體加速,但是我安裝的不能選,設定就是自動。
  5. 然後點結束 Finish,就完成了。

執行一下 Flutter doctor,應該就只剩下一堆 Android license 沒同意,執行:

flutter doctor --android-licenses

把他們都 say 'y'!

完成後,可以點選 Android Virtual Device Manager 的 Run (就是那個 Play)你就可以看到模擬器了。(開機好慢啊)

Android 模擬器第一次用的時候非常的慢,Loading 很大,Mac 的風扇都會全速運轉,它應該還在下載及設定很多東西,不要急,就讓它慢慢地跑,大約半個小時後,風扇聲會變小,就代表已經裝好了,這時你在使用它反應就會快多了,然後再長按關機,將系統存入,下一次開機就會快多了,不過,它常常三不五時又卡住了,相對 iPhone 模擬器就穩定多了。

出現 AVD manager - Unable to locate adb

如果你再啟動 Android 模擬器時,出現上面這個錯誤,請到:

  1. File -> Project Structure -> Project Settings -> Project,這時應該是設定為:[No SDK] 
  2. 選一個你要的 SDK。

下次啟動 Android 模擬器應該就不會有錯誤了。


用 Android Studio 當 IDE 編輯器

都裝了 Android Studio,那就順便把 IDE 的功能也裝上,也就是可以用它來寫 Flutter 程式,它也是 Flutter 官方建議使用的,這裏也會以它為主要 Flutter 開發工具,沒事不要找事,幹嘛還要再裝再學 Visual Studio Code? 在 Mac 上設定 Android Studio 很簡單:

  1. 打開 Android Studio,在 Preferences > Plugins 安裝 install Flutter,
  2. 照著指示走,會要求安裝 Dart,然後重開機就好了。

好了,以後就可以用 Android Studio 來寫 Flutter 了。


Desktop - MacOS 

Flutter 的 desktop 版本現在還在 beta 5 中,所以 2.2 版預設是沒有的,如果要產生,就要打開,在 Mac 上當然可以產生 MacOS 的版本,Windows 就當然不行,但是可以產生 Windows 應用程式,好像市場更大,要打開就在 flutter22 的目錄中,執行:flutter config --enable-macos-desktop

要測試,就刪掉原來的測試 project,再新增一次,

flutter create my_app
cd my_app
flutter run 

然後選 MacOS(或是 flutter run -d macos,就直接出來),我覺得很棒,我喜歡,可惜的事 Mac 就只能產生 Mac app,不能一次把 Windows 及 Linux 都生出來。

比較特別的是,Windows UWP 是分開的,flutter config --enable-windows-uwp-desktop,不過 Flutter 在這還在 Alpha 階段,對初學的人來說,不急。


Web 

這不用設定,本來就有,執行 flutter run,選瀏覽器就好(chrome)。好像預設都是使用 chrome,不過在 safari 或其他瀏覽器上,http://localhost:49466 一樣也行!


安裝完成

恭喜安裝完成,應該已經花了很多時間,最少一天吧,不過辛苦是有回報的,終於可以開始學習開發 Flutter 2.x 了。





WriterShelf™ is a unique multiple pen name blogging and forum platform. Protect relationships and your privacy. Take your writing in new directions. ** Join WriterShelf**
WriterShelf™ is an open writing platform. The views, information and opinions in this article are those of the author.


Article info

This article is part of:
Categories:
Date:
Published: 2021/06/02 - Updated: 2022/01/23
Total: 2365 words


Share this article:
About the Author

很久以前就是個「寫程式的」,其實,什麼程式都不熟⋯⋯
就,這會一點點,那會一點點⋯⋯




Join the discussion now!
Don't wait! Sign up to join the discussion.
WriterShelf is a privacy-oriented writing platform. Unleash the power of your voice. It's free!
Sign up. Join WriterShelf now! Already a member. Login to WriterShelf.