【文章翻譯】Playful typography with Flutter

【文章內容使用 Gemini 1.5 Pro 自動產生】

探索可變字型和著色器

簡介

我是 Brian，Flutter 新手，六個月前加入了 Google 的 Flutter 團隊擔任 UX 工程師。作為 UX 工程師，我將我的圖形設計背景與編碼技能結合起來，幫助團隊構建 Flutter 本身，並展示 Flutter 的能力。這篇部落格文章分享了我作為混合設計師 - 開發人員的第一次 Flutter 實驗之一：一個簡單的以排版為主題的益智遊戲。它結合了我設計中的創意背景和對幾個您可能還沒有嘗試過的 Flutter API 的技術探索：FontVariation 和 AnimationController。我創造這個應用程式玩得很開心，並透過它親身感受了 Flutter 對那些會編碼的設計師或擁有設計眼光的開發人員來說有多棒。

排版

圖形設計師喜歡深入研究「排版」，這只是一個描述文字樣式的花哨詞彙。這包括選擇字型、大小、佈局、間距等等。透過所有這些可以設定的選項，字母本身也可以成為一種藝術形式！作為一名受過設計訓練的設計師，我知道我為這個探索性專案所創造的任何事物，都會以某種方式涉及使用 Flutter 深入研究排版。在過去幾年中，可變字型已經成為設計師前所未有地控制文字樣式的一種有趣方法。這是我一直想進一步探索的領域，而 Flutter 對可變字型的支援，似乎是這個完美的機會。

您可能已經熟悉一般字型，它決定了文字區塊中每個字元的樣式。常規字型通常會提供我們可以選擇的幾個設定，例如粗細：粗體、常規或輕細。可變字型將這種自訂提升到一個新的層次。例如，在粗細方面，我們可能會選擇 100（極輕）到 1000（極粗）之間的任何數值設定。而且我們並不局限於粗細；字型創作者可以讓使用者設定各種項目，例如字母的寬度或下降字元（例如「p」和「y」等小寫字母下降的距離）的深度等等。所有這些不同的設定都稱為「軸」，就像圖表的軸一樣。

*Roboto Flex 可變字型中的字母「g」，沿著寬度軸（從左到右）和粗細軸（從上到下）變化。這些只是它許多生效的軸中的兩個！*

Flutter 提供了一種簡單的方法，可以在 TextStyle Widget 中透過使用 fontVariations 欄位來調整這些設定。例如，以下程式碼片段將在 Roboto Flex 可變字型中建立一個文字樣式，大小為 18，具有針對粗細（wght）和寬度（wdth）的可變軸設定：

TextStyle(
  fontFamily: 'RobotoFlex',
  fontSize: 18,
  fontVariations:[
    FontVariation('wght', 374),
    FontVariation('wdth', 118)
  ],
)

若要進一步了解可變字型，請查看 Google Fonts 網站上的可變字型資源。

設定變化非常容易，但是我想要從一個變化設定動畫到另一個設定，以及在設定組合之間動畫。幸運的是，Flutter 和 Dart 讓將兩個現有的底層功能（FontVariation 和 AnimationController）粘合在一起以製作我自己的自訂動態排版效果變得非常容易。

對於我的展示，我製作了一個 WonkyChar Widget 和一個 WonkyAnimPalette 協助類別，它提供了一種簡單的方法來選擇在螢幕上顯示的任何字母，控制文字大小，並輸入與可變字型軸相關的各種設定。WonkyChar Widget 還包含一個標準的 Flutter AnimationController 物件，我用它來為設定製作動畫。在此範例中，字母「M」將以 200 的大小顯示，並在 4 秒的動畫中將其粗細（粗體）從極細動畫到極粗：

WonkyChar(
  text: 'M',
  size: 200,
  animationDurationMillis: 4000,
  animationSettings: [
    WonkyAnimPalette.weight(
      from: 100,
      to: 900,
    ),
  ],
)

自訂著色器

可變字型的效果，特別是加上動畫，非常棒，但我想要進一步提升我的視覺創造力，看看我可以用字母形狀做些什麼。順便說一句，我聽說 Flutter 剛剛加入了對自訂片段著色器的支援。著色器是在電腦的圖形處理單元 (GPU) 上執行的程式，讓開發人員可以在維持高畫面更新率的同時製作各種視覺效果。Flutter 支援使用 GLSL 撰寫著色器，GLSL 是最出名且文件最齊全的著色器語言之一，有許多書籍、網站、YouTube 影片和大型開放式線上課程 (MOOC) 中提供了許多教學和範例。我當然不是著色器或圖形程式的專家，但我以前曾玩過，所以這是另一個在建立自己的技能的同時探索 Flutter 功能的好機會。

注意：著色器是一個相當進階的編碼主題，有關將它們插入 Flutter 應用程式的詳細資訊超出了這篇部落格文章的範圍。如果您想自己嘗試撰寫一些著色器，請查看 Flutter 文件中的 [撰寫和使用片段著色器](https://docs.flutter.dev/development/ui/advanced/shaders)。這是一種真正引人入勝的編碼方法！

最初，只是為了展示一種可能性，我撰寫了一個簡單的 GLSL 著色器，以作為我其中一個 WonkyChar Widget（如上所述）的濾鏡，以製作以下效果：

專案描述

這些原始元件 - 排版、可變字型支援和著色器 - 是一個有趣的開始，但它們需要實際整合到一個連貫的專案中。作為一個自我賦予的任務，以進一步了解 Flutter 和 Flutter 社群中的編碼，我製作了一個簡單的基於磁磚的益智遊戲 Type Jam，靈感來自 2022 Flutter 益智遊戲黑客大賽。在益智遊戲黑客大賽提示的背景下，針對這些想法進行集思廣益，我提出了以下概念：您，作為玩家，必須幫助一家陷入困境的字型公司透過解決一系列基於磁磚的益智遊戲來修復一個故障的字型檔案。

應用程式的每個畫面都有一個益智遊戲，由一個故障字母的混亂碎片組成，周圍環繞著完整的字母，根據可變字型軸（例如粗細或寬度）製作動畫。磁磚碎片上的故障效果是在每個頁面上透過不同的著色器來建立的，導致磁磚碎片看起來波浪狀、斷裂等等。而且，為了與通常的磁磚益智遊戲機制有所區別，我決定讓玩家透過旋轉磁磚來解決益智遊戲，而不是滑動它們，這樣一來，在完成後就可以看到整個字母，沒有空槽。回想起來，這可能讓益智遊戲變得過於容易，但我可以為 2.0 版想出更多挑戰！

*在益智遊戲應用程式中應用可變字型加上著色器效果（在磁磚碎片上）。這個畫面的字母在「光學大小」軸上製作動畫。*

如果您想看看它是如何整合在一起的，請查看 flutter/samples 儲存庫中「experimental」資料夾中的 Type Jam 應用程式的 varfont_shader_puzzle 範例。正如我之前提到的，我仍然是 Flutter 的新手，而且我只對著色器有基本的了解，所以我希望在未來能夠改進它！目前，請將它視為一個快速展示，而不是模板。

結語

作為一名以設計為中心的 UX 工程師，將我的設計和技術興趣結合起來以製作有趣的排版，並讓其他人也能玩弄字母，這讓我感到非常滿足。此外，我親眼見證了 Flutter 作為一種創造性工具的潛力，它可以超越應用程式設計的典型模式。我製作這個專案玩得很開心，希望它能激勵其他設計師 - 編碼人員嘗試他們奇怪而有趣的想法，並將他們的設計作為真正的應用程式呈現出來！

使用 Flutter 製作有趣的排版最初發佈在 Flutter 上的 Medium，人們在那裡透過突出顯示和回應這個故事來繼續討論。