【文章翻譯】How it’s made: Holobooth

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

展示 Flutter 和機器學習的虛擬照片亭體驗

隆重推出 Flutter Forward Holobooth,這是一個展示 FlutterFirebase 和機器學習(使用 MediaPipeTensorFlow.js)功能的全新體驗,以虛擬照片亭呈現。首先選擇您的頭像(Dash 或 Sparky),然後將自己傳送到熱帶海灘、火山山脈、外太空、海底或其他地方!由於我們無法將所有人運送到奈洛比現場參加 Flutter Forward,因此我們想要提供同樣令人興奮的虛擬體驗!使用 Holobooth,您可以捕捉一段短片來紀念您的虛擬之旅。然後,透過分享到 Twitter 或 Facebook 來與您的朋友炫耀。

Flutter Forward Holobooth 網頁應用程式的登陸畫面。左邊,Dash 在一個以紫色和藍色色調以及 Flutter 標誌裝飾的照片亭裡拍照。右邊是一個開始按鈕。
holobooth.flutter.dev 上嘗試 Flutter Forward Holobooth

Holobooth 基於 Google I/O 2021 的第一版 Photo Booth 應用程式。Holobooth 沒有拍攝你和 Dash 或 Sparky 的照片,而是使用機器學習,透過你的臉部表情控制 Dash 或 Sparky 的動畫。

我們將分解說明我們的團隊如何與 Google 合作,透過運用 Google 工具的功能,打造更具沉浸感和未來感的照片亭體驗。我們使用 FlutterFirebase 建立 Holobooth 應用程式。JavaScript 中的 Web ML 讓我們能夠透過虛擬、互動式、3D 頭像將體驗提升到新的水平。讓我們深入了解我們是如何建立它的!

使用 TensorFlow.js 偵測臉部

Holobooth 最令人興奮的功能之一是能夠將您臉部的即時影片,映射到 Dash(或 Sparky)的 3D 模型上,同時您穿梭在他們的虛擬世界中。如果您臉部表達驚訝,Dash 的臉部也會表達驚訝,依此類推。為了實現這一點,我們使用了 Flutter Web 的 camera Plugin 和 TensorFlow.js 來偵測相機畫面中使用者的臉部。更具體地說,我們使用了 MediaPipe FaceMesh 模型,它可以實時估計 468 個 3D 臉部特徵點,以偵測 Web 和行動瀏覽器中相機畫面中使用者臉部的特徵。

一個穿著灰色襯衫和眼鏡坐在椅子上的男人。在他臉上是一堆紅點,映射到他的五官上。在他的眼睛周圍和嘴巴周圍有高濃度的紅點。
使用 MediaPipe FaceMesh 模型偵測到的特徵

根據每個臉部特徵的位置,我們可以判斷使用者是否在畫面中,他們的眼睛或嘴巴是否睜開,等等。當使用者在相機視圖中移動時,MediaPipe FaceMesh 模型(透過 TensorFlow.js Face Landmarks Detection 套件 提供)確保我們可以追蹤使用者特徵的確切座標,以便我們可以在 Dash 或 Sparky 上鏡像它們。如需更多詳細資訊,您可以深入了解 face_geometry.dart 檔案。雖然目前還沒有針對 TensorFlow.js 的官方 Dart 套件,但 Dart 的 JS 套件允許我們將 JavaScript 函式庫導入 Flutter Web 應用程式(如需更多詳細資訊,請參閱 tensorflow_models 套件資料夾)。

  FaceGeometry({
required tf.Face face,
required tf.Size size,
}) : this._(
rotation: FaceRotation(keypoints: face.keypoints),
leftEye: LeftEyeGeometry(
keypoints: face.keypoints,
boundingBox: face.boundingBox,
),
rightEye: RightEyeGeometry(
keypoints: face.keypoints,
boundingBox: face.boundingBox,
),
mouth: MouthGeometry(
keypoints: face.keypoints,
boundingBox: face.boundingBox,
),
distance: FaceDistance(
boundingBox: face.boundingBox,
imageSize: size,
),
);

const FaceGeometry._({
required this.rotation,
required this.mouth,
required this.leftEye,
required this.rightEye,
required this.distance,
});

使用 Rive 和 TensorFlow.js 動畫背景和頭像

我們求助於 Rive 來讓 Holobooth 動畫栩栩如生。Rive 是一個使用 Flutter 建立的 Web 應用程式,它提供了用於建立高性能、輕量級、互動式動畫的工具,這些動畫易於整合到 Flutter 應用程式中。我們與 Rive 的才華洋溢的設計師和 HOPR 設計工作室 合作,創造出可以在我們的 Flutter 應用程式中無縫運作的動畫 Rive 圖形。動畫背景和頭像都是 Rive 動畫。

左邊是一個向左、向右、向上、向下移動、眨眼,然後張嘴的臉。Dash 模仿了左邊臉移動的相同動作。
移動您的臉,看看 Rive 模型如何模仿您的行為

頭像使用 Rive 狀態機,讓我們可以控制頭像的行為和外觀。在 Rive 狀態機中,設計師指定所有輸入。輸入是由您的應用程式控制的值。您可以將它們視為設計和工程團隊之間的契約。您的產品程式碼可以隨時變更輸入的值,狀態機會對這些變更做出反應。

對於 Holobooth,我們使用輸入來控制嘴巴張開或閉合的程度。使用來自 FaceMesh 模型的特徵偵測,我們可以將它們映射到頭像模型上的對應座標。使用 StateMachineController,我們轉換來自模型的輸入,以確定頭像在螢幕上的顯示方式。

class CharacterStateMachineController extends StateMachineController {
CharacterStateMachineController(Artboard artboard)
: super(
artboard.animations.whereType<StateMachine>().firstWhere(
(stateMachine) => stateMachine.name == 'State Machine 1',
),

例如,頭像模型有一個屬性用於測量 嘴巴的張開程度(從 0 到 1 測量,其中 0 表示完全閉合,1 表示完全張開)。如果使用者在相機視圖中閉合嘴巴,應用程式會提供對應的值並將其饋送到頭像模型中,因此您會看到您的頭像嘴巴在螢幕上也閉合了。

使用 Firebase 捕捉動態照片

Holobooth 的主要功能是您可以分享的 GIF 或影片,以慶祝 Flutter Forward。我們求助於 Firebase 的雲端函數 來幫助我們生成和上傳您的動態照片到 Firebase 的雲端儲存空間。當您按下相機按鈕時,應用程式會開始捕捉畫面 5 秒鐘。使用 ffmpeg,我們使用雲端函數將畫面轉換為單個 GIF 和影片,然後上傳到 Firebase 的雲端儲存空間。您可以選擇下載 GIF 或影片以供日後觀賞,或手動上傳到社交媒體。

使用者選擇 Dash 作為頭像,然後選擇外太空的動畫背景,其中有行星和星星。一個火箭斜向上向左移動,在 Dash 身後。使用者選擇一頂藍色的巫師帽,上面有星星,搭配一件相同的襯衫和一個 Flutter 馬克杯,然後按下相機按鈕錄製動態照片。最終的照片在一個單獨的螢幕上顯示,其中有按鈕可以分享照片、下載照片或重新拍攝照片。
捕捉動態照片

若要將您的 GIF 直接分享到 Twitter 或 Facebook,您可以點擊分享按鈕。然後,您將被帶到所選平台,其中包含一個預先填寫的帖子,其中包含您的影片第一畫面的照片。若要觀看完整的影片,請點擊您的 holocard 連結 - 一個網頁,它會完整顯示您的影片,並有一個按鈕引導訪客自己嘗試 Holobooth!

Holocard 頁面,左邊是使用者動態照片的第一個畫面。Dash 穿著太空人服,站在未來城市前。右邊是 Flutter Forward 活動標誌,文字為“Check out my Flutter holocard”,以及一個顯示“Try now”的按鈕,使用者可以在其中使用 Holobooth 拍攝自己的照片。
Holocard 範例

挑戰和解決方案

Holobooth 包含許多元素,這些元素擴展了 Flutter 的可能性 - 例如使用機器學習模型和 Rive 圖形,同時確保為使用者提供高性能、流暢的體驗。

與 TensorFlow.js 合作對 Very Good Ventures 來說是第一次。目前沒有官方的 Flutter 函式庫,因此我們在這個專案上的早期工作很大一部分是專注於對可用模型進行實驗,以確定哪個模型適合我們的需求。當我們確定了特徵點偵測模型後,我們就必須理解模型輸出的資料,並將它們映射到 Rive 動畫。以下是一個早期探索臉部偵測的範例:

一個穿著淡藍色襯衫和紅色帽衫的男人正在螢幕上移動他的臉。他的臉周圍有一個藍色方框,紅點映射到他的臉上,他的眼睛和嘴巴周圍有高濃度的點。當他移動他的臉時,紅點隨著他的臉部特徵一起移動。
臉部偵測的早期探索

官方 Flutter 的 camera Plugin 為我們提供了開箱即用的許多功能,但目前它不支持在 Web 上串流圖片。對於 Holobooth,我們 分支 了 camera Plugin 以添加此功能。我們希望這種功能可以在 未來由官方 Plugin 支援

另一個挑戰是效能優化。錄製螢幕可能會是一項昂貴的操作,因為應用程式正在捕捉大量數據。我們還必須考慮使用者會從不同的瀏覽器和設備訪問這個應用程式。我們希望確保該應用程式具有高性能,並且無論使用者使用什麼設備,都能提供流暢的體驗。當在桌面端訪問 Holobooth 時,影片背景會動畫化並反映橫向模式。為了優化行動瀏覽器,背景是靜態的,並被裁剪以適合縱向模式。由於行動螢幕比桌面螢幕更小,因此我們還優化了圖片素材的解析度,以減少初始頁面載入時間和設備使用的數據量。

如需更詳細地了解我們是如何解決這些挑戰以及更多問題,您可以查看 開源程式碼。我們希望這能為想要嘗試 TensorFlow.js、Rive 和影片的開發人員提供靈感,甚至對於那些只是想優化他們 Web 應用程式的開發人員也能提供靈感。

展望未來

在建立這個演示過程中,我們想要探索 Flutter Web 應用程式以簡單、高性能且有趣的方式與 TensorFlow.js 模型整合的潛力。雖然我們建立的許多內容仍然是實驗性的,但我們對機器學習在 Flutter 應用程式中的未來感到興奮,它可以為使用者在任何設備上創造出令人愉悅的體驗!加入社群對話,告訴我們您的想法,以及您如何在您的下一個 Flutter 專案中使用機器學習。

在 Holobooth 中拍一段影片,並在社交媒體上與我們分享!


它是如何製作的:Holobooth 最初發佈在 Flutter 上的 Medium,人們在那裡透過突出顯示和回應這個故事來繼續討論。

【文章翻譯】Introducing background isolate channels

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

現在,從 Flutter 3.7 開始,我很高興地宣布,開發者可以從 *任何* 隔離區使用 Plugin 和平台通道。這一直是我們 [排名最高的議題之一](https://github.com/flutter/flutter/issues/13937),並且從 2018 年就開始存在。由於實作起來並不簡單,而且存在一種雖然繁瑣但可行的解決方案:始終從根隔離區(Flutter 提供的隔離區)使用 Plugin,因此它被降級了。但是,隨著 Flutter 的成熟,它越來越注重效能,遵循軟體界的古老格言「讓它運作,讓它正確,讓它快速」。選擇實作此功能是改善效能和讓 Flutter 更易於使用的幸福交集。因此,它成為了很容易做出的投資決定。

如果您想了解此功能的用法,請查看 GitHub 上的 [範例程式碼](http://tbd)。

用例

為什麼有人想要從背景隔離區使用 Plugin 呢?很明顯 Plugin 有其存在的必要性,因為並非世界上所有的程式碼都是用 Dart 編寫的。社群花費了數年的努力來讓這些程式碼透過 Plugin 變得可用,例如:path_provider 的尋找臨時目錄功能,或 flutter_local_notifications 的發佈通知功能。

接下來的邏輯問題是:「為什麼有人要在背景隔離區上執行程式碼?」答案是,有時您別無選擇,某些函式庫可能會在背景隔離區上呼叫回呼函式,例如 android_alarm_manager_plus。或者,應用程式可能會進行大量的計算,而開發者不希望這些計算干擾 UI。

在我幫助 Google 的其他團隊採用 Flutter 的時間裡,隨著產品的成熟,他們最終會遇到根隔離區成為瓶頸的情況,這幾乎是不可避免的。因此,我們需要確保框架中的所有內容都經過優化,並為使用者提供在必要時輕鬆卸載工作的工具。

以下是一個為背景隔離區通道設計的虛構具體用例:

想像一個使用 AI 從文字提示生成高解析度圖像的應用程式。使用者的先前創作儲存在 Firebase 雲端儲存空間中,並且有一個功能可以從使用者的手機匯出和分享創作。Flutter 應用程式啟動一個背景隔離區,它從 Firebase 雲端儲存空間下載圖像的 8k 版本,將圖像縮放到所需的匯出大小,將圖像儲存到相機膠捲,最後在匯出完成時發佈本地通知。

在此範例中,至少有 3 個 Plugin 是從背景隔離區使用的,一個用於從 Firebase 雲端儲存空間讀取,一個用於儲存到手機的相機膠捲,一個用於發佈本地通知。如果沒有背景隔離區通道,應用程式必須將 8k 圖像從根隔離區複製到背景隔離區,才能對其進行縮放。今天,使用 Dart 無法將其變成恆定時間運作。

快速範例

以下是一個使用新 API 從背景隔離區呼叫 shared_preferences Plugin 的快速範例:

import ‘package:flutter/services.dart’;
import ‘package:shared_preferences/shared_preferences.dart’;
void main() {
// 識別要傳遞給背景隔離區的根隔離區。
// (在 Flutter 3.7 中引入的 API)
RootIsolateToken rootIsolateToken = RootIsolateToken.instance!;
Isolate.spawn(_isolateMain, rootIsolateToken);
}
void _isolateMain(RootIsolateToken rootIsolateToken) async {
// 將背景隔離區註冊到根隔離區。
BackgroundIsolateBinaryMessenger
.ensureInitialized(rootIsolateToken);
// 您現在可以使用 shared_preferences Plugin。
SharedPreferences sharedPreferences =
await SharedPreferences.getInstance();
print(sharedPreferences.getBool(‘isDebug’));
}

技術細節

以下是平台通道工作原理的高階概觀:

當平台通道的結果被呼叫時,會有一個硬編碼跳轉到 platform 線程。為了讓背景隔離區通道能夠運作,必須儲存傳送訊息的隔離區,以便引擎可以在該隔離區的事件迴圈中排程結果。這透過使用 [Dart 的 ports](https://github.com/dart-lang/sdk/blob/eb9554d70e386bb3177f63509ba8f7e4bbf500a0/runtime/include/dart_native_api.h#L125) 來實作。Dart ports 儲存擁有它們的隔離區,並且是從 C API 排程這些隔離區的唯一方法。

另一個需要實作的內容是將背景隔離區與其根隔離區關聯起來的方法。這讓我很驚訝,但是為了在 Flutter 引擎被破壞時關閉平台通道,必須知道哪些背景隔離區與該引擎關聯。否則,背景隔離區可能會嘗試與正在被破壞的 Flutter 引擎通訊。這在最終的 API 中可以被視為一種後果,其中需要使用 RootIsolateToken 初始化 BackgroundIsolateBinaryMessenger

若要進一步了解實作,請查看 [隔離區平台通道](https://docs.google.com/document/d/1yAFw-6kBefuurXWTur9jdEUAckWiWJVukP1Iay8ehyU/edit#heading=h.722pnbmlqbkx) 設計文件。此文件還包含反向通訊的提議,但尚未實作或被接受。

感謝 Flutter 社群的支持,希望大家都能為這個新功能找到絕妙的用途。


介紹背景隔離區通道 最初發佈在 Medium 上的 Flutter,人們在那裡透過突出顯示和回應這個故事來繼續討論。

【文章翻譯】Playful typography with Flutter

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

探索可變字型和著色器

簡介

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

使用可變字型和著色器自訂 Flutter 文字 Widget 的調色盤。

排版

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

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

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

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

1
2
3
4
5
6
7
8
TextStyle(
fontFamily: 'RobotoFlex',
fontSize: 18,
fontVariations:[
FontVariation('wght', 374),
FontVariation('wdth', 118)
],
)

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

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

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

1
2
3
4
5
6
7
8
9
10
11
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(如上所述)的濾鏡,以製作以下效果:

應用著色器之前和之後的 `WonkyChar` Widget。

專案描述

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

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

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

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

結語

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


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

【文章翻譯】Screenshots and automated publishing for pub.dev

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

pub.dev 的螢幕截圖和自動發佈功能

從今天開始,pub.dev 上有一些新功能:您現在可以為套件宣告螢幕截圖,讓搜尋方式更具視覺化。而且現在發佈流程可以完全自動化,由 GitHub Actions 支援。

將螢幕截圖加入 pub.dev

pub.dev 的核心目標之一是讓開發者更容易找到適合特定用途的套件。當您搜尋 Widget 或其他視覺元件時,圖片扮演著重要的角色。我們現在在套件搜尋結果中顯示螢幕截圖,讓您更容易找到套件。

套件搜尋和套件頁面中的螢幕截圖

螢幕截圖的縮圖現在會顯示在搜尋結果中,您也可以篩選搜尋結果,僅列出包含螢幕截圖的套件。

螢幕截圖縮圖也會顯示在套件頁面上,點擊縮圖會觸發包含所有螢幕截圖的圖片輪播。

pubspec.yaml 中宣告螢幕截圖

將螢幕截圖加入到套件非常簡單。在 pubspec.yamlscreenshots 欄位中宣告檔案,並附上描述和路徑。以下是 animations 套件的範例。

1
2
3
4
5
6
7
8
name: animations
...
screenshots:
- description: '容器轉換模式的範例。'
path: example/screenshots/container_transform_lineup.webp
- description: '淡入淡出模式的範例。'
path: example/screenshots/fade_lineup.webp
...

更多詳細資訊,請參閱 dart.dev/tools/pub/pubspec#screenshots

pub.dev 的自動發佈

數千名 Dart 社群成員在 pub.dev 上發佈套件,造福所有 Dart 和 Flutter 開發者。傳統上,這些套件發佈者透過運行本地終端機命令 dart pub publish 並使用他們的 Google 帳戶進行驗證來發佈到 pub.dev。在幕後,refresh token 會儲存在他們開發機器上的設定檔中,讓他們無需再次驗證即可發佈新版本。這個流程簡單易懂,但需要許多手動步驟。我們很高興推出新的自動發佈流程,可以直接從 GitHub Action 發佈新的 pub.dev 版本。這有幾個好處:

  • 每個版本都會在 GitHub 中自動標記一致的版本標籤
  • 設定審查和批准新版本發佈的流程變得更容易。
  • 發佈過程由 GitHub 簽名的 token 進行驗證,確保沒有憑證需要儲存在磁碟上。

確保自動發佈的安全性

目前,一些使用者已採用將包含 refresh tokenpub-credentials.json 設定檔儲存在 GitHub Actions 上的秘密環境變數中的方法。透過這種方式,他們可以編寫一個 GitHub Action 工作流程,恢復設定檔並使用它來發佈套件的新版本。雖然這種流程在技術上可行,但工具設計時並未考慮到這一點,而且該流程有多個缺點:

  • pub-credentials.json 檔案可以用於發佈作者有權發佈的任何套件,而不僅僅是從設定的流程發佈的一個套件。
  • 如果洩露,pub-credentials.json 可以用於發佈新版本和新套件,偽裝成建立 pub-credentials.json 檔案的使用者。
  • pub-credentials.json撤銷 refresh token 的使用者介面 並不容易找到。

事實上,不止一次發生過套件發佈時意外包含了作者的 pub-credentials.json 檔案的情況,因為作者在 CI 作業中提取了檔案。發佈套件以及更新套件所需的憑證是一個非常嚴重的安全漏洞,我們最終在 dart pub publish實作了洩露偵測

我們新的自動發佈支援減輕了這些問題,可以使用以下其中一種方法驗證到 pub.dev:

  • 由 Github Actions 簽名的臨時 OIDC token
  • 可以從大多數 GCP 資源(如 Google Cloud Build 或其他雲端環境,例如 Azure 或 AWS)使用的 GCP 服務帳戶。

這些流程啟用了依賴長期秘密 token 的自動發佈,如果意外洩露,這些 token 很容易被濫用。如果您將發佈流程部署到自訂機器上,您當然可以依賴匯出的服務帳戶金鑰,但必須非常小心地妥善保護這些金鑰。

啟用安全發佈

只需幾個步驟,您就可以從 GitHub 啟用自動發佈 - 有關所有詳細資訊,請參閱 dart.dev/go/automated-publishing


pub.dev 的螢幕截圖和自動發佈 最初發佈在 Medium 的 Dart 上,人們在那裡透過醒目顯示和回應這個故事來繼續對話。

http://creativecommons.org/licenses/by/4.0/

【文章翻譯】Material 3 for Flutter

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

福爾摩斯與華生;花生醬與果醬;Flutter 與 Material!這些搭配都是天作之合!

Material 是一個設計系統,可以幫助您在行動、網頁和桌面跨平台構建出色的、無障礙的應用程式。

在 Flutter 中,Material 函式庫 為開發人員提供了 UI 所需的所有構建模組。自 2021 年 Google I/O 推出 Material 3 以來,Flutter 團隊一直在更新 Flutter 的 Material 函式庫以支援這些新的變更。

我於 2022 年 8 月加入 Flutter 的 Material 團隊。從那以後,我一直在幫助更新 Widget 以符合 Material 3 規格,同時支援開源 Flutter 社群中的 Material 3 使用者。

在本文中,我將向您展示 Material 3 的新功能,如何將它們整合到您的 Flutter 應用程式中,並向您更新接下來的規劃。

Flutter Material 3 範例應用程式

Material 3

若要查看所有最新的 Material 3 更新,請查看我們的 範例應用程式。它讓您可以與所有 Widget 進行實時互動。

此應用程式展示了更新後的組件,讓您可以在 Material 2 和 Material 3、亮模式和暗模式之間切換,並嘗試不同的顏色方案。

入門

若要將 Material 3 加入到您的應用程式中,請在主題的建構函式中將 useMaterial3 旗標設定為 true:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light(useMaterial3: true),
      body: MyHomePage(),
    );
  }
}

有關遷移現有 Flutter 應用程式的資訊,請查看 [將 Flutter 應用程式遷移到 Material 3](https://blog.codemagic.io/migrating-a-flutter-app-to-material-3/),這是 Flutter 貢獻者 Taha Tesser 在 CodeMagic 上發表的文章。

在撰寫本文時,您可以 *選擇* 使用 Material 3。未來,它將成為 Flutter 應用程式的預設(以及強制性)Material 版本。

新的 Widget

若要充分利用 Widget 變更,請設定 useMaterial3 旗標。但是,有些 Widget 在 Material 3 中發生了很大的變更,因此已被新的 Widget 取代。以下是其中一些新 Widget:

NavigationBar & NavigationDrawer

BottomNavigationBar Widget 已被 NavigationBar 取代。它稍微高一點,而且沒有下拉陰影(表示高度)。

分段按鈕

分段按鈕讓您的使用者可以在 *單個 Widget* 中從多個選項中選擇可切換的選項。預設情況下,您只能選擇一個項目,除非您指定 multiSelectionEnabled 參數。

分段按鈕 - 單選和多選

填充按鈕

我們已增加了按鈕的選項,其中包括新的 FilledButton。此按鈕會建立一個有色且沒有高度的按鈕。FilledButton.tonalmethod 方法會將目前的背景設定為輔助顏色。

凸起、填充和輪廓按鈕

徽章

新的 Badge Widget 可用於為父 Widget 提供額外的資訊,通常表示計數或狀態變更。它們有大型和小型可供選擇:

附加到父圖示的徽章 Widget

產生顏色方案

Material 3 的一項全新的功能讓您可以從單個種子顏色設定整個應用程式的顏色主題。在主題的建構函式中設定 color scheme seed 參數,然後從 *單一* 輸入,Flutter 會為應用程式中 **所有** Widget 產生一個和諧的顏色方案。此方案在亮模式和暗模式下都有效!

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light(
        useMaterial3: true,
        colorSchemeSeed: Color.fromRGBO(188, 0, 74, 1.0);
        ),
      body: MyHomePage(),
    );
  }
}
從種子顏色產生的顏色方案和色調值

如果您想進一步自訂顏色方案,請訪問 Material 生成器應用程式。您可以定義輔助顏色和第三顏色以建立完全獨特的調色盤。最棒的是,它會匯出 Dart 檔案,您可以立即在 Flutter 應用程式中使用。

接下來的規劃

Flutter 的 Material 3 遷移仍在繼續。您可以在 將 Material 3 帶入 Flutter GitHub 議題中追蹤進度。您也可以貢獻!我們歡迎錯誤報告和修復,讓 Material 3 變得對像您一樣的 Flutter 開發人員來說更加出色。

我們最近的更新帶來了 SnackBarTabBarSlider Widget 來符合 Material 3 規格。到目前為止,我們已經遷移了 27/30 個組件,並加入了一系列新功能以支援動態顏色、文字主題、Android 12 功能等等。

如果您想更多地參與 Flutter 社群,請前往 flutter.dev/community,並在您最喜歡的社交平台上找到我們。在那裡見!


Flutter 的 Material 3 最初發佈在 Flutter 上的 Medium,人們在那裡透過突出顯示和回應這個故事來繼續討論。

http://creativecommons.org/licenses/by/4.0/

【文章翻譯】Join us for

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

加入我們參與 #17DaysOfFlutter

#17DaysOfFlutter 的橫幅

新年快樂!

為什麼不藉此機會提升您的 Flutter 技能來迎接新的一年呢?從 1 月 9 日開始,直至我們在 1 月 25 日舉辦的 Flutter Forward 活動 之前,我們將舉辦為期 17 天的 Flutter 活動,一場 Flutter 內容馬拉松,我們的 Flutter 專家將在星期一至星期五公開發表全新的內容。此外,您還有機會應用所學,並與 Flutter 社群分享您的作品。無論您是 Flutter 的新手,還是經驗豐富的 Flutter 專家,我們都有新的 YouTube 影片、Codelab、現場活動和其他精心策劃的內容,可以幫助您在學習過程中取得進展。

#17DaysOfFlutter 時間表

通往 Flutter Forward 的內容安排如下:

第一週

第一週將以趣味和遊戲為主!觀看開發者關係工程師 KhanhEricLearning to Fly 第二季 中打造他們首個 Web 遊戲(使用 Flame)。跟著他們學習遊戲開發,或按照自己的步調,使用我們的全新遊戲 Codelab 從頭開始打造一個遊戲。在本週稍晚,在 Widget of the Week 的新一集中,了解 Flame 遊戲引擎。我們提供多種方法來幫助您在 Flutter 中構建遊戲。

第二週

在第二週,我們將發佈另一個 Codelab 和一些關於 Material 3 和 UX 設計的部落格文章,這些文章將重新定義您對 Flutter 應用程式體驗的想法。然後觀看 1 月 17 日由 CraigFlutter YouTube 頻道 上主持的 The Boring Show - Live。為了結束 #17DaysOfFlutter 的第二週,我們將在一個新的 Decoding Flutter 影片中,揭開 dart fix 的神秘面紗。

社群遊戲提交

透過分享您自己的遊戲來參與 Flutter 社群!從 1 月 14 日開始,您將有機會參與遊戲編碼挑戰。為 Learning To Fly 的 Doodle Dash 和遊戲 Codelab 增添新功能或敵人,提升它們的功能。您可以在 17DaysOfFlutter 網站上找到更多關於如何與社群分享您的遊戲的詳細資訊。

請務必在 Twitter 上關注 FlutterDev,以獲取有關 #17DaysOfFlutter 的更新。

(為什麼是 17DaysOfFlutter?Flutter 團隊的人決定在星期三開始 Flutter Forward,而我們希望至少能有兩個完整的星期來準備內容!)


加入我們參與 #17DaysOfFlutter 最初發佈在 Flutter 上的 Medium,人們在那裡透過突出顯示和回應這個故事來繼續討論。

【文章翻譯】How can we improve the Flutter experience for desktop?

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

基於 Mindy Hoover 和 Chris Bracken 於 2022 年進行的 Flutter 桌面使用者研究的見解和優先事項

2 月,Flutter 正式發佈了針對 Windows 應用程式的 [開發支援](https://medium.com/flutter/announcing-flutter-for-windows-6979d0d01fed),將其跨平台功能擴展到桌面。隨著 [Flutter 3](https://medium.com/flutter/introducing-flutter-3-5eb69151622f) 於 2022 年 5 月發佈,Flutter 宣布對 macOS 和 Linux 提供穩定支援,完成了桌面支援的三部曲!現在 Flutter 使用者已經有幾個月的時間可以嘗試這些新功能了,我們想知道:Flutter 如何才能更好地支援桌面開發人員?

為了回答這個問題,我們在 Q3 Flutter 調查中收集了來自 1,901 位 Flutter 桌面開發人員的數據。如果您在 8 月份參加了 Flutter Vikings,您可能會看到 UX 研究人員在焦點小組討論中與開發人員交談。以下是我們發現的內容,以及我們將如何利用這些內容來改進 Flutter。

您對 Flutter 在桌面上的滿意度如何?

平均而言,在 Windows、macOS 和 Linux 上,78% 的 Flutter 桌面開發人員表示他們對其開發體驗 *非常* 或 *相當滿意*。這個評分與 iOS 的滿意度(78%)持平,介於 Android(92%)和網頁(63%)之間。對於 Flutter 桌面來說,這是一個好消息!但它也引發了一個問題,對於其他 22% 的使用者,體驗在哪裡不足?

Bar chart of developer satisfaction with Flutter’s support of each target platform.
Satisfaction by target platform

桌面開發人員工作流程中最具挑戰的部分是什麼?

接下來,我們要求開發人員評估他們在軟體開發工作流程各階段的滿意度。結果顯示,滿意度在桌面應用程式開發流程中往往會下降。這導致使用者在 *除錯效能問題* 和 *部署應用程式* 時的滿意度最低。此外,根據調查和焦點小組的定性回饋,尋找適用於桌面的 Flutter 套件很具有挑戰性。

Line chart showing satisfaction on the y-axis and development stage on the x-axis. Satisfaction is high at the beginning when developers are seting up the environment, falls a bit when searching for documentation, and rises again when running and refreshing the app. Satisfaction steadily falls starting with debugging syntax and UI. Finally, it ends with the lowest satisfaction around debugging performance issues and deploying the app.
Flutter for desktop satisfaction by development workflow stage

Flutter 生態系統需要更多支援桌面的套件才能更好地支援桌面。(本文稍後列出了最受需求的套件。)我們正在努力開發新的支援桌面的 API(更多資訊請見下文),但我們無法做到所有事情。我們希望社群也能站出來提供幫助,透過建立新的套件和使用 [聯合外掛](https://docs.flutter.dev/development/packages-and-plugins/developing-packages#federated-plugins) 為現有套件添加桌面支援,例如。

我們知道排除效能問題不是一件有趣的事,但至少應該是一種令人滿意的體驗。我們的團隊正在努力改進 Flutter DevTools 的功能,特別是記憶體分析功能,以使排除效能問題變得更容易。例如,您現在可以使用 Flutter 的 DevTools 來 [比較記憶體快照](https://docs.flutter.dev/development/tools/devtools/release-notes/release-notes-2.20.0)!此外,請查看完全重寫的 [記憶體檢視頁面](https://docs.flutter.dev/development/tools/devtools/memory)。

Flutter 桌面開發人員告訴我們,部署桌面應用程式需要太多步驟。桌面團隊將對桌面應用程式部署進行任務分析,以確定我們可以在哪些地方改進應用程式部署流程和文件。

哪些內容可以幫助您製作更好的桌面使用者介面?

72% 的使用者同意「Flutter 的內建 Widget 可以建立適合桌面的 UI」。當我們詢問開發人員哪些內容可以幫助他們改進桌面應用程式的 UI 設計時,他們壓倒性地回答他們需要更好的支援:

  1. 自適應佈局(44%)
  2. 拖放(31%)
  3. 鍵盤快捷鍵(27%)
A horizontal bar chart of design feature requests for improving Flutter desktop apps. Adaptive layouts were most requested, followed by drag and drop, and keyboard shortcuts.
Which of the following could be improved to help you reach your design goals when using flutter to develop desktop apps?

我們努力讓 Flutter 成為最好的 *跨平台* 應用程式開發框架,因此這一直都是我們的首要任務。但是,改進「*自適應佈局*」是一個模糊的問題空間,會影響到每個目標平台,而不仅仅是桌面。此外,還存在許多因素,包括螢幕大小、作業系統、輸入設備(僅舉幾例),因此設計一個有用的解決方案並非易事。但我們的工程師正在努力,改進 [flutter_adapative_scaffold](https://pub.dev/packages/flutter_adaptive_scaffold) 套件並建立程式碼實驗室,引導您逐步了解如何有效地建立自適應應用程式。同時,請關注 1 月份的 [Flutter Forward](https://flutter.dev/events/flutter-forward),Greg Spencer 和 Justin McCandless 將討論如何使用現有的 Flutter 工具來架構自適應應用程式。

至於拖放和鍵盤快捷鍵,我們已經關注它們一段時間了。實際上,[Shortcuts Widget](https://api.flutter.dev/flutter/widgets/Shortcuts-class.html) 最近已發佈。您可以在最近的「[Widget of the Week](https://www.youtube.com/watch?v=6ZcQmdoz9N8) 集數」中看到它在行動。最後,拖放支援是我們在 2023 年的首要任務之一!

哪些套件可以使 Flutter 桌面開發變得更簡單?

桌面套件的支援還沒有趕上行動和網頁。桌面開發人員最需要的套件是:

  1. 多視窗(35%)
  2. 原生控制項(32%)
  3. 本地儲存(24%)
  4. 網頁檢視(23%)
Horizontal bar chart showing API requests for desktop with the most requested being multi-window and native controls. They were followed by local storage, web views, database access, and Firebase storage.
Which APIs or features do you wish were better supported by Flutter?

此回饋與 Flutter 目前的優先事項清單密切相關,其中包含針對多視窗、原生選單和網頁檢視的 API。在這些 API 發佈後,我們可以開始優先考慮對本地數據儲存和數據庫存取的解決方案。一些目前優先順序較低,但仍值得考慮的其他套件需求是音訊/影片播放器和音訊/影片設備。在 Flutter Vikings 的焦點小組討論中,出現了對支援剪貼簿管理和複雜輸入設備(例如 3D 滑鼠、遊戲手柄控制器)套件的需求,但沒有包含在季度調查中。

如果您有興趣為桌面的 Flutter 套件做出貢獻,請考慮透過建立套件來填補這些空白,或提交 PR 到現有套件,來幫助發展 Flutter 生態系統。我們相信,透過共同努力,Flutter 套件生態系統將會成長並適應,以更好地支援桌面開發人員。

還需要哪些額外的桌面文件?

最後一個調查類別涵蓋了 Flutter 的桌面文件。對 Flutter 桌面文件的滿意度比 Q3 中對 Flutter 其他文件的滿意度低 13%。接下來,我們詢問了哪些文件可以幫助簡化桌面開發流程。最受需求的文件主題是:

  1. 發佈應用程式(43%)
  2. 自動更新(42%)
  3. 外部函數介面 (FFI)(42%)

此回饋對優先考慮 2022 年第四季度和 2023 年的文件工作非常有幫助。因此,我們的團隊目前正在草擬文件以幫助桌面開發人員發佈他們的應用程式,並包含一個幾乎完成的實用 [程式碼實驗室](https://github.com/flutter/codelabs/tree/main/ffigen_codelab)!雖然自動更新不是我們為 Flutter 維護的功能,但 Flutter 生態系統中有一些 [社群](https://pub.dev/packages/auto_updater) [套件](https://pub.dev/packages/squirrel) 提供了此功能。因此,它不是我們優先考慮提供額外套件的項目。請參閱 [pub.dev](http://pub.dev) 以獲取自動更新套件及其相關文件。

A horizontal bar chart showing documentation requests for desktop with publishing apps, automatic updating, and FFI being the most requested.
Which of the following desktop-specific topics do you wish was better documented?

下一步是什麼?

在 2023 年,Flutter 團隊將根據您的回饋優先考慮工作。我們正在積極研究多視窗和原生選單列的解決方案。拖放也是我們的首要任務之一。正在進行任務分析,以確定如何使應用程式部署更有效率;有關此主題的額外文件即將推出。我們還正在努力改進 Flutter DevTools,以便您更好地監控應用程式效能並修復記憶體洩漏。最後,我們正在建立程式碼實驗室並調查對 flutter_adaptive_scaffold 套件的改進,以幫助開發人員使用 Flutter 建立自適應的跨平台應用程式。

現在我們已經設定了基準,我們將實施這些改進,並與 Flutter 開發人員聯繫以衡量我們的成功。因此,請關注未來的 Flutter 調查!

感謝所有在 Q3 Flutter 調查中提供桌面回饋的人,並感謝那些抽出時間在 Flutter Vikings 與我們交談的人!您的回饋意見價值連城。如果您希望參加季度調查之外的未來研究,您可以 [註冊參加即將舉行的 UX 研究](https://docs.google.com/forms/d/e/1FAIpQLSe0i4De809KXVCdljGKrjMj3lxhuzbuFKCtY5PEQPCYtGxFMg/viewform)。


我們如何改進 Flutter 的桌面體驗? 最初發佈在 Flutter 上的 Medium,人們在那裡透過突出顯示和回應這個故事來繼續討論。

http://creativecommons.org/licenses/by/4.0/

【文章翻譯】What we learned from the Flutter Q3 2022 survey

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

關於 Firebase SDK、快速修復和重構,以及目標平台

在過去的幾年中,超過 10,000 名 Flutter 開發人員參與了每季度的使用者調查,以提供回饋給 Flutter 團隊。最近一季也不例外——Flutter 團隊希望收集開發人員關於四個主題的回饋:1)Firebase SDK,2)快速修復和重構,3)目標平台,以及 4)桌面支援。在這些主題中,調查向每位受訪者展示了兩個隨機主題。感謝所有回覆的開發人員!

本文將涵蓋前三個主題的結果。我們將在另一篇文章中涵蓋最後一個主題(桌面開發)。

在深入探討前三個特殊主題的結果之前,我們想報告一下 Flutter 開發人員仍然非常喜歡這個框架。在調查的受訪者中,55% 的人對 Flutter 非常滿意,另外 38% 的人對 Flutter 有點滿意。這使得滿意的開發人員總數達到 93%。這個數字在過去三個季度一直很穩定。非常滿意 的開發人員比例略微下降至 55%。我們計畫追蹤這個指標,並研究是什麼可能導致開發人員的滿意度從 非常滿意 降至 有點滿意

圖 1. 對 Flutter 的滿意度隨時間推移

圖 2 所示,我們的受訪者非常喜歡核心框架、Android 支援和 Material Widgets。我們最大的機會在於 Cupertino Widgets 和 Web 支援。我們將繼續研究改善這些領域的開發人員體驗所需做的事情,並進一步投資以推動其進步。如果您想參與未來的使用者研究,可以在 flutter.dev/research-signup 上註冊。

圖 2. 對子系統的滿意度

Flutter 的 Firebase SDK

Flutter 開發人員使用 Flutter 的 Firebase SDK(又名 FlutterFire)來使用 Firebase 提供的工具和服務。這些包括驗證、資料庫、分析和訊息。目前,在 pub.dev 上有十五個穩定的 Firebase Plugin 套件 可用。由於這些套件被廣泛採用,我們想探討一下什麼樣的學習材料能夠提高其可用性。

我們學到的最有用的資訊是開發人員在嘗試使用各種 Firebase 套件時遇到的問題。如 圖 3 所示,開發人員指出「缺乏實際範例」是他們在嘗試使用新的 Firebase 套件時遇到的最常見問題(14.2%)。這對於具有許多活動部件的複雜套件來說尤其成問題,例如 firebase_messaging 或 firebase_dynamic_links。為了解決這個問題,我們將在 Firebase 文件 中加入更多範例應用程式。我們將加入兩種類型的範例應用程式。第一種,「快速入門範例」將涵蓋特定 Firebase 套件的使用。第二種將提供更複雜的實際範例應用程式,這些應用程式使用多個 Firebase 套件。

圖 3. 採用 Flutter 的新 Firebase SDK 時遇到的問題

在調查中,一些開發人員還選擇了「API 設計過於複雜或不方便」。這個結果在許多套件中都一致,例如 firebase_database、firebase_in_app_messaging,包括前一節中提到的套件。我們發現這個結果值得注意。雖然一些 API 很簡單且很小,但它們涵蓋的概念,例如異步資料,並不像那樣簡單。有鑒於此,我們將努力簡化學習材料。此外,我們還將努力使新舊 API(用於工具和服務)盡可能易於理解。

「總體而言,文件品質很低」是前三個問題中的最後一個。為了回應這個需求,我們計畫改善 Flutter 開發人員的 Firebase 文件。我們將在 Firebase 文件中為 Firebase UI 套件(例如 Firebase UI for Auth)新增新章節,並在整個文件中新增更多程式碼範例。這些改進將在未來幾個季度陸續推出。

快速修復和重構

2022 年的第一個調查 中,開發人員指出,快速修復和重構是我們 IDE 中最缺乏的或支援不足的功能。如 圖 4 所示,我們在 IDE 中支援快速修復和重構,但我們想了解開發人員為什麼認為 IDE 缺少或沒有支援這些功能。

圖 4. VS Code 中的快速修復和重構

首先,我們了解到超過一半的受訪者認為快速修復和重構運作良好(53.1%),如 圖 5 所示。然而,34.6% 的人表示需要新增更多功能。這個數字幾乎是要求我們修復錯誤的開發人員人數的三倍(12.4%)。

圖 5. 快速修復和重構的當前狀態

然後,我們詢問那些想要新增功能的人,他們需要哪種類型的快速修復或重構功能。在設計這個問題之前,我們審查了所有相關的 GitHub 議題,並進行了一項簡短的 Twitter 調查,將各種功能請求分組。您可以在 圖 6 中看到這些組別的列表。

圖 6. 快速修復和各種重構功能的重要性

從這個問題中,我們了解到受訪者認為新增更多快速修復以「修復編譯錯誤、警告或 lint」比其他修復更重要(76.4% 「非常重要」),儘管這並沒有降低其他功能的重要性。我們還了解到,受訪者認為「提取或移動 Widget」比其他重構更重要(69.2% 「非常重要」)。我們現在知道,儘管我們支援提取和移動 Widget,但開發人員想要更多選項,例如將 Widget 提取到一個新檔案中。這與提交的許多 GitHub 議題相符:flutter/flutter-intellij/issues/5591Dart-Code/Dart-Code/issues/1831flutter-intellij/issues/4540dart-lang/sdk/issues/35767 等等。此外,開發人員還想要更多用於重構函式庫、類別或方法(61.9% 「非常重要」)以及管理匯入(59.7% 「非常重要」)的功能。

所有這些資訊對 Dart Analyzer 團隊非常有價值,他們將審查診斷資訊,以找出更多修復的機會。該團隊已經開始為診斷資訊新增一些新的修復(將與 Dart 2.19 一起發佈),並計畫在未來版本中新增更多修復。

目標平台

Flutter 開發人員可以為六個平台建立可生產的應用程式:Android、iOS、Web、Windows、macOS 和 Linux。在調查的這一部分中,我們想知道開發人員針對了這六個平台中的哪幾個平台,以及他們是否在團隊層級使用 Flutter 進行跨平台開發。我們的問題首先詢問開發人員在哪些平台上編寫程式碼,然後詢問他們的團隊針對了哪些額外的平台。

圖 7 所示,大多數開發人員針對的是 Android (91.7%)、iOS (61.3%) 和 Web (35.5%)。由於這個問題允許多選,因此有一些重疊。統計選取的平台數量,只有 24% 的開發人員在上個月只針對了一個平台。在受訪者中,76% 的人針對了兩個或更多平台,其中 32% 的人針對了三個或更多平台。

圖 7. 開發人員正在積極建立和應用程式的目標平台

此外,我們想知道有多少開發人員屬於開發團隊,團隊成員針對的平台與他們自己不同。例如,開發人員 A 針對 Android,而開發人員 B 針對 iOS。如 圖 8 所示,40% 的開發人員表示他們有同事正在針對與他們不同的平台工作。當我們篩選出那些表示他們自己只針對一個平台的開發人員時,這個數字上升到 61%。

圖 8. 針對額外平台的團隊成員

合併起來,我們可以計算出 91% 的 Flutter 團隊是活躍的跨平台開發團隊(24%*0.61 + 76%)。至少有 72% 的受訪者為 Android 和 iOS 開發了應用程式。在所有受訪者中,34% 的人針對了 iOS、Android 和 Web,12% 的人針對了 iOS、Android、Web 和 Windows。

接下來要做什麼?

我們希望提供一個很好的開發體驗,最大限度地提高生產力。我們從這項調查和其他調查中獲得的見解非常有價值。我們將利用這些結果來優先處理工程任務和對 Flutter 開發人員有用的教育內容。

我們將在 2023 年回來,帶來更多調查結果。在那之前,我們將發表一篇獨立的文章,介紹我們從桌面支援研究中學到的東西。下一篇文章見!


我們從 Flutter 2022 年第三季度調查中學到了什麼 最初發佈在 Flutter 上的 Medium,人們在那裡透過突出顯示和回應這個故事來繼續討論。

【文章翻譯】The road to Dart 3: A fully sound, null safe language

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

Dart 3 之路:完全可靠的空安全語言

在過去的四年裡,我們將 Dart 發展成為一種快速、可移植且現代化的語言。我們的下一個版本 Dart 3 將完成到完全可靠的空安全語言的旅程。作為這段旅程的最後一步,我們將移除幾個歷史悠久的 Dart 語言和 SDK 工件,包括移除對在沒有可靠空安全的情況下運行的支援。這使得 Dart 更易於學習,並使我們能夠更快地發展 Dart SDK 以支援新功能。要了解 Dart 3 中的主要變化以及如何最好地準備您的應用程式和套件,請继续阅读!

通往 Dart 3 的道路。 (照片由 Niklas Ohlrogge Unsplash 上拍攝)

為什麼要使用可靠的空安全?

許多現代程式語言都支援空安全(也稱為void 安全)。這可以避免空解引用問題,Tony Hoare 將其稱為十億美元的錯誤:「這導致了無數的錯誤、漏洞和系統崩潰,在過去的四十年裡可能造成十億美元的痛苦和損失」( Hoare 2009)。為了解決這個問題,像 Swift、C# 和 Kotlin 等語言支援一種類型系統,您可以將變數宣告為非空永遠不能包含空值)或可空(可以包含值或空值)。這種類型系統可以與靜態分析結合使用,以檢測任何將空值賦值給非空變數的情況。Dart 語言中的空安全支援使用類似的模型,預設情況下變數是非空的,並且只在明確宣告時才允許空值。

更進一步,Dart 在現有語言中引入了可靠的空安全。一個可靠的系統可以保證非空變數永遠不包含空值。在 Dart 空安全的早期規劃中,我們探討了這個主題,以及其他語言所做的權衡。Swift 的設計從一開始就包含了可靠性。TypeScript 本質上是不可靠的,因為它的底層類型系統允許將任何物件視為任何靜態類型。正如您在此 TypeScript 範例中看到的,我們可以將空值賦值給非空變數。出於人體工程學和避免遷移所有現有程式碼的原因,C# 對其空檢查有幾個例外。Kotlin 有幾個不可靠的例外,部分原因是它旨在與 Java 互操作。正如您在此 Kotlin 範例中看到的,泛型可能會觸發空值流入宣告為包含非空元素的列表的情況。

對於 Dart,我們選擇了可靠空安全的路徑。這涉及到一個權衡。在少數情況下,這使得遷移到空安全的成本更高,但會產生一個可靠的類型系統,可以完全信任非空類型註釋。我們可以在我們的編譯器和執行時中基於類型系統的空值方面進行實作優化。我們確切地知道變數何時不為空。我們認為這些是 Dart 的正確權衡。

在 Dart 3 中,所有 Dart 程式碼都將使用可靠的空安全

追蹤議題:SDK #49530

自從我們在Dart 2.12 中將空安全引入 Dart 語言以來已經三年了。如上一節所述,我們認識到遷移現有 Dart 套件和應用程式所需的影響。為了幫助遷移,Dart 支援以三種方式運行您的應用程式程式碼。它可以在沒有空安全的情況下運行,在具有部分空安全的混合模式下運行,或在完全可靠的空安全的情況下運行。當 100% 的程式碼(包括所有依賴項)已遷移時,就會出現完全可靠的空安全。這讓 Dart 開發人員有時間逐步遷移現有程式碼。然而,支援多種模式會增加開銷和複雜性。

首先,Dart 開發人員需要注意所有三種模式。每當您閱讀一段 Dart 程式碼時,您必須檢查語言版本以查看類型預設是否為非空、預設是否為可空,或兩者兼而有之。

其次,在我們的編譯器和執行時中支援所有三種模式會減慢 Dart SDK 的發展速度。這種支援會增加新增功能的成本和複雜性。

在 Dart 3 中,可靠的空安全將是,如前所述和前所述的,唯一支援的模式。在 Dart 3 及更高版本中,SDK 約束下限小於 2.12 的 Pubspec 檔案將停止解析。當您將約束設定為小於 2.12 時,任何包含語言標記的原始程式碼都將失敗(例如 // @dart=2.9)。

根據我們的遙測數據,我們認為目前大約 85% 的 flutter run 執行都使用可靠的空安全。如果您有剩餘 15% 的應用程式或套件,請在 Dart 3 發佈之前遷移,我們預計將在 2023 年年中左右發佈。

我們理解遷移大型程式碼庫可能需要一些時間。我們相信您會發現遷移是值得的。BMW 最近遷移了他們的主要 MyBMW 應用程式,一個非常大的應用程式,由大約 300 名開發人員組成的團隊建立:

_”雖然對於像 MyBMW 應用程式這樣的大規模程式碼庫來說,遷移到空安全肯定並不容易,但 Google 的工具為我們在遷移過程中提供了巨大的幫助。完成遷移後,我們很高興擁有一個錯誤更少的程式碼庫。”_,Christian Schmid,BMW AG

要了解有關遷移的更多資訊,請觀看以下影片,或查看遷移指南

重大語言和 API 變更

除了空安全變更之外,我們還進行了一些其他變更,以移除 Dart 語言和核心函式庫 API 中的歷史工件。這些變更包括移除已停止使用的核心函式庫 API ( #49529)、移除預設參數值的歷史語法 ( #2357),以及要求 tear-offs 是顯式的 ( #2399)。

我們相信這些變更對已遷移到使用空安全的程式碼影響很小。當我們發佈第一個 Dart 3 alpha 版本時,您將能夠快速測試這些較小的重大變更是否適用於您的套件或應用程式。

Dart 3 的新功能

Dart 3 預計還將包含許多新功能,包括改進與其他程式語言的互操作性和新的語言功能。我們將在 2023 年 1 月 25 日的下一個重要活動 Flutter Forward 上詳細討論這個主題。

讓我們來預覽一下一個稱為模式的語言功能。模式使 Dart 語言更具表現力,增加了對更多結構化資料的支援,並透過代數資料類型實現更實用的風格。

以下程式碼顯示了一個在函數上使用多個返回值的範例,以及將這些返回值解構為單個變數的功能:

我們將在明年初分享更多關於此新功能的詳細資訊。要查看預覽,您可以查看語言規範

Dart 3 之後

我們同時致力於許多潛在的新功能,從構思到實驗再到潛在的發佈。因此,一些目前的工作將在 Dart 3 之後完成。

首先,正如我們去年提到的,我們正在致力於支援將 Dart 程式碼編譯為 WebAssembly (Wasm)。Wasm 使 Flutter Web 應用程式能夠在瀏覽器中以完全原生程式碼運行。這是一項龐大的工作,需要的不僅僅是更新 Dart 編譯器。它需要與 W3C 和瀏覽器供應商合作,透過 WasmGC 擴展,在 Wasm 中增加對垃圾回收語言的支援。

其次,我們正在致力於巨集。這些啟用了靜態元程式設計。這種強大的機制允許一段程式碼(巨集)在編譯程式期間修改和擴展程式的原始程式碼。例如,這可以減少反序列化 JSON 或建立資料類別所需的樣板程式碼。

您應該期待在 Dart 3 之後看到這些功能和其他令人興奮的功能。

通往 Dart 3 的道路

如前幾節所述,如果您尚未遷移到可靠的空安全,那麼這是第一步。我們建議您現在就這樣做!

接下來,Dart 3 將透過一系列里程碑推出。我們目前的預期圍繞著這些日期:

  • 2023 年 1 月/2 月左右:Dart 3 alpha 發佈。它側重於啟用早期的 Dart 3 相容性測試。我們預計您將能夠運行靜態分析 (dart analyze / flutter analyze)。我們的目標是任何通過 Dart 3 alpha 靜態分析的應用程式或套件都應支援 Dart 3 穩定版。
  • 2023 年 3 月/4 月左右:Dart 3 beta 發佈。此版本預覽了 Dart 3 中的新功能。您可以使用它來試驗新功能,並就問題或改進建議提供回饋。
  • 2023 年年中左右:Dart 3 穩定版發佈。可靠的空安全成為唯一支援的模式。

總結

Dart 3 版本預計在 2023 年年中左右發佈。它將包含幾個重大變更,主要是停止在沒有可靠空安全的情況下運行。我們希望在 2023 年 1 月或 2 月左右準備好 Dart 3 alpha 版本,您可以用於 Dart 3 相容性測試。

要準備您的應用程式:

  • 完成任何未完成的空安全遷移
  • 驗證您的程式碼沒有使用任何已棄用的 API
  • 運行 dart fix

Dart 3 還將包含幾個新的強大功能,例如模式。我們希望在春季發佈 Dart 3 beta 版本,以展示所有新功能。


通往 Dart 3 的道路:完全可靠的空安全語言 最初發佈在 Dart 上的 Medium,人們在那裡透過突出顯示和回應這個故事來繼續討論。

【文章翻譯】Supporting six platforms with two keyboards

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

使用兩個鍵盤支援六個平台

A beautiful sunrise on an idyllic beach. Waves calmly lapping at your toes.

Flutter 的魅力在於輕鬆地為六個平台開發應用程式。痛苦之處在於在六個平台上驗證你的應用程式。

我正在撰寫一個程式碼實驗室,使用 Dart 的外部函式介面 (FFI) 整合來自 iOS、Android、macOS、Linux 和 Windows 的 C 程式碼。這個故事描述了如何在不淹沒我的書桌在裝置的情況下,為 Flutter 支援的所有平台開發。

接受你需要不止一台機器。當你計劃至少在六個平台的子集中建立你的應用程式時,請考慮這並沒有聽起來那麼糟糕。

我可以用兩台機器在六個平台上開發應用程式:一台 macOS 筆記型電腦和一台 Windows 11 桌機。此外,我還有兩個鍵盤、一隻滑鼠和一個魔法觸控板。

以下說明為什麼你需要這兩個平台。

從顯而易見的開始:你需要一台 macOS 機器來為 macOS 和 iOS 開發。蘋果是這麼說的。在 Windows 上為 Windows 開發。這是 Flutter for Windows 預設支援的,因此它是鋪好的道路。Flutter 支援在 macOS 或 Win11 或兩者上進行 Web 和 Android 開發。出於鍵盤熟悉度的原因(我在 macOS 上已經超過十年了),我使用 macOS。

Windows 11 上的 Windows Subsystem for Linux 版本 2 或 WSL2 避免了我需要三個完整的鍵盤。當你在 Ubuntu Summit 上向滿屋子 Linux 狂熱者發表關於 WSL2 的主題演講時,你開始理解過去二十年世界發生了多大的變化。

WSL2 中的 Linux 支援超越了運行圖形化 Linux 應用程式。Visual Studio Code 為 WSL2 主機開發提供了出色的支援。WSL2 在其 Linux 環境內運行 VS Code 的無頭版本,並從 Windows VS Code 實例控制它。這使得 Windows 和 Linux 開發可以在一台機器上進行,使用相同的鍵盤快捷鍵,即使檔案系統佈局不同。

話雖如此,不要嘗試從一個共用的檔案區域運行 Flutter Windows 和 Linux 開發。是的,WSL2 允許你從 Linux 查看 Windows 檔案系統,以及從 Windows 查看 Linux 檔案系統。但是,Dart 將不知道使用哪個二進制檔。另一個小問題是你的原始碼檔案中的行尾也會被混淆。使用 Git 將程式碼傳輸到 Linux 和 Windows 之間,並配置 適當的行尾對映。你的理智會感謝你。

如果你想在 Flutter 支援的所有平台上開發 Flutter,請幫自己一個忙,同時取得一台 macOS 機器和一台 Windows 11 機器。你的編譯時間會感謝你的。


使用兩個鍵盤支援六個平台 最初發佈在 Flutter 上的 Medium,人們在那裡透過突出顯示和回應這個故事來繼續討論。

http://creativecommons.org/licenses/by/4.0/