Zespia

Jul 15, 2020

在 Flutter 監聽音量按鈕的事件

上一篇文章提到了用 Channel 實作 Flutter 和 Android/iOS 之間的通訊。本文將會示範如何用 Channel 來監聽音量按鈕的事件,因為我手邊只有 Android 裝置,所以會用 Kotlin 來示範。

EH Redux 有一個功能就是能夠使用音量鍵來控制圖片翻頁,這項功能因為目前 Flutter 還沒有官方支援,所以必須要在 Android/iOS 這邊自己寫程式去補足。

繼續閱讀
Jun 29, 2020

EH Redux – 試用 Flutter 重寫 Android App

最近心血來潮,決定重新開始學習打從一年前就想玩玩看的 Flutter,試試看能不能做出我廢棄多年的 E-Hentai 閱讀器 for Android

Flutter 是 Google 開發的跨平台 UI toolkit,可以同時支援 Android、iOS 和 Web,其原理就是用 canvas 來繪製所有的 UI,不需要像 React Native 一樣得在 UI 和 JavaScript engine 兩邊互相溝通而導致效能問題。

另一個優勢就是 Flutter 本身已經提供了非常完整的 UI library,無論是 Android 或 iOS 風格皆有對應的元件可直接取用,雖然有些時候可能會發現和原生的 UI 在外觀或是動畫上有些微妙的差異,但整體來說已經非常實用了。

本文會以 Web 的角度來分析 Flutter 的優缺點,因為我比較熟 React,所以主要會拿它來做比較。

繼續閱讀
Jun 12, 2020

建構精簡的 Yarn Workspace Docker Image

本篇接續 Yarn 2 和 Monorepo 提到的部屬的部分,因為 monorepo 裡包含了很多套件和網站,如果直接在根目錄執行 docker build 把整個 monorepo 打包成 Docker image 的話,勢必會做出大於 1 GB 而且內含一堆無用垃圾的 Docker image;為了要讓 Docker image 能夠最小化,必須只打包正式環境會需要用到的套件,確保不會浪費任何空間和時間。

我把建構 Docker image 的步驟分為:

  • 解析正式環境需要用到的套件
  • 複製 workspaces
  • 建構 Docker image
繼續閱讀
May 20, 2020

試用 Tailwind CSS 重寫主題

上週試著用 Tailwind CSS 重新打造了網誌的主題,一開始使用的時候,覺得一直翻文件很煩,因為大部分的 CSS 規則大概都知道怎麼寫,卻得要翻文件才知道對應的 class;但寫了一段時間後,開始覺得還不錯,大部分的 class 都很容易預測,也很容易根據需求客製變數或外掛。

BootstrapSemantic UI 這類 UI library 相比,Tailwind CSS 不提供現成的元件(另有提供須付費的 Tailwind UI),而是把每個 CSS 規則都寫成單獨的 class,因此即便完全不寫 CSS,只要在 HTML 中設定 class,也很容易能夠拼湊出想要的樣式,但缺點就是還是需要有基本的 CSS 知識才能上手。

繼續閱讀