如前文所述,Flutter 有四種 Navigation & Routing 的方式:
我們已經學過了「N1/直接導航法」,這種直接導航的方式,說直白的,就是把要去的 screen 包成一個 Route,好處是很直接,小缺點是如果...
Flutter 網站上線了!本文完整的介紹怎麼使用 Firebase 的免費網站託管,及 Flutter web 兩種優化要如何做選擇,還介紹了發佈錯誤怎麼「倒帶」,是真實的 App 專案發佈,不是又一篇「舉例」。
使用 responsive_framework 套件開發 Flutter Responsive 響應式 UX
這篇一萬多字,我花了很多時間來寫,主要是希望能簡單易懂的介紹新版 Flutter_bloc 8.0 的用法,當然也介紹了 DI 依賴注入,使用 GetX 來管理,不只理論,更著重實務應用技巧。
深入 CustomPaint(),導入多工 isolate() 計算複雜的波形資料,優化使用者體驗,正面對決巨量繪圖的挑戰
這篇詳細的說明 Hive 的安裝、設定與起始方法,包含會遇到的問題,我們用 Hive 來儲存使用者喜好,也順便示範 Hive 的基本用法。
「快樂錄音機 App」一路從零開始開發,目前到 0.6 版,已經可以錄音、播放、存檔與使用資料庫紀錄了,為了讓讀者能更好的比對自己開發的結果,我把剛剛使用 BLoC 來做的播放音 refactor 部分做成了一個 GIF 動畫,可惜 GIF 沒...
完整又詳細的介紹怎麼產生 Flutter App 的 aab,這是上架 Google Play 的必須,整個流程一點都不簡單,花了好多時間終於都弄清楚了,相信本文能幫助很多人,一次上架就成功。
「快樂錄音機」現在可以將錄音檔的波形顯示出來了,而且還可以放大進去看。 使用 Flutter CustomPaint 及多工的 isolate 的 compute() 開發,下面是在 iPad 模擬器上執行的動畫:
這篇文章 2021/5 月寫的,此時 Flutter 是 2.2.0 版,使用的是 Mac,OS 是 11.4。 Flutter SDK Flutter 版本隨著時間自然後一直往前,所以安裝還是要依照官方的程序為準,以下是官方網址: In...
有了 App 的 aab 後,就可以上架 Google Play 了,本文詳細的介紹了上架的流程,並提供清楚的操作指引與截圖,上架一點都不難了。
「快樂錄音機」除了可以錄放音外,現在也可以將音檔存取在 Google 硬碟中了,透過 Google 硬碟,「快樂錄音機」也可以分享錄音檔了。 這是使用 Google Drive API v3 所開發的下載分享音檔功能動畫:
這是使用 G...
通常一個 App 都會有很多個畫面,在 Flutter 中,大家好像都是用「Screen」來稱呼「畫面」,所以我們以後也統一就叫「Screen」了。 繼續我們的「happy recorder 快樂錄音機」開發,在使用者的情境中,這個 App ...
使用 introduction_screen 套件來開發「開機簡介畫面」不難,但是要做到:使用者可以關掉也可以打開,啟動後倒退也不會再出現,還要有 /intro 網址,這可就有些難度了;本文還對 Assets 做了一些深度介紹。
我們才剛開始寫 Flutter,只有兩個基本上空空的畫面 Screens,可是光是這樣,main.dart 裏面就已經有 120 行了,如果再繼續寫下去,很快就會有幾千行的程式碼,程式碼太長是很麻煩的,想想看,你要修改的程式內容一個在頭、一個在...
播音部分改用 BLoC v7.3.0 開發的完整程式碼
如果你照著我之前寫的安裝程式,你的 Android Studio 跟 Flutter 2 SDK 應該都已經裝好了,所以我們現在就可以開始寫 Flutter 了。 寫程式前有一個很重要的建議,就是剛開始學習時,當然可以照著書寫,但是要真學會,...
Flutter 2.2 多國語言及切換程式碼範例。
很多 App 都需要支援多國語言,如果是,開發階段一定要儘早寫入,不然以後加入會改到吐血。本文深入淺出的介紹了 Flutter 的 I18n 及 L10n,學會怎麼設定多國語言,怎麼切換語言,以及中文 numberFormat 及 date 的...
上傳下載都是很慢的動作,如何讓使用者知道進度,如何避免重複上傳下載,如何到處都可以傳送通知等等,這些都是非同步 UX 的設計重點與挑戰,這些都在本文中有詳細的說明。
延續前一篇的文章: 穿梭在不同的畫面中 - 固定名稱路由法 — 如前文所述,Flutter 有四種 Navigation & Routing 的方式: 我們已經學過了「N1/直接導航法」,現在來看第二種,「固定名稱路由法」。 ...
iOS 與 Android 的 App icon 不同,那在 Flutter 中要怎麼設計才會都支援?如何確定不會被切掉或太小看不到呢?還有,App 的名稱又要怎麼做多國語言呢?我們一次全部講清楚!
花了時間寫了一個 App,當然會希望能帶來一些收入,最簡單的方法,就是刊登 AdMob 的廣告了,本文詳細的說明了 Adaptive banner 及 Interstitial 的用法,學會了後,其他廣告也不難了。
這篇用了一萬多個字來仔細介紹 Google Drive API v3 在 Flutter 裡面的檔案存取用法,一定要抱怨一下, Flutter 的文件說明真是太不清楚了,花了很多時間錯誤嘗試,才終於會動了。
這是 milestone 4 的程式碼: lib/main.dart:
lib/theme/style.dart:
lib/theme/custom_widgets.dart:
lib/screens/my_ho...
這是 milestone 2 的程式碼: lib/main.dart:
lib/screens/my_home_page.dart:
lib/screens/audio_session.dart:
lib/s...
這一篇希望可以解救工程師的靈魂,因為有太多的工程師因為 UX/UI 的改來改去而氣到翻臉,哎,何必呢,除了要訓練自己的時時保持出世與正向外,儘早將 UX/UI 的控制獨立,會是最好的解決方式。相信我,老闆跟 designer 也不是故意玩你,他...
這是 milestone 3 的程式碼: lib/main.dart:
lib/screens/audio...
這是 milestone 1 的程式碼: lib/main.dart:
lib/mod...
使用 Google Drive API v3 開發的完整 Google 硬碟檔案上傳與下載程式碼