如何在Mac建立Flutter開發環境

-
這篇是以Mac搭配以Android Studio做為開發環境的說明文章

1.到官方Flutter SDK下載SDK
下載後預設會是在~/Download底下

下載後的sdk是一個zip檔，所以先建立一個要放置Flutter sdk資料夾，假設在「我的文件」下建立一個名為「sdk」的資料夾

接著切換到sdk目錄底下
指令：
 cd ~/Documents/sdk 

2.解壓縮
假設從官網下載的版本為: flutter_macos_v1.7.8+hotfix.4-stable.zip

指令:
 unzip ~/Downloads/flutter_macos_v1.7.8+hotfix.4-stable.zip 

此時會開始進行解壓縮...

於是在sdk資料夾就會出現解壓縮後的Flutter SDK
3.加入環境變數
開啟設定檔
指令:
如果你是用bash：   
 vi ~/.bash_profile 

如果你是用zsh： 
 vi ~/.zshrc 

在設定檔內填入下列路徑
 export PATH="$PATH:/Users/使用者名稱/Documents/sdk/flutter/bin" 

重新讀入設定檔，如果是用bash： 
 source ~/.bash_profile 

重新讀入設定檔，如果是用zsh： 
 source ~/.zshrc 

於是Flutter的sdk就已經建立好了


4.在Android studio加入Flutter Plugin
a.打開偏好設定(Preference)，可以從工具列的「IntelliJ IDEA/Preference」或是直接按下「command + ,」
b.搜尋「plugin」，找到「Flutter」，按下「install」
接下來會提醒你也要安裝Dart語言的外掛，按下Yes
安裝完後會要求重啟Android Studio。重啟之後進入「Preference」設定Flutter SDK的路徑
將路徑設定為原本放置sdk的路徑，例如: ~/Document/sdk/flutter

如果路徑指定正確的話，也會同時顯示Flutter的版本

設定Dart SDK的路徑
一樣是在「Languages & Frameworks」的項目下，找到Dart，將路徑設定為Flutter SDK目錄下的bin/cache/dart-sdk
例如：~/Documents/sdk/flutter/bin/cache/dart-sdk

檢查還缺哪些未完成安裝的項目
指令：
 flutter doctor 



這個時候你會發現，有驚嘆號的地方就是還沒有完成的部份，要一一要去解決它。
像是 Android toolchain - Some Android licenses not accepted. 就有提示你該使用指令：
 flutter doctor --android-licenses 

接下來會出現要你同意，就按下y 的條款

通通都按y之後，就可以了

還有一個地方也出現了驚嘆號 Xcode - CocoaPods not installed.
也是依照提示輸入指令
 sudo gem install cocoapods 

下載相關的套件安裝中


 如此就可以進行Flutter的開發了

參考資料:

留言

張貼留言

這個網誌中的熱門文章

ISO 27001 LA 主導稽核員 考照心得

-
圖片
由於資安事件層出不窮，資訊安全日益受到重視，然而資訊安全的層面非常的廣，除了程式開發端、伺服器端，實體資訊工作環境也是需要被防護的一環。 ISO 27001是針對ISMS (Information Security Management System)制定的標準，也是列在行政院資通安全專業證照名單內的其中一張證照。 目前許多的大企業大多有在落實ISO 27001的合規環境，除了寫程式的人常常會被稽核之外，身為App開發人員的我，也想找個時間來了解ISO 27001的規範，就算目前還沒有要當稽核員，對於資訊安全的觀念也會更加全面。 報名 網路上查都有滿多這門課的報名管道，自行選擇喜歡的機構，以及打聽一下上課的地點，有些是在高級的飯店上課，環境、伙食就會都不錯。雖然通過拿到證照才是重點，但同樣都要花這筆大錢了，當然選間上課環境更舒服的地方也會比較開心一點 🤣。 費用 平日：50000、假日班：39900 這次我是自費去上課考照的，由於沒有公司的補助，所以是選擇費用比較便宜一些的假日班去上課。 上課之前 在正式上課之前，上課的機構會先寄一份課前資安調查的題目，要求先做一份對於資訊安全的了解程度的線上測驗。雖然是說分數不達標準就無法參加此課程，但其實題目也不難，大多都是靠想像的就可以選得到正確的選項。題目都是選擇題多選，而且不是我們傳統認為的全部選擇都答對才得分，而是有勾選到正確的選項都會有得到一些分數，所以只要勾選多一點的選項就可以通過了。 開始上課 分組 到了正式上課的第一天，首先會先分組，然後成員的自我介紹。而我們這組有人來自公部門，也有人本身就是PM，也有網管，也有工程師。 老師為了讓同隊的組員有更加深認識組員的機會，用輪流介紹另一位組員的方式進行，也就是A介紹B讓大家認識、B介紹C讓大家認識、C介紹A讓大家認識。 於是就有聽到其中有一組是相關稽核背景的，實力就相當堅強。 上課 課程主要圍繞在ISO 27001:2013的條文，其中包含了「本文」與「附錄A」。 如果你也是跟我一樣是第一次接觸這個領域，一定會有很多都不太懂的地方，上課就要更專心聽，老師會針對條文中的名詞定義，加上稽核實務的對應到的條文加以比對說明。 例如：你是稽核員，當你到了受稽方現場，看到程式碼是公司裡的任何人都可以自由存取，請問不符合哪些條款? 這個時候就要去翻條文，本文跟附錄A都可以找，發現與
閱讀內容 »

如何實作從API抓取資料顯示在列表頁(ListView)上

-
圖片
透過API取得資料顯示在App畫面，資料由後端的資料庫統一管理更新內容，確保使用者每次開啟App能夠看到最新的資料，並且將資料以列表的方式呈現在App上是很常見的設計，所以一直都有在想要寫實作這種功能的文章。 剛好最近很幸運能夠擔任 Girls in Tech 與 CodePath 合辦的 Android 8週 bootcamp 的其中一位講者，CodePath要求學員要繳交的其中一份作業剛好也是必須要實作出這些功能，就借花獻佛的整理一些內容成為一篇教學文章。 實作結果如下圖： 這篇教學將說明要實作下列幾項功能： 使用3rd-Party Library: 網路連線、讀取/顯示圖片、解析JSON ListView：自訂Adapter、顯示不同類型的item API回傳的JSON內容顯示到列表裡 一、使用3rd-Party Library 專精於某項功能的第三方Library開發團隊，大部份的情況會比獨自一個工程師在實作上考慮到更多的面向，像是網路連線時會有許多的錯誤判斷處理。加上開發的時程有限，建議如果像是網路連線及讀取顯示圖片這種屬於App基礎建設的部份，可以使用第三方的Library就好。 但若是客制化的UI元件如果在開發時程內來得及的話則不太建議使用第三方Library，原因是UI視覺的東西很容易在客戶看過之後希望工程師能再修改調整，使用別人的Library不是自己撰寫的程式內容有可能會比從頭刻元件還要花更多的時間。 1.解析JSON 這邊使用的是Google推出 用來方便建立與解析JSON格式的 Java Library: Gson 。雖然就算沒有使用Gson也是可以自行使用 getJSONObject、getJSONArray如同剝洋蔥一層一層慢慢解析，但如果API的設計非常複雜的時候，一層一層慢慢解析就會變得相當費工，使用Gson則是可以更方便用「點」的方式進入一層一層的解析出JSON裡的值。 a.首先在Gradle裡面加上 dependencies { compile ' com.google.code.gson:gson:2.6.2 ' } b.透過API回傳的Json格式定義資料模型的class 假設我們有個api回傳的JSON如下： 我們觀察這個JSON可以看到，是包
閱讀內容 »

Android如何實作強制App版本更新

-
App上架了一段時間，透過Google Play Console常常會發現有不少的使用者仍然一直停留在舊版本不更新，雖然Android預設會自動更新用戶安裝的App版本，但也是會有使用者把自動更新的功能關閉，如此便會造成App加了新功能用戶無法體驗到或是當初沒考慮到的漏洞沒辦法補起來，基於此，強烈建議App在規劃的初期就要把「強制使用者更新App」的功能實作之後才上架。 實作的方式不難，大致上依照以下幾個流程即可達成： App開啟時檢查版本與Google Play上的版本是否一致 如果不一致就彈出對話框讓使用者執行前往該App的Google Play連結 限制使用者企圖操作不進行版本更新的行為 本例以Volley實作，所以在Callback的部份加上判斷版本是否相符的程式碼： StringRequest appVersion = BaseApi.appVersion(new ResponseListener() { @Override public void onError(VolleyError error) { super.onError(error); intoNextPage(); //有可能網路出錯但仍需讓使用者可以進入下一個頁面 } @Override public void onResponse(String str) { super.onResponse(str); Pattern pattern = Pattern.compile("\"softwareVersion\"\\W*([\\d\\.]+)"); Matcher matcher = pattern.matcher(str); if (matcher.find()) { if (!ValueUtility.getCurrentVersionName().equals(matcher.group(1))) { newVersionDialog.show(); } else {
閱讀內容 »