Flutter 的安裝與設定
喜歡作者的文章嗎?馬上按「關注」,當作者發佈新文章時,思書™就會 email 通知您。
思書是公開的寫作平台,創新的多筆名寫作方式,能用不同的筆名探索不同的寫作內容,無限寫作創意,如果您喜歡寫作分享,一定要來試試! 《 加入思書》
思書™是自由寫作平台,本文為作者之個人意見。
給本文個喜歡
或不
關於作者
很久以前就是個「寫程式的」,其實,什麼程式都不熟⋯⋯
就,這會一點點,那會一點點⋯⋯
看看作者的其他文章
看看思書的其他文章
這篇文章 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 版),下載的檔案就放在,然後解壓:
再來就是將 shell 加上 path,讓你不論跑到哪裡都可以找到 Flutter,不要用臨時的方法,請選擇更改 shell rc,我是用 Bash,所以就是改:.bash_profile,在最後加上:
改了後自然要 reload rc,不然就是要重開機:
source $HOME/.bash_profile
然後就可以用
echo $PATH
跟which flutter
確認一下了,沒問題就代表 fluter 裝好了。但是,這只是 flutter SDK,你寫 flutter 總要有工具吧,也會需要其他的開發環境,所以,執行下面這行:
Doctor 就會跟你說,哈哈哈,你還有很多「東西」沒裝。
iOS
如果你不要開發 iOS 就不用裝 Xcode,要裝請到 Mac 的 app store,很慢,而且電腦不能睡著,不然下載就停了......
安裝好了,為了怕有太多版本的 Xcode,要用 command line 確定一下:
其中,
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 專案叫 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,然後再來就要自己摸索一下了,基本上就是看缺什麼改什麼,你大概會碰到以下幾個問題:
目前大概就這樣,但是蘋果跟 Flutter 都一直在改,所以,我想每個人碰到的問題都會不一樣,如果一切順利,Xcode 中按「play」,測試的專案就出現在蘋果的 iOS 裝置上了!
Android 模擬器 / Android Studio
我們將使用 Android Studio 開發 Flutter,所以一定要裝, 照著官網的指示下載安裝,是個超大的東西,1.81GB。安裝過程中:
以為這樣就結束了嗎?沒有!還要再下載 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 了:
執行一下 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 模擬器時,出現上面這個錯誤,請到:
下次啟動 Android 模擬器應該就不會有錯誤了。
用 Android Studio 當 IDE 編輯器
都裝了 Android Studio,那就順便把 IDE 的功能也裝上,也就是可以用它來寫 Flutter 程式,它也是 Flutter 官方建議使用的,這裏也會以它為主要 Flutter 開發工具,沒事不要找事,幹嘛還要再裝再學 Visual Studio Code? 在 Mac 上設定 Android Studio 很簡單:
好了,以後就可以用 Android Studio 來寫 Flutter 了。
Desktop - MacOS
Flutter 的 desktop 版本現在還在 beta 5 中,所以 2.2 版預設是沒有的,如果要產生,就要打開,在 Mac 上當然可以產生 MacOS 的版本,Windows 就當然不行,但是可以產生 Windows 應用程式,好像市場更大,要打開就在 flutter22 的目錄中,執行:
flutter config --enable-macos-desktop
。要測試,就刪掉原來的測試 project,再新增一次,
然後選 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 了。