iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 1
0

嗨大家好我是Jerry,是一個工作剛滿一年的網頁前端工程師,這次主要要跳坑寫Flutter的主要原因,是因為我一直很想寫APP,但React Native常常編譯報錯以及Weex文件不完整等等問題,讓我想要試試看Google推出的這個Flutter,然後又看了這部影片:
Yes

講師Maximilian比較了許多面向

  1. 只寫一次就適應Android和iOs
  2. 很多預設樣式可以使用
  3. 有無廣大生態系
  4. 使用人數
  5. 效能
  6. 是否可以使用原生裝置
  7. 目前使用於產品的數量

結論可以點影片進去了解,看完這部影片後,就發現Udemy出現這部課程Learn Flutter & Dart to Build iOS & Android Apps,我便腦波很弱的刷了下去,開始了Flutter的探索之路。

安裝環境

我個人在Windows和Mac都有安裝成功過,主要的邏輯就是

  1. 去flutter官網下載壓縮包下來解壓縮
  2. 把你系統環境變數指向該目錄的bin資料夾
  3. 下載Android Studio去產生AVD (虛擬的手機)
  4. 下載Xcode去產生虛擬手機(僅Mac)
  5. 跑指令去把初始檔案clone下來
  6. 開始寫扣!

我就模擬一次Mac的安裝過程

  1. 進入官網,按下install on mac
    https://ithelp.ithome.com.tw/upload/images/20181001/20111840MOeHpkqsT6.png

  2. 大力按下去,下載到你想存的資料夾
    https://ithelp.ithome.com.tw/upload/images/20181001/20111840AgXA6BhimH.png

  3. 在Terminal中設定環境變數

export PATH=`你剛剛下載的位置`/flutter/bin:$PATH
  1. 跑跑看是否成功
flutter doctor
  1. 如果是使用bash_profile來設定環境變數的,可以參考這篇
    ED's Notes:Mac OS X 如何更改系統路徑與環境變數
    (謝謝原文作者的分享,讓我解決此問題)

  2. 安裝Xcode(進入APP store)
    https://ithelp.ithome.com.tw/upload/images/20181001/20111840lA3x8N18JV.png

  3. 若安裝完後不能使用Xcode的指令,就可能要設定的license

sudo xcodebuild -license

當然是同意再同意囉

  1. 打開虛擬手機
open -a Simulator

註:Simulator的Hardware選項可以選擇手機型號

  1. 選擇一個資料夾當你的工作資料夾,並在此資料夾下此指令
flutter create 你的APP名稱

10.下載完後,在此你的APP名稱的資料夾下指令

flutter run
  1. 模擬器就直接出現預設的計數器APP啦
    https://ithelp.ithome.com.tw/upload/images/20181001/20111840B6LuQcTns9.png

  2. 準備Android開發環境,進入Android Studio官網,按下下載
    https://d1dwq032kyr03c.cloudfront.net/upload/images/20181001/20111840Vct0w5hBvo.png

  3. 安裝開始時會出現應用程式權限設定的問題,就去系統偏好設定允許一下就好

  4. 安裝過程選擇客製化,並選取Android Virtual Device

  5. 安裝完後,使用Android Studio開啟你剛剛的工作資料夾(你的APP名稱那個)

  6. 他會要你裝Flutter套件,就裝吧

  7. 然後會要你更新SDK,就更新吧

  8. 若出現此問題

Failed to install the following Android SDK packages as some licences have not been accepted.

記得安裝以下套件
https://ithelp.ithome.com.tw/upload/images/20181001/20111840zDk7v4uOi1.png

  1. 打開tools > AVD manager
  2. 左下角可以新增虛擬裝置,列表中的三角形可以運行該虛擬裝置
  3. 回到你的工作資料夾,下指令
flutter run
  1. 若開啟了iOs模擬器跟Android的,他會要你指定device ID,若只開Android的,就會編譯Android程式
  2. 完成
    https://ithelp.ithome.com.tw/upload/images/20181001/20111840aVQLizaZFk.png

下一篇
關於組件
系列文
使用flutter建構Android和iOs APP25

尚未有邦友留言

立即登入留言