毎週金曜日に、@ntaoo がインプットしたDart & Flutterの情報のリンク集をまとめて共有します。
What are the important & difficult tasks for Flutter devs? — Q1 2020 survey results
いつものように要約
2月におこなわれたFlutterユーザー調査の結果
- animationに関する満足度が少しだけ落ちた(-3%)ので、Makeing animation in Flutter https://www.youtube.com/watch?v=GXIJJkq_H8g&list=PLjxrf2q8roU2v6UqYlt_KPaXlnjbYySua シリーズを作った。
- Flutterの評価段階を終えて、より真剣な目的のために採用をしたユーザーが増えている。
- アプリをpublishしたユーザーの69%がiOSとAndroidの両方でbuildしている。16%がWebにも挑戦している。
- PlayStoreにはすでに5万のFlutter製アプリがあり、その数は爆発的に増えていっている。
重要との回答が多かった6つのタスク
- エラーとクラッシュのデバッギング
- 多様なプラットフォームで動くことを確実にすること
- 状態管理手法の選定
- テキストオーバーフローなどのレイアウト問題への理解
- UX/UIデザイナーによるデザイン仕様に基づいたUIの作成
- プラットフォーム特有の問題のトラブルシューティング
プロフェッショナルレベルのFlutterアプリ開発者から、最も難しいとの回答が多かった6つのタスク
- プラットフォーム特有の問題のトラブルシューティング
- メモリーに関する問題の原因調査と修正
- CPU使用量に関する問題の原因調査と修正
- プラットフォーム依存のネイティブAPIを追加すること
- “UI jank” (訳注: 滑らかに動かないUI) の原因診断と修正
- （プラットフォーム依存実装を伴う）Flutterプラグインの開発
Optimizing performance in Flutter web apps with tree shaking and deferred loading
Web開発者にはおなじみのTree Shaking、および比較的有名ではないだろうDartのdeferred loadingについての解説。Deferred loadingはWeb用にdart2jsでコンパイルする際に、生成するJSを分割してアプリケーション実行中にそれが必要になるまでネットワーク越しの読み込みを遅延させます。
Flutter Package Ecosystem Update — Flutter — Medium
- Flutter Packageエコシステムを信頼できるものにするために、それぞれのpackageに関する多くの指標を公開している。Verified Publisher, Like数、そして、#FlutterFavorite https://pub.dev/flutter/favorites 。最も注目に値するプラグインのひとつは、the sign_in_with_apple plugin 。
- Packageの質と量が向上し続けている。
- いくつかのGoogle製package (訳注: 原文参照）はプロダクション品質に達している。それらのメジャーバージョンを1.0.0に上げた場合にそれらに依存するパッケージがバージョンチェックに引っかからずに円滑にバージョンアップをするに、たとえば、dependencies: shared_preferences: ‘>=0.5.7+2 <2.0.0’ のように <2.0.0を指定してほしい。
- プロダクション品質にまだ達していないpackage、たとえばFlutterFireなどについては、Invertaseを加えて、https://github.com/FirebaseExtended/flutterfire/issues/2582 のように改善中。
3 cool Dart patterns — Dart — Medium
Merging widgets into a collection
children: [
Container(),
for (final food in foods) ...[
if (isVegetarian == food.isVegetarian)
ListTile(title: Text(food.name)),
SizedBox(height: 50.0),
],
],知らなかった。でも、あまり読みやすいとは感じないんですけど…
Immediately invoking an anonymous function
color: () {
switch (getRandomElement(foods).name) {
case 'apple':
return Colors.green;
case 'nuts':
return Colors.brown;
case 'eggs':
return Colors.yellow;
default:
return Colors.transparent;
}
}(),JavaScriptを知っている人なら全員知っているほど有名な、無名関数を即時実行するパターン。https://en.wikipedia.org/wiki/Immediately_invoked_function_expression
いわゆる、TENNENT’S PRINCIPLE OF CORRESPONDENCE (http://techscursion.com/2012/02/tennent-correspondence-principle.html)という原則。
For a given expression
expr,lambda exprshould be equivalent.
Understanding constraints — Flutter
flutter-the-advanced-layout-rule-even-beginners-must-know が公式サイト向けに改訂されました。必読。
Rémi Rousselet: Reinventing provider
Providerの作者が、Providerを破壊的に進化させた、Riverpodという実験的パッケージを作っているそうです。
Staticでtype parameterとFlutter BuildContextに依存し、RuntimeErrorになりえるProviderから、確実に前進しているアイデアに見えます。素晴らしい。特に、Flutterに依存していないPure Dartなことが素晴らしい。
（RiverPod版の）Provider自体はstatic globalに宣言していますが、ProviderScopeで囲ったWidgetからしか取得できない制約をつけることで実質的に状態のGlobal化を回避しています。
Widget Treeだけでなく、Model層でも使うことを想定しているそうです。
この作者が他に作っているPackageの、Flutter HookやStateNotifierと組み合わせて状態管理のソリューションとして推していく構想があるようです。
eBayのUIテスト自動化を支えるFlutter Golden Tests
Logging in Dart — Ryoichi Izumita — Medium
Dart / Flutterのloggingについての選択肢をおそらく網羅されています。ありがたい。
KBOYのFlutter大学 — YouTube
これからFlutterを始める人向け。すばらしいー。
RxDart by example: querying the GitHub Search API with switchMap & debounce | Code With Andrea
Rx（Stream）の頻出パターンの一つである、Search APIの実装方法についての解説。
https://codewithandrea.com/videos/2020-05-11-rxdart-by-example-github-search/
Flutterを実務で使ってみてイケてなかったこと7選 — daimarom’s tech blog
The fear of dart:mirrors
昔の記事ですが、Redditに貼ってあったので。dart:mirrorsはAoTコンパイル対応のために実質的にsource_genに移行しているという理解。
情報源
https://twitter.com/ntaoo が、followさせていただいている方々
最新の情報を中心にしますが、少し古めでも私が見つけた際に有益と判断した情報も載せていきます。情報の網羅性の高さは不明です。継続を重視して省力化しています。
- 公式情報は優先順位最高にして載せます。
- それら以外の情報は、私の関心に基づいて適当に間引きます。
- 基礎は、https://dart.dev/codelabs , https://flutter.dev/docs , Udemyなどのオンラインビデオトレーニングコース、または書籍などで体系的に学んで習得しましょう。
