Just My Life & My Work

Archive for the ‘Flutter’ Category

[Flutter] Debug 包和 Release 包

由於在整合國際牌的推播套件，搞了一星期遇卡關，iOS 測試沒問題，Android 取得裝置 Token 噴錯，最後發現是 Debug 包和 Release 包的問題，然後大陸工程師 10/1-10/9 假期中⋯⋯剛好趁這時候來徹底角解兩者差異。🥸

絕大部分時刻我都是包 Release 版本，而在上海的夥伴則是包 Debug 版本，在測試時發現兩包有不同反應，後來追問題才曉得套件有 Release/Debug 差異。

flutter build apk --flavor dev --release
flutter build apk --flavor dev --debug

在 Flutter 開發中，Debug 與 Release 版本扮演著不同的角色，開發者需要了解兩者差異，才能在開發與上架流程中正確選擇。

.

Debug 版本主要用於開發與測試。它啟用了 Flutter 的 Hot Reload 與 Hot Restart，讓開發者能快速驗證修改結果。程式碼使用 JIT（Just-In-Time）編譯，啟動較慢、效能較低，但換來靈活的除錯體驗。Debug 版本通常包含完整的日誌輸出、Debug Banner，以及可以透過 DevTools 檢查 widget tree、記憶體與效能。它使用系統提供的 debug key 簽名，因此無法上架商店。

相對地，Release 版本則是提供給最終用戶的正式包。Flutter 在這個模式下會使用 AOT（Ahead-Of-Time）編譯，將 Dart 程式轉換為原生機器碼，大幅提升效能與啟動速度。Release 版本會進行最佳化，例如代碼壓縮與資源精簡，App 體積更小、更流暢。它不支援 Hot Reload，也不允許連接 DevTools，日誌輸出也會受到限制。最重要的是，Release 版本需要使用正式的 keystore 簽名，才能提交到 Google Play。

簡而言之，Debug 版本適合開發與測試，強調靈活性；Release 版本則面向使用者，追求效能與穩定性。開發者必須在不同階段切換模式，才能兼顧效率與品質。

（繼續閱讀…）

分類：

Flutter, 教學

Tagged with:

[Flutter] iOS CICD 流程

原本 App Team 包含我僅有兩位開發者，我負責領導開發忙得不可開交。去年 Q4，親自招募兩位新人進駐，我終於可以有空閒時間做 Flutter App 的 CICD。🙂

2019 年在港商工作時，已有建置 iOS CICD 流程經驗，所以首選 Jenkins 來作為持續整合工具，節省研究時間，稍微比較其他工具後，認為 Jenkins 相關套件外掛多，未來有需有可以擴充。另因 Jenkins 有直覺的操作介面，使得無論是工程人員或是團隊其他成員，都能迅速上手。

註：

  • CI（Continuous Integration，持續整合）
  • CD（Continuous Delivery / Continuous Deployment，持續交付 / 持續部署）

簡單比喻

  • CI：像是每次寫完一小段文章就馬上拼到全文裡，再跑拼字檢查。
  • CD：檢查通過後，自動把這篇文章印刷出版（交付）或直接送到讀者家（部署）。

我將 Shell Scrip 流程圖解如下：

.

（繼續閱讀…）

分類：

Flutter, 教學

Tagged with:

[Flutter] Package 與 Plugin

平常寫 Flutter App，我都會稱第三方套件為 Package，隱約曉得 Package 又可細分有無跟平台相依的套件。後來去了解後，才知道原來是有區分為 Package 與 Plugin。

翻成中文：

  • Package：套件
  • Plugin：外掛

.

（繼續閱讀…）

分類：

Flutter, 教學

Tagged with:

Flutter 例外處理

透過 Flutter 框架開發的 App (含 iOS 與 Android) 已經上線，開始要追蹤用戶使用時，是否有發生不預期的狀況。

如同開發原生 iOS App 那樣，我將 Firebase Crashlytics 導入 Flutter App 中，一旦有任何崩潰、例外狀況，就會被記錄且上傳到 Firebase，讓我每天能明確掌握 App 使用狀況，並在適當時機修正並釋出新版本。🙃

這是我開啟記錄「例外」事件功能後，在 Firebase 上所搜集統計的資料。在沒有開啟此功能前是一片祥和，幾乎沒有「崩潰」事件。然而我為了優化 App 各種不預期的使用狀況，便有需要去了解會有哪些「例外」事件。🤔

（繼續閱讀…）

分類：

Flutter, 教學

Tagged with:

[Flutter] 本機 WebView 載入網頁檔案並與 App 互動

網頁已有的功能，想要完整移植到 App，可以怎麼做呢？刻一個原生的，會是個較佳的選項，因為使用者體驗可以很棒！然而就是得花時間去實現。🤪

我們想到可以在 App 載入網頁檔案，省去從頭刻畫面的時間，再來實現 WebView 與 App 互動的部分。

（繼續閱讀…）

分類：

Flutter, 教學

Tagged with:

[Flutter] 問號纇運算符

善用運算符號，可以減少寫些程式碼。在使用之前，必須了解它是怎麼運作，之後就能得心應手囉～

我目前只會 IF ELSE 來使用問號運算符，趁這時候多學點語法糖，讓我可少寫幾行程式碼，也可達到些成就感。🙃

Flutter 是以 Dart 程式語言來運行，線上可以直接測試程式碼：https://dartpad.dartlang.org/

（繼續閱讀…）

分類：

Flutter, 教學

Tagged with:

[圖解] 學習 Flutter 路線圖 (Learn Flutter Roadmap)

最近公司採用 Flutter 框架來開發 iOS Android App，所以有必要做全面性的學習。

看到這一張學習 Flutter 路線圖 (Flutter Roadmap)，讓我十萬分興奮，因為我想要全部都學習！🤪

不過時間有限，想必得有策略式地逐步學習，進而掌握最關鍵且最實用的開發技術。

（繼續閱讀…）

分類：

ChatGPT, Flutter, 教學

Tagged with:

[Flutter] RefreshIndicator class

使用 App 瀏覽資訊，很常會遇到可以往下捲的畫面，此時若一直往下拉到頂，上頭通常會出現重整動畫，經過一小段時間，畫面就會更新。😀

在 Flutter 中有已被定義好的 Widget，我們能夠輕易實現此友善的體驗，看起來效果挺棒的。

（繼續閱讀…）

分類：

Flutter, 教學

Tagged with:

[Flutter] HttpClient

現在手機主要功能就是拿來上網，所以任何 App 基本上都會需要透過網路存取資料，此時 Flutter 可以怎麼操作呢？使用內建 io package 就可搞定！🙃

我特地寫一個近年來很夯的比特幣查價系統，可以隨時查看多家交易平台上比特幣的實價，也許還可以進一步變成「搬磚」工具！

只要點擊藍色按鈕，就能即時取得多家交易所比特幣的實價。

（繼續閱讀…）

分類：

Flutter, 教學

Tagged with:

[Flutter] pdf package

接續上一篇 pdf package 教學文章，已經加入文字，現在我想繼續加入圖片，可以怎麼做呢？🤔

先來看一下顯示截圖～

（繼續閱讀…）

分類：

Flutter, 教學

Tagged with:

標籤雲