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

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

最近心血來潮，決定重新開始學習打從一年前就想玩玩看的 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，所以主要會拿它來做比較。

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

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

• 解析正式環境需要用到的套件
• 複製 workspaces
• 建構 Docker image

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

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

今年初隨著公司的 repo 越來越多，我們決定把 web 前端部分轉為 monorepo 的形式，一開始花了一段時間研究各個 monorepo 方案的利弊，最後決定基於 Yarn 2 打造一套自用的工具。這篇文章會大概分析一些我試過的 monorepo 方案的優缺點，以及最後用 Yarn 2 的成果。