Flutter Monthly #2020/05

Flutter Taipei
Flutter Taipei
Published in
13 min readMay 29, 2020

這個月的內容非常豐富,月初發佈的 Flutter 1.17、Dart 2.8,還有六月的 Flutter Day、Flutter Hackathon,以及 App 蒐集企劃開跑後的撰文,一起來看看吧!

What’s new in Flutter 1.17 ?

Flutter Team 在 5/6 發佈今年的第一個 stable release,無論新增的功能或修正的問題,重點都圍繞在質量提升,包含改善效能以及應用程式的輸出大小,都在強化使用者體驗。

Metal support for faster iOS performance

Metal API 從 2014 年開始在 iOS 平台上開始支援,是 Apple 自行研發的繪圖 API,要取代以往的 OpenGL,藉著 GPU 的取用,優化 Apple 產品在影像處理上的能力及效果。預設在支援 Metal 的手機上,平均可以提升 50% 的渲染速度。

Mobile performance and size improvements

前面提到的項目帶來更快速的動畫,此外還有更小的應用程式 — 舉例官方的 Flutter Gallery 較去年底 9.6 MB 的版本減少 18.5% 的大小。更低的內存使用率 — 改善如以往在快速滾動模式下瀏覽圖片佔用內存的問題,約減少 70%。

New Material components

每次更新都少不了新的 Widget,這次依據 Material Design 所更新的 Widget 有 NavigationRail 和 DatePicker 兩種,以及一些小細節讓開發者更容易為使用者帶來更好的視覺與操作體驗:

NavigationRail( 左 )、DatePicker( 右 )- 圖片來自 Material Design

NavigationRail ( sample )
以往在 App 裡面最常見的功能清單設計有 DrawerBottomNavigation,Navigation Rail 是響應式的導覽列,能響應不同尺寸的裝置,切換導覽列的位置、收合或縱橫,十分符合 Flutter Octopus 的概念。

DatePicker
Material Date Picker Redesign 做出了更新,加入了文字輸入。

Text selection menu
iOS 和 Android 裝置都有選取文字的功能,這次更新改善了以往 Flutter App 在一些字數較長語言上,選取文字後跳出的清單顯示會超出螢幕的問題。

Updated text selection overflow on Android

Animation package
Flutter 一直以來在動畫設計部分都十分友善開發者,這次發佈的 animation package 也是如此,雖然都是 Flutter 原先就支援 Material Motion 的動畫操作,根據官方的說法,animation package 再簡化了實現步驟。還在等什麼呢?快試試看吧!

Material Motion 定義的 Container transition

Material Text Scale
一般為了 App 視覺上的統一性,我們會在 MaterialApp 下的 theme 定義 ThemeData,提供整個 App 取用。TextTheme API 加入 Material Text Style 的名稱和定義,開發者只需要使用 Theme.of(context).textTheme.* 就可以使用 Material Design 定義的字型規範。

Google Fonts for Flutter
google_fonts package 從去年底在 Flutter Interact 亮相到現在,終於到了 v1.0.0 的正式版本階段。在開發階段可以隨意取用 fonts.google.com 上的任何字體,等到要發佈的時候再來決定要將自己包在應用程式中,或者透過 API 動態加載。

Google Fonts 對 Flutter App 開發上的支援十分方便

New network tracking tooling

DevTools 的更新已在 Flutter stable 上,開發者們想使用不需要再切換 channel 了!DevTools 提供許多幫助測試和除錯的好用工具,可以在 Run 的視窗上點擊 Dart 的 Icon 來啟動。

Network traffic Recording
breaker 之下新增的 Network 標籤,能啟動網路流量紀錄的功能。

DevTools — Network demo

Fast start for Android
fast start 讓 App 在透過下面的指令,在 Android 裝置上 debug 時候的啟動速度能較原來快 70%:

flutter run — fast-start -d <android-device>

原理是根據 plugin code 來安裝一個 generic Android App,而不包含任何 Dart 程式碼或 assets,所以每次重新執行 flutter run 的時候,APK 便不需要 rebuild,而是將 App 打包放置在 generic Android App 上執行,並非真的安裝,來達到快速的效果。但也因此在某些情況下不適用。

Breaking Changes

這次更新解決了 6,339 個問題,合併了 231 位 contributor 3,164 個 PR。更多的細節內容可上 flutter.dev 上找到所有的 change log。

中文翻譯可以參考這裡 :

What’s new in Dart 2.8 ?

Dart 2.8 的更新也很致力於協助開發者更友善方便的開發工具和語言特性,特別是在 pub tool 上做到效能提升。

Breaking changes paving the way for null safety

許多程式語言都具備 null-safety 的特性,而 Dart 也持續朝著這個目標邁進。為了讓開發者能用較短的程式碼建構 null-safety 的環境,必須改動到一些 Dart core library,因此官方也提供 breaking change 清單參考。下面連結分享給想要體驗 null-safety 的讀者:

A higher quality package ecosystem

pub.dev 上將近一萬個 package,讓 Flutter 或 Dart 的專案開發更方便。官方也提供不同的機制在幫助開發者找到想要實現功能的套件:

  1. improved pub.dev discovery
  2. verified publishers
  3. Flutter Favorites

Managing dependencies with pub outdated

我們常使用的 dart pub tool 都知道是在做什麼操作嗎?

Use pub outdated tool

過去我們使用 pub upgrade 來更新版本,而 pub outdated 這個新指令會判斷專案中所引用的 packages 是否需要更新版本。差異在於,前者只會讀到小版本的更新,對於 pub.dev 上的 package 更新主版本號不會有反應,後者就是拿來與 pub.dev 上的版本做判斷,列出新的版本號,確認後由開發者手動更新 pubspec.yml。

Flutter Video

AboutDialog

AboutDialog 不同於一般 Dialog,是專門的對話框讓開發者放置 App 或企業相關的資訊,例如版本、license 等,透過 showAboutDialog 來設置。

Flutter Widget of the Week — AboutDialog on Flutter YouTube channel

CheckboxListTile

前面 Flutter Widget of the Week 介紹過 ListTile 屬於 Material Design 的樣板,可以很快速的讓開發者帶入資料使用。CheckboxListTile 其實就是 Checkbox + ListTile,變成可以自帶文字和圖示的選項。

Flutter Widget of the Week — CheckboxListTile on Flutter YouTube channel

Padding

Padding 應該是很常用到的 widget,和 margin 不同。當一個 widget 設定 padding 時,是以該 widget 本身的大小內縮不同方位的 space,所以物件是變小的;而 margin 是以該 widget 向外騰出空間,尺寸不變。

Flutter Widget of the Week — Padding on Flutter YouTube channel

精選文章

  • Flutter 多國語系與在地化
    App 的多國語系除了根據使用者的手機系統本身,有些應用也會設計成在 App 內作切換,除了官方的說明文件,也可以同時參考這篇筆記。

Flutter Taipei 本月投稿文章

App 蒐集企劃文章

這個月 Flutter Taipei 的志工整理了兩篇專訪,分別是事必得科技的「Babu」和 Tom 獨立為毛小孩開發的「幫我回家」。如果你也有興趣,想要更了解企劃內容可以點擊這篇文章讓我們為你做說明!

活動資訊

Flutter Day

活動時間 24 小時,在線上進行。分成三場不同的會議,內容關於本季發表的深入探討,另外還有 codelabs 和 Q&A,皆由 Flutter team 官方主持
時間:台北時間 6 / 26 凌晨一點

Flutter Hackathon

由 Flutter 社群所舉辦的非官方 Flutter 國際馬拉松,也是線上活動。目前時間定在 6 / 27、28,資訊還沒有很多,詳情可以 follow 各地 GDG 或 Flutter Taipei 臉書社團!

Flutter Hack20

--

--

Flutter Taipei
Flutter Taipei

Published in Flutter Taipei

Flutter 每月新資訊摘要、相關技術文章分享、活動紀錄。定期於台北舉辦 Flutter 相關技術活動,相關資訊:https://linktr.ee/flutter.taipei

Flutter Taipei
Flutter Taipei