RainVisitor Blog

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

原文：https://medium.com/dartlang/announcing-dart-2-8-7750918db0a

宣布 Dart 2.8：更快的套件工具，新的工具確保相依性永不過時

今天，我們宣布推出 Dart SDK 的新版本 2.8。我們持續看到 Dart 社群的驚人成長；現在我們有 數百萬 Flutter 開發人員 使用 Dart 作為他們客戶端優化的語言，在任何平台上構建快速的應用程式。雖然我們仍在努力完成 即將推出的空安全 功能，使 Dart 成為構建快速且穩定的使用者介面的更優化語言，但我們也有一些令人興奮的新功能，專注於讓開發人員在管理相依性時更有效率。

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

原文：https://medium.com/flutter/modern-flutter-plugin-development-4c3ee015cf5a

現代 Flutter Plugin 開發

作者：Amir Hardon, Chris Sells, Collin Jackson, Harry Terkelsen 以及 Matt Carroll

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

原文：https://medium.com/flutter/flutter-web-support-updates-8b14bfe6a908

Flutter Web 支援更新：PWA、改進的除錯和基於 CanvasKit 的渲染

快速說明：我們原本計畫今天發佈 Flutter 的新穩定版本，但我們在最終測試中發現了一個 崩潰錯誤，我們希望在發佈之前解決這個錯誤。我們已將修復程式碼提交到程式碼庫中，但我們希望讓它多燒一點時間，以確保我們沒有引入新的迴歸。我們現在計畫在下週發佈穩定版本。感謝許多報告問題並與我們合作重現問題的人。

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

原文：https://medium.com/flutter/introducing-google-fonts-for-flutter-v-1-0-0-c0e993617118

介紹 Flutter 的 Google Fonts v 1.0.0！

由 Anthony Robledo 和 MH Johnson 撰寫

Flutter 的 Google Fonts 最初於 2019 年 12 月的 Flutter Interact 上宣布。在社群的幫助下（感謝大家！），我們添加了許多新功能並提高了穩定性。在 Beta 測試取得成功後，它現在已準備好作為 Google Fonts 1.0.0 在 Android、iOS、Web 和 MacOS 上投入使用。

自 Beta 測試以來添加的功能：

• 使用 GoogleFonts.asMap() 獲取所有支援字體的清單
• 使用動態名稱的字體：GoogleFonts.getFont('Lato')
• 使用校驗和驗證確保安全下載
• 體驗效能提升，特別是在 Web 上
• 使用 pubspec 資產預捆綁字體
• 選項性地停用在執行時提取字體（在偵錯或預捆綁時有用）

Google Fonts 允許開發人員輕鬆地在他們的應用程式中嘗試和使用 fonts.google.com 上的任何字體。當應用程式準備發佈時，開發人員可以決定使用者是透過從 API 下載字體來接收字體，還是將字體預捆綁到應用程式套件中。

我們已將預捆綁字體所需的工作減至最少，並且使其與動態字體載入相容，因此如果您決定預捆綁，您無需更改程式碼。

請查看 入門指南，以了解如何透過 TextStyles 或 TextThemes 將字體包含到您的應用程式中。當您準備發佈時，請了解如何選項性地預捆綁字體並將字體許可添加到應用程式的 LicenseRegistry 中。

我們希望您發現此套件對您所有 Google Fonts 的需求都很有用。與往常一樣，請隨時留下回饋、提交議題 或開啟提議請求！

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

原文：https://medium.com/flutter/flutter-spring-2020-update-f723d898d7af

Flutter 2020 年春季更新

作者：Tim Sneath 和 Patrick Sosinski

對於我們 Google 的工程師、產品經理、使用者體驗研究員、技術作家和開發者關係工程師來說，過去幾個月充滿了各種挑戰；就像你們中的大多數人一樣，我們都在努力應對與平常非常不同的日常工作。儘管如此，作為一個開源專案，我們能夠繼續使用公開可用的工具進行開發。在有時具有挑戰性，當然也是新穎的工作環境的限制下，以及需要照顧家人的需求，我們正在繼續根據我們的春季積壓工作取得進展，並且也從「外部」學習了許多關於貢獻的知識！我們希望您也能取得進展，並保持健康和安全。

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

原文：https://medium.com/flutter/animation-deep-dive-39d3ffea111f

動畫深探

去年我錄製了 Flutter 動畫系列中的其中一集，我想我會將相同的內容發佈給那些喜歡文字勝於視頻的人。

在這個系列的其他集中，我的同事們討論了在 Flutter 中建立動畫的所有實際方法。在我的那一集裡不是這樣。在這裡，您將學習如何以最不務實的方式實現動畫。（但同時您也會學到一些東西。）

讓我們從簡單輕鬆的東西開始：

什麼是運動？

你看，運動是一種錯覺。看看這個：

這是一個謊言。您實際上看到的是許多靜止的圖片以快速連續的方式顯示。這就是電影運作的方式。在電影中，這些單獨的圖片稱為幀，因為數位螢幕的運作方式類似，所以這裡也稱為幀。電影通常每秒顯示 24 幀。現代數位設備每秒顯示 60 到 120 幀。

因此，如果運動是謊言，那麼所有這些 AnimationFoo 和 FooTransition Widgets 到底在做什麼？當然，因為幀需要每秒構建高達 120 次，所以 UI 不能每次都重新構建。

還是可以？

事實上，Flutter 中的動畫只不過是在每一幀上重新構建 Widget 樹的一部分的方法。沒有特殊情況。Flutter 足夠快可以做到。

讓我們看看 Flutter 動畫的基礎構建塊之一：AnimatedBuilder。此 Widget 是一個 AnimatedWidget，它由 _AnimatedState 支援。在 State 的 initState() 方法中，我們正在監聽動畫（或者，如這裡所稱的 Listenable），當它更改其值時，我們會… 呼叫 setState()。

這就是了。Flutter 中的動畫只不過是快速連續地更改某個 Widget 的狀態，每秒 60 到 120 次。

我可以證明。這是一個從零到光速「動畫」的動畫。雖然它在每一幀上都更改文字，但從 Flutter 的角度來看，它只不過是另一個動畫。

讓我們使用 Flutter 的動畫框架從頭開始建立這個動畫。

通常，我們會使用 TweenAnimationBuilder Widget 或類似的東西，但在本文中，我們將忽略所有這些，而使用計時器、控制器和 setState。

計時器

讓我們先談談計時器。99% 的時間，您不會直接使用計時器。但是，我認為談談它仍然很有幫助，即使只是為了揭開它神秘的面紗。

計時器是一個針對每一幀呼叫函數的物件。

var ticker = Ticker((elapsed) => print('hello'));
ticker.start();

在本例中，我們會在每一幀中列印「hello」。誠然，這並不十分有用。

此外，我們忘記呼叫 ticker.dispose()，所以現在我們的計時器將永遠持續下去，直到我們關閉應用程式。

這就是為什麼 Flutter 會提供 SingleTickerProviderStateMixin，這個恰如其分的 Mixin 您在之前的幾個視頻中都有看到。

這個 Mixin 負責管理計時器的麻煩。只需將它添加到您的 Widget 的狀態中，現在您的狀態就默默地成為了 TickerProvider。

class _MyWidgetState extends State<MyWidget> 
    with SingleTickerProviderStateMixin<MyWidget> {

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

這意味著 Flutter 框架可以向您的狀態請求計時器。最重要的是，AnimationController 可以向狀態請求計時器。

class _MyWidgetState extends State<MyWidget>
    with SingleTickerProviderStateMixin<MyWidget> {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

AnimationController 需要計時器才能運作。如果您使用 SingleTickerProviderStateMixin 或其近親 TickerProviderStateMixin，您可以直接將其提供給 AnimationController，這樣就完成了。

AnimationController

AnimationController 是您通常用於播放、暫停、反轉和停止動畫的工具。與純粹的「滴答」事件不同的是，AnimationController 在任何時候都會告訴我們動畫的 進展 到達了哪一點。例如，我們是否已經走了一半？我們是否已經走到了 99%？我們是否已經完成動畫？

通常，您會使用 AnimationController，然後使用 Curve 進行轉換，再透過 Tween 處理，最後在其中一個方便的 Widget（如 FadeTransition 或 TweenAnimationBuilder）中使用它。但是，出於教學目的，我們不會這樣做。相反，我們將直接呼叫 setState。

setState

在我們初始化 AnimationController 之後，我們可以為它添加一個監聽器。在這個監聽器中，我們會呼叫 setState。

class _MyWidgetState extends State<MyWidget>
    with SingleTickerProviderStateMixin<MyWidget> {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this);
    _controller.addListener(_update);
  }

  void _update() {
    setState(() {
      // TODO
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

現在，我們可能應該有一個要設定的狀態。讓我們使用一個整數來保持簡單。而且不要忘記在我們的 build 方法中實際使用狀態，並根據控制器的當前值在我們的監聽器中更改狀態。

class _MyWidgetState extends State<MyWidget>
    with SingleTickerProviderStateMixin<MyWidget> {
  AnimationController _controller;

  int i = 0;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this);
    _controller.addListener(_update);
  }

  void _update() {
    setState(() {
      i = (_controller.value * 299792458).round();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Text('$i m/s');
  }
}

此程式碼根據動畫的進度將值從零分配到光速。

執行動畫

現在，我們只需要告訴動畫它應該花多長時間完成，並啟動動畫。

class _MyWidgetState extends State<MyWidget>
    with SingleTickerProviderStateMixin<MyWidget> {
  AnimationController _controller;

  int i = 0;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this, 
      duration: const Duration(seconds: 1),
    );
    _controller.addListener(_update);
    _controller.forward();
  }

  void _update() {
    setState(() {
      i = (_controller.value * 299792458).round();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Text('$i m/s');
  }
}

Widget 在被添加到螢幕上的那一刻就會開始動畫。它會在 1 秒內從零到光速「動畫」。

釋放控制器

哦，別忘了釋放 AnimationController。否則您的應用程式中就會有記憶體洩漏。

class _MyWidgetState extends State<MyWidget>
    with SingleTickerProviderStateMixin<MyWidget> {
  AnimationController _controller;

  int i = 0;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this, 
      duration: const Duration(seconds: 1),
    );
    _controller.addListener(_update);
    _controller.forward();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _update() {
    setState(() {
      i = (_controller.value * 299792458).round();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Text('$i m/s');
  }
}

也許直接使用內建的 Widget？

正如您所見，自己做所有事情並不好。使用 TweenAnimationBuilder 可以用更少的程式碼行實現相同的功能，而且不需要同時管理 AnimationController 和呼叫 setState。

class MyPragmaticWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return TweenAnimationBuilder(
      tween: IntTween(begin: 0, end: 299792458),
      duration: const Duration(seconds: 1),
      builder: (BuildContext context, int i, Widget child) {
        return Text('$i m/s');
      },
    );
  }
}

總結

我們看到了計時器到底是什麼。我們看到了如何手動監聽 AnimationController。而且，我們看到了動畫在基本層面上只是快速連續地重新構建 Widget。您可以在任何幀上做任何您想做的事情。

本文是系列文章的一部分！請查看這裡的其他文章：

• Flutter 動畫基礎與隱式動畫
• Flutter 中的自訂隱式動畫…使用 TweenAnimationBuilder
• 使用內建顯式動畫的定向動畫
• 什麼時候應該使用 AnimatedBuilder 或 AnimatedWidget
• 動畫深探（本文！）

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

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

原文：https://medium.com/flutter/announcing-codepen-support-for-flutter-bb346406fe50

宣布 CodePen 支援 Flutter

今天，我們很興奮地宣布，CodePen，數百萬前端開發人員和設計人員的首選社群開發環境，將加入 對 Flutter 的支援！對於 Web 開發人員來說，CodePen 長期以來一直是分享設計探索、新技術和想法的絕佳場所。現在，隨著 Flutter 的引入，CodePen 使新的受眾能夠學習、分享和推廣他們的創造力。

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

原文：https://medium.com/flutter/learn-flutter-for-free-c9bc3b898c4d

宣布免費 Flutter 入門課程

在我們共同度過當前全球危機的過程中，我們知道許多人正在尋找新的技能。我們想提供幫助，因此我們宣布與 App Brewery 合作，贈送 [Flutter 入門課程](https://www.appbrewery.co/courses/intro-to-flutter)，在未來三個月內啟用課程的人可以免費獲得課程。此課程不需要任何 Flutter 經驗，我們希望這能讓您有機會為 iOS、Android 和 Web 建立新的開發技能。

[Flutter](http://flutter.dev) 是 Google 的 UI 工具包，用於從單一程式碼庫中為行動、Web 和桌面建立美麗、原生編譯的應用程式。全球超過 [百萬開發人員](https://youtu.be/REJDzio_h7o) 正在使用它，從個人和新創公司到阿里巴巴、Capital One 和 eBay 等大型公司。

我們免費贈送 [Flutter 開發入門](https://www.appbrewery.co/courses/intro-to-flutter) 課程，在未來三個月內啟用課程即可獲得終身免費存取權。課程涵蓋了 Flutter 開發的基本概念，教您如何使用 Dart 編碼，並引導您建立九個可在 iOS 和 Android 上運行的真實應用程式，即使您沒有程式設計經驗。

課程講師 Angela Yu 帶領您逐步完成引人入勝的線上課程，讓您獲得實際的動手操作經驗，成為一名成功的 Flutter 開發人員。課程包含 10 多小時的影片教學和實驗室，在此期間您將建立程式設計知識，並製作出真實世界的應用程式，例如「自行選擇冒險」遊戲和測驗應用程式。您甚至可以建立一個樂器！

我們預計將有很多人參加此課程，因此我們也與 [Very Good Ventures](https://verygood.ventures)（頂級 Flutter 開發機構之一）合作，為相關的 Discord 頻道提供諮詢支援，協助您解決問題。

在本課程結束時，您將準備好開始建立自己的 Flutter 應用程式，並朝成為一名成熟的 Flutter 開發人員邁進。如果您完成了本課程，那麼 [App Brewery](https://www.appbrewery.co/) 上還有更多模組可供您進一步學習。您將在課程結束時獲得結業證書，以及一些應用程式的作品集，這些應用程式將教您 Flutter 和 Dart 的基礎知識。

我們希望很快在課程中看到您，並希望您使用 #FreeFlutterCourse 分享您的進度。

在此註冊：https://www.appbrewery.co/courses/intro-to-flutter

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

原文：https://medium.com/flutter/how-to-choose-which-flutter-animation-widget-is-right-for-you-79ecfb7e72b5

如何選擇適合您的 Flutter 動畫 Widget？

觀看此文章的影片版本，請點擊我們的 YouTube 影片。

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

原文：https://medium.com/flutter/flutter-web-navigating-urls-using-named-routes-307e1b1e2050

Flutter 網頁：使用命名路由導航 URL

命名路由可以用於導航 Flutter 行動應用程式中的頁面之間，但它們也適用於 Flutter 網頁應用程式中的 URL。本文將說明如何在您的應用程式中加入命名路由，以及如何自訂它們，以便在路由中進行模式比對。