iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 1
1
Mobile Development

Flutter App 開發實戰系列 第 1

從頭開始一起開發 App [DAY 1]

在今年初剛接觸 Flutter 就有需求需要做跨平台的開發,剛好有機會可以拿來練習,但是因為本人拖延症嚴重,沒有人逼我感覺就會偷懶,希望透過鐵人賽好好矯正自己懶惰拖延的個性,也可以分享自己遇到的問題,因為 Flutter 學習的底子也沒到很扎實,如果有錯誤的地方或是不完整都希望各位大大在下面補充,歡迎大家一起討論,一起學習。也請各位多多督促我發文呀~~

給自己跟大家的一句話

You can’t connect the dots looking forward;
You can only connect them looking backwards.
So you have to trust that dots will somehow connect in your future
- Steve Jobs


環境

  • Mac OS X 10.15
  • Android Studio 3.6
  • Android SDK version 28.0.3
  • Xcode 11.3
  • 我裝的 flutter 版本是 1.17.0 不知道會不會差很多,如果使用上有差很多我再來更新這篇。
    大家可以先裝最新的版本

開始前準備

安裝 flutter

從 flutter 的 github 上拿到 source code

 git clone https://github.com/flutter/flutter.git
 #記一下 clone 下來的路徑我的是 /Users/leo

編輯 bash_profile

vim ~/.bash_profile

新增環境變數一行

#[]取代成自己的路徑
 export PATH="$PATH:[/Users/leo]/flutter/bin"

查看工具鏈上還有哪些需要安裝的

flutter doctor
#有未完成安裝的步驟在照著上面的提示大致上都能完成安裝
#有問題底下留言

編輯器

1.安裝 Android studio 後打開
2.進入 preferences > plugin
https://ithelp.ithome.com.tw/upload/images/20200901/20130127WkwwYrNdfr.png
3.選擇安裝 Flutter plugin .
https://ithelp.ithome.com.tw/upload/images/20200901/20130127OgRMxYwlXr.png
4.選擇安裝 Dart plugin.
https://ithelp.ithome.com.tw/upload/images/20200901/20130127PPD38rEXfp.png

模擬器

Android

透過指令或 Android Studio 開啟新專案

flutter create new_app

Android Studio 開啟 new_app
https://ithelp.ithome.com.tw/upload/images/20200901/20130127PXniuG1acm.png
AVD Manager > Create Virtual Deivce > 選擇裝置/版本 > 完成後執行模擬器
https://ithelp.ithome.com.tw/upload/images/20200901/20130127yB6W6Fuu8y.png
https://ithelp.ithome.com.tw/upload/images/20200901/20130127c1YopFUkup.png
https://ithelp.ithome.com.tw/upload/images/20200901/20130127b9K1Q6VHiY.png
綠色箭頭執行模擬器
https://ithelp.ithome.com.tw/upload/images/20200901/20130127I6yBcZYsRX.png
模擬器開啟後應該會出現對應的選項,案右邊綠色箭頭開始執行app
https://ithelp.ithome.com.tw/upload/images/20200901/20130127gIq5Fldvr9.png
第一次應該會比較慢
如果一直卡在
Running Gradle task 'assembleDebug'...
可以試著重開 IDE 跟模擬器

成功開啟後
https://ithelp.ithome.com.tw/upload/images/20200901/20130127ysUhVqA93b.png

iOS

set up Xcode command line tool

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

 #確定憑證
 sudo xcodebuild -license

 #通過命令打開模擬器
 open -a Simulator

 #模擬器開啟後 查看可用的裝置
 flutter devices
 
 #flutter run -d {deviceId}
 flutter run -d 44F0AC13-F9C3-4BAF-8952-XXXXXX

iOS 成功執行
https://ithelp.ithome.com.tw/upload/images/20200901/20130127LzwUbl4SgL.png

詳細內容可以參考:https://flutter.dev/docs/get-started/install/macos


下一篇
來做個登入畫面吧 [DAY 2]
系列文
Flutter App 開發實戰30

尚未有邦友留言

立即登入留言