Flutter Meetup #1 聚會有什麼?還有 Flutter 四月大小事!
這次活動 GDG Taipei 請到了之前在 Firebase 影片上看到的 Andrea Wu,她是一位在 Firebase 負責 Remote Config 的工程師,同時也會與實際使用者互動,蒐集反饋後再優化產品。感受到她對於工作的熱誠,做著自己喜歡的事情,那種滿足從語氣中能感受得到。跟她互相分享生活以及想法,感覺非常棒,很感激有這次的機會,期待之後在其他場合見面的時候~
每次聚會我也會持續跟大家分享有關 Flutter 的大小事,通常安排在第二階段的時間,有什麼想法都可以來聚會聊聊,認識其他開發者讓自己放鬆一下,我覺得是很棒的機會。
一樣再次感謝 Kevin 和志剛的協助,感謝梓豪當攝影師,還有謝謝每一位參與的開發者,Flutter 社群我們一起努力!
Andrea Wu: Remote Config#
講者主要說明 Remote Config 的用途與實作方式,從基本的 feature flagging 到 condition usage 還有 custom setting,對於剛接觸的開發者來說真的是方便,還能組合 Analytics 執行更進階的操作,你只需要思考要做什麼事情,而如何做這個部分 Firebase 都幫忙處理好了,很節省時間。
我開發過的產品有很多都是使用 Remote Config 服務,官方也持續在改進中,這次團隊成員 Andrea 的分享淺顯易懂,把一個服務做到讓人容易上手、體驗良好,真的不簡單呀!
Flutter 2023 Strategy & Roadmap#
報告指出,目前在 Play Store 上有 700,000 以上的 APP 都是由 Flutter 實作。而在新的應用中,有五分之一使用 Flutter,超過其他跨平台技術的總和。從中可看出目前對於市場與開發者來說,Flutter 這項技術是首選或是一個更好的選擇。
最近有開發者推出了 FlutterShark app,目前是 Android 能使用,可以幫忙檢測手機內的 APP 是否為 Flutter app,還能看到它們的 Dart 和 Flutter 版本,以及所使用的所有套件,蠻有趣的應用。
發現的應用有 Google Ads(廣告應用)、Grab(東南亞版本的 Uber應用)、NuBank(巴西的銀行應用)
1. Imepeller engine on Android#
Imepeller 引擎是新一代的圖形引擎,目標是取代原本使用的 Skia。它支援 3D 渲染,因為在早期就對 Shader 進行處理,可避免有時候發生的動畫卡頓,針對圖像的處理性能也更好,操作上官方將這種感覺稱為絲滑柔順。
目前 Flutter 3.7 版本,Imepeller 已經支援 iOS 穩定版本,可以在 info.plist 檔案裡面進行啟用。而 Android 的部分,在 Flutter milestone 上的進度是 67%,可以期待今天有穩定版本的發布,到時候 Flutter 在雙平台的表現就能到下一個層級了
2. Focus on Web Workers, WebGPU, WasmGC, and Web components#
專注於 Flutter Web 相關技術的優化,其中 Web Workers 針對 CPU 的運行,使 Javscript 和一些代碼可以在獨立的執行緒上運行,而不影響到跟使用者互動的 UI。WebGPU 出現也是為了改善 WebGL的缺點,像 Metal 和 Vulkan 這兩個角色一樣,可以完全發揮 GPU 性能。WasmGC 就是 WebAssembly 加上 Garbage Collector,優化記憶體的使用,對於 Flutter Web 是一大亮點。最後的 Web components 就像是官方展示過的 Element Embedding,將 Flutter 元件直接嵌入之前寫的網頁,可以直接與 Javascript 和 CSS 互動,實現混合開發。
3. Maintain development docs and handle issues#
持續針對開發文件進行調整,給開發者提供更完整的資訊。另外目前在 Flutter Repo 的 issue 有一萬多個,每天都在增加,官方也希望其他開發者能夠一起來協助處理這些問題,鼓勵發布 PR 為 Flutter 貢獻,靠大家的努力讓 Flutter 和社群能夠越來越好。
Shorebird#
Shorebird 是一家新的公司和團隊,創辦人 Eric Seidel 為 Flutter 元老創始人,而團隊目前有幾個人,其中一個是 Felix,它是 Bloc、equatable、mocktail 和 Mason 的作者,影響力很大。這個團隊存在的主要目的,是要持續開發很多服務跟工具來幫助 Flutter 生態圈,持續推廣 Flutter。會著重在官方比較沒有著重的區塊,例如首要任務是 Code Push,也就是熱更新,這一個功能一直是社群討論最高的,目前還在開發階段,陸續都有釋出一些進度影片,如果你想要加入 beta 測試行列,也可以到官網訂閱,每個月 20 美金。
另外可以加入 Shorebird 的 Discord,他們每天都會在上面分享每天的任務和進度,可以取得第一手的最新消息哦。
Top companies using Flutter in 2023#
VGV Team 最近更新了他們的文章,裡面主要分享有使用 Flutter 開發產品的公司和團隊。包含了越來越強的 Rive,他們桌面版的動畫開發工具就是使用 Flutter,我已經嘗試製作過動畫,使用上非常順暢。還有 SNCF Connect,它們是法國的公司,主要負責鐵路和交通的 APP,團隊很大,並採用混合開發,使用 Bloc、auto_route 等套件,使用 Figma 作為設計工具,目前 iOS s也運行 Impeller 引擎,有興趣的可以去了解一下。另外還有芬蘭的 Wolt,有點像 FoodPanda 的產品,都很多人在使用中。
Inspiring: Solar System#
by @ItsmeAjayKV
使用 Canvas 實作
Inspiring: Thermo UI#
使用 AnimationController、Canvas實作
Inspiring: 2D Game#
by Ya’suf Dany
使用 Flame 實作
Inspiring: Tito’s Special Place#
by Roman Jaquez
使用 Rive 實作
Rive GameKit#
Rive 即將推出遊戲工具包,使用 Rive Animation 作為場景和每個元素,正常運行下都能達到 120fps。Rive 真的對於 Flutter 投入很多,很期待接下來的每一步。
如果想要早點使用工具包製作遊戲的的話,可以提交表單申請,取得早期版本
https://docs.google.com/forms/d/e/1FAIpQLSfiuVrvGGfvbbUUffLlbpvkUT9XorHAYbVNVg9JhSGQn5IiYA/viewform
Inspiring: Grid with Shader#
by Roaa 🦄💙
Shader 為著色器,使用 glsl 語言去實作,可以掌控螢幕上的每一個像素。作者去找了別人的 shader 專案將自己的 Flutter 應用做結合,其中使用 flutter_shaders 套件去載入檔案,再透過 Canvas 去使用,以實現在 Flutter 元件上的拉伸效果。
FlutterShark#
Flutter App Detector,它是一款可以檢測手機裡的 APP 是否為 Flutter,除了能顯示 Flutter 版本、Dart 版本,還能查看使用了哪些套件,還蠻有趣的,目前只有支援 Android 平台,大家可以去 Play Store 下載玩玩看。
AppShots (Screenshots Tool)#
要將 APP 發佈到商店時一定會需要製作展示截圖,而當你沒有設計師幫忙時就會變得很麻煩,你需要了解尺寸、需要使用輔助工具(例如:PhotoShop、Figma),還要想背景以及排版,真的會花一些時間。
AppShot 是一個完全用 Flutter 開發的工具,只要將產品的截圖匯入,就會很多種排版樣式可以選擇,對於懶人來說很方便。買斷的費用是 25 美金,大家可以去了解哦。
Scribble Diffusion#
這是一個塗鴉生成圖片的 Flutter Web,使用 Firebase 儲存數據跟圖檔,搭配 ControlNet AI繪圖工具,可以隨意作畫,它會透過你的塗鴉生成對應的圖像,準確率蠻高的,圖像的品質也很好。
flutter_scribbleA new Flutter project.flutter-scribble.web.app
- 學會運用 Flutter Widgetbook,該管好自己和公司的元件庫了!
- 剛進入 Flutter 嗎?適合初學者食用,GetX 是否適合你呢!
- 教你為 Riverpod 2.0 撰寫 Flutter 測試 part.1
- 教你為 Riverpod 2.0 撰寫 Flutter 測試 part.2
- 輕鬆了解 Isar NoSQL DB,用它來實作 Flutter 資料庫吧!
- Flutter 輕鬆實作 i18n,使用 easy_localization_generator 就對了
- Flutter CICD 使用 Gitlab Runner 和 App Center 實作 part.1
- Flutter CICD 使用 Gitlab Runner 和 App Center 實作 part.2
- 使用 CodeMagic 和 Firebase 實現 Flutter CICD
- 輕鬆完成Flutter開發環境,最新版!
- 實作Flutter多變有趣的滾動效果CustomScrollView!
- 如何在Flutter使用 Makefile 節省你的時間?
- Easily understand StatefulWidget LifeCycle of Flutter
- “freezed” makes model class strong and easily
- 提高Flutter性能的小技巧!(一)
- 提高Flutter性能的小技巧!(二)
- 提高Flutter性能的小技巧!(三)
- What are Async and Isolates in Flutter?
- LoadBalancer is optimization for Isolates in Flutter
- Riverpod 輕鬆學,原來這麼好用!
- Riverpod 輕鬆學(二),一些進階用法!
About#
- Medium: Flutter Formosa
- GitHub: chyiiiiiiiiiiii
- Instagram: flutterluvr.yii
- Linkedin: yiichenhi
- Youtube: Yii
- Youtube: 一起饅頭(美食頻道)
- Email: ab20803@gmail.com
Contribution#
如果覺得文章不錯的話可以贊助,讓我有更多動力和熱情分享學習紀錄和生活!請我喝一杯咖啡吧~
希望有幫助到你/妳,歡迎追蹤我,方便瀏覽最新的文章~
本文原刊登於 Medium。