RainVisitor Blog

無論您是使用 Dart 編寫命令列工具的後端開發人員，還是使用 Flutter 建立應用的 UX 工程師，程式效能對專案的成功至關重要。命令列工具應將延遲降到最低，而應用程式應具有回應性和靈活性，並且沒有掉幀。作為開發人員，我們盡最大努力編寫高效能的程式碼，但有時不清楚為什麼我們的程式碼沒有按照預期執行。

閱讀全文 »

【文章翻譯】How It’s Made: I/O FLIP

發表於 2023-05-18 更新於 2026-08-29 分類於 Flutter

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

原文：https://medium.com/flutter/how-its-made-i-o-flip-da9d8184ef57

結合 AI 生成的文字和圖片，為這款使用 Flutter、Firebase 和 Google Cloud 建立的紙牌遊戲增添趣味

I/O FLIP 是一款由 Google 支援並使用 Flutter 建立的 AI 設計紙牌遊戲。它結合了許多 Google 產品和技術，包括 Flutter、Firebase、生成式 AI 工具、Muse 上的 Dreambooth、PaLM API 和 MakerSuite。玩家可以進行多場比賽，並將遊戲中的牌分享到社群媒體。

要玩遊戲，請訪問 http://flip.withgoogle.com。要開始遊戲並生成牌組，請回答幾個提示。要組牌並加入比賽，請選擇三張牌。您將使用這些牌與您的對手進行三輪比賽，每輪比賽以最高牌獲勝。當比賽結束時，樂趣不必結束。繼續進行比賽以提高您的連勝紀錄，並試圖登上排行榜！

讓我們深入探討我們如何使用 Flutter 和 Firebase 來建立 I/O FLIP 的技術細節。

使用 Flutter 建立的紙牌遊戲

I/O FLIP 的使用者介面、動畫、全息影像效果和後端，都使用 Flutter 和 Dart 建立。

首先，我們利用了 Flutter 休閒遊戲工具包。我們使用開箱即用的音訊功能、遊戲生命週期和 go_router 的應用程式導航作為基礎。從那裡，我們建立了遊戲邏輯和 UI。I/O FLIP 是一個響應式 Web 應用程式。它根據玩家的螢幕調整其 UI。該應用程式還根據玩家使用的設備處理輸入。當在行動裝置或平板電腦上訪問時，它接收觸控輸入，而在桌上型電腦上接收滑鼠輸入。

撲克牌是 I/O FLIP 的關鍵元素。成千上萬的牌可能會出現在玩家的牌組中。每張牌都顯示一個 Google 吉祥物、元素和力量值。當元素彼此對抗時，這些元素就會發揮作用。例如，當有人打出一張火牌，而他們的對手打出一張水牌時，水牌會受到 10 分的懲罰。我們還使用紀錄，Dart 3 的新功能，根據牌的元素來渲染一個框架。

…
 (String, SvgPicture) _mapSuitNameToAssets() {
    switch (suitName) {
      case 'fire':

        if (isRare) {
          return (
            Assets.images.cardFrames.holos.cardFire.keyName,
            Assets.images.suits.card.fire.svg(),
          );
        }
        return (
          Assets.images.cardFrames.cardFire.keyName,
          Assets.images.suits.card.fire.svg(),
        );
      …

使用 AI 生成的圖片和描述建立的牌

I/O FLIP 例子牌，顯示 Dash、Sparky、Android 和 Dino，背景中是各種背景和道具。 — I/O FLIP 例子牌

I/O FLIP 中的每張牌都是獨特的，因為它包含 AI 生成的圖片和描述。在遊戲開始時，玩家會回答兩個提示。這些提示有助於填充一副包含 12 張牌的牌組，這些牌組的圖片和描述是 AI 模型預先生成的。

Google 團隊使用了兩種技術來預先生成圖片：Muse，一個 Transformer 文字轉圖片模型，以及 Dreambooth。Dreambooth 使得能夠在不同的場景、姿勢、視角和光照條件下合成一個主體。每張牌都包含四個 Google 吉祥物之一：Dash、Sparky、Android 或 Dino，以及一個地點。吉祥物還有一個物品，用來指定他們的隊伍。「隊伍類型」提示在遊戲開始時就會被覆蓋，用於建立這個物品。例如，選擇「巫師」可能會導致一個角色戴著巫師帽、魔杖，或其他巫師般的事物！

Google 團隊使用 PaLM API 來預先生成牌的描述。PaLM API 訪問 Google 的大型語言模型。遊戲開始時的提示包含團隊類型和他們團隊的力量類型。假設您選擇了「巫師」團隊和「磁力」力量。當您的牌生成時，一張牌的描述包含與生成的圖片相關的上下文，包括角色的特殊力量。例如，「Dash 巫師和他的寵物龍住在一座城堡裡。他喜歡施法，讓大家開心。」

Flutter 透過 GameCard Widget 組合牌。這個 Widget 接收牌的資料：名稱、描述、圖片和力量。一旦它建立了牌，它就會應用邊框以描繪牌的套裝元素。如果一張牌是特殊牌，Flutter 會應用箔紋理效果。

若要進一步了解遊戲的生成式 AI 方面是如何建立的，請查看這篇 Google 開發者部落格文章。

著色器為特殊牌添加箔效果

兩張牌在比賽中，一張牌顯示皇家 Sparky 戴著皇冠，點數為 100，並帶有彩虹箔效果，這是通過使用片段著色器實現的 — I/O FLIP 使用片段著色器來渲染牌上的全息效果

Flutter 支援片段著色器。為了生成這些逐像素的視覺效果，Flutter 在裝置的 GPU 上運行 OpenGL 著色語言 (GLSL)。集換式卡牌遊戲的收藏家可能會記得打開一包卡牌時，找到一張有閃亮的全息箔的特別版卡牌的感覺 I/O FLIP 也包括特殊的箔牌。它們的點數為 100 分。普通牌的點數範圍為 10 到 99 分。我們使用自訂著色器來渲染箔效果。

我们在 foil.frag 文件中实现了箔着色器。该效果使用以下常量：

STRENGTH. 这会将原始像素颜色与箔效果的颜色混合。它从 0.0（无效果）到 1.0（全效果）。
SATURATION. 这会设置颜色的强度。它从 0.0（灰度或无颜色）到 1.0（全颜色或无黑色）。
LIGHTNESS. 这从 0.0（全黑）到 1.0（全白）。

该着色器还通过 uniform 接收输入，在本例中为 resolution 和 offset。称为 tSource 的 uniform sampler2d 代表应用了着色器的卡牌图像。最终结果是带有箔效果的卡牌。

vec4 rainbowEffect(vec2 uv) {
    vec4 srcColor = texture(tSource, uv);
    float hue = uv.x / (1.75 + abs(offset.x)) + offset.x / 3.0;
    float lightness = LIGHTNESS + 0.25 * (0.5 + offset.y * (0.5 - uv.y));
    hue = fract(hue);

    float c = (1.0 - abs(2.0 * lightness - 1.0)) * SATURATION;
    float x = c * (1.0 - abs(mod(hue / (1.0 / 6.0), 2.0) - 1.0));
    float m = LIGHTNESS - c / 2.0;
          
            
              
                閱讀全文 »

【文章翻譯】The future of iOS development with Flutter

發表於 2023-05-18 更新於 2026-08-29 分類於 Flutter

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

Flutter 為 iOS 開發的最新成就與未來方向

自 2017 年推出以來，Flutter 迅速成為 iOS 應用程式開發的首選。全球開發人員都熱愛 Flutter。使用 Flutter，他們可以編寫一次程式碼，然後將其應用程式部署到 iOS、Android、網頁和桌面。這使得 Flutter 獲得了廣泛的追隨者，目前已有超過一百萬個應用程式使用 Flutter 構建。

閱讀全文 »

【文章翻譯】What’s new in Flutter 3.10

發表於 2023-05-10 更新於 2026-08-29 分類於 Flutter

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

原文：https://medium.com/flutter/whats-new-in-flutter-3-10-b21db2c38c73

宣布 Flutter 3.10：無縫的網頁和行動整合、透過 Impeller 打破效能限制等等

歡迎來到 Flutter 3.10！我們迫不及待地想展示我們非凡的 Flutter 社群所付出的巨大努力。此 Flutter 版本運行著令人難以置信的 Dart 3，也於今日推出！

閱讀全文 »