週刊 Dart & Flutter インプット 24

ntaoo
13 min readJun 26, 2020

--

https://cdn-images-1.medium.com/max/1760/1*L7Mmc_dhEiJfS_kHXhj4rQ.png

毎週金曜日に、@ntaoo がインプットしたDart & Flutterの情報のリンク集をまとめて共有します。

Flutter Day — Home

JSTの本日午前一時から開催されています。完全なオンライン開催です。

セッションの視聴メモを公開しています。セッションが公開されるごとに追記していきます。

コードラボも更新されています。

New tools for Flutter developers, built in Flutter — Flutter — Medium

Dart Dev Toolsは、以前はFlutterを使用していないDart製Webアプリでしたが、今回、Flutter製Webアプリとして完全に書き直されました。

また、これをデスクトップネイティブアプリとしてリリースする評価を行っており、今のところ有望とのこと。Flutterの良い点は、配布形態(Webかネイティブか?)の決定を遅延できること。

Dart Dev Toolの機能として、

  • FlutterインスペクターでWidgetツリーを可視化して調査できます。
  • Layout Explorerは、まだFlexベースのレイアウトにしか有効ではありませんが、Flutterでレイアウトを組むと一度は目にする有名な “RenderFlex overflowed by 42 pixels” error. といったエラーの原因調査に役立ちます。
  • その他、buildのTimeline view, Memory view, Performance view (CPU profiler), Debugger, Network可視化、Logging viewなど揃っています。

Dart Dev Toolsは、Chrome Dev Toolsにとても良く似ていますねぇ…。とくにFlutter Webの場合は、Chrome Dev Toolsの代わりにDart Dev Toolsを常時表示させて開発することになるでしょう。Android StudioやVS CodeなどのIDEから独立したひとつのアプリケーションとして実行されますので、開発環境を選びません。

以下のDart Dev Toolsドキュメントと合わせて、この記事は必読だと思います。

What’s new with the Slider widget? — Flutter — Medium

Material Design ガイドラインの改訂に合わせてアップデートされたSlider Widgetの技術的解説。

Flutter performance tips — Flutter in Focus — YouTube

Flutterのパフォーマンスについて注目すべき点についての紹介。これからシリーズ化するイントロ回のようです。

それにしても、ノンネイティブに気を使ってくれているのか、とてもゆっくりと喋ってくれていますね。字幕と合わせて英語の理解のハードルがとても低いと思います。

Flutter SDK Per-platform Installer Requirements (PUBLICLY SHARED) — Google Docs

Flutter SDKの、Win, macOS, Linuxそれぞれのプラットフォーム用のインストーラーを計画する趣旨のドキュメント。アプリでなくSDKのインストーラーです。 https://docs.google.com/document/d/1VooN2bddQ52Z2B4qYi1Lp20PGhyYDr1AKaXwo9e7PCw/edit#heading=h.hynqf1o3tv48

macOSの場合は、現在は以下のドキュメントに従ってSDKをインストールしますが、これでつまづく人もいるようなので、インストーラーが整備されたらSDKのインストールがさらに楽になりますね。

Single Child な Widget を使いこなす — Flutter 🇯🇵 — Medium

Childをひとつだけ取るStatelessWidgetを用いてのWidget構成方法の指南。textScaleFactorのくだりが勉強になりました。

SingleChildStatelessWidgetに関しては採用してもいいかなとは思えました。Nestedに関してはSingleChildStatelessWidgetの制約があることもあり、記事で言及されている通り、今のところあまり活用する機会はなさそうです。その見た目に関しても私の感覚ではちょっと奇妙に感じてしまいます。

Provider, but different | Riverpod

RiverpodのWebサイトが公開されました。Riverpodは、Providerの作者のRemi氏による、Providerに破壊的変更をした実験的パッケージだそうです。https://medium.com/@ntaoo/週刊-dart-flutter-インプット-19-9be9cb4f9a56 でも紹介しました。とても期待。

リードエンジニアが語る!Flutterの可能性と未来 | 株式会社Diverse Blog

「この言語を読み解いていくのはすごく簡単だな」という所感

Androidアプリの新規開発をする場合を例にすると、Flutterを使用せずに開発した場合と比べて1~2割ほど時間が削減される

ひとつのコードで動いているので、試作や品質管理をする際に確認が楽になった

Flutterエンジニア、もっと増えてほしいですよね。

「なぜDartなのか」CTO石川が技術選定に込めた想いとその背景 | 10X, Inc.

せっかく機能の開発を1人で完結させられるのに、iOSアプリとAndroidアプリで似たようなコードを2度も書くのは冗長ですし、実装の断片化をわざわざ取り込みに行ってるようなものだと感じていました。

Goだと言語仕様上、表現の幅とコンパイル時に検証される範囲が狭いので、注意を割かないといけなかったり運用でサポートしないといけないといった点があり、違う言語を探そうと思ったんです。Goが適した場面は色々あると思うのですが、自分たちがアプリケーションを記述する言語に求めるものとは一致しないなと思いました。

まず代替としてはSwiftとKotlinも考えましたが、iOSとAndroidでの経験から規模が大きくなるとコンパイルが遅くなって、開発の生産性に深刻な影響を与える可能性がある。それと、SwiftやKotlinにはXcodeやIntelliJが実質必須であり、エディタの自由がないのも躊躇するポイントで、最終的には選択肢から外しました。次に、求める言語の表現の幅を満たしつつ、開発体験が良い言語として、TypeScriptが候補に挙がっていました。TypeScriptにはGCPのSDKがある程度揃っており、JavaScript由来のデメリットは想定されますが、無難な選択肢ではあったと思います。

同時期のFlutterの検証を通じて、Dartも開発ツールが充実していることは分かっていました。DartにはGCPのSDKは全くありませんがgRPCが使えれば実装できるし、選択肢に入ると思いました。最終的には2週間ほどの検証を経てSDKは実装できると判断し、正式にDartを採用することに決めました。多くのメンバーがサーバーとモバイルアプリの開発を兼任するので、言語を揃えればスイッチのハードルを下げられるというのが決め手になりました。

クライアントはFlutter、 サーバーもDartと、クラサバをDart言語で統一して開発されたとのこと。Dartの選定理由が完全に同意なので、その部分を長めですが引用しました。

Dartはたくさんの誤解にまみれてきた言語ですが、Flutterを通じて実際に相当の量のDartコードを書いた経験がある人が増えてきたことで、ようやくその生産性の高さが正当に評価されてきた感がありますね。

How to speed-up Cloud Firestore Xcode builds on your Flutter apps | Code With Andrea

Cloud Firestore Xcode buildsを高速化するかんたんな方法の紹介。

Guide to Automated Mobile CI/CD for Flutter Projects with Appcircle — Appcircle

CI/CDサービスである、Appcircleの紹介。Flutterの公式ドキュメントからもリンクされています。

30 Best Flutter App Templates in 2020

Flutterアプリのテンプレート集のようです。有料なので試していませんが、どれも数十ドルとお安め。

FVM 1.0 Released! : FlutterDev

FVMが1.0に到達しました。Projectごとに高速にFlutter versionを変更できます。パッケージ開発をしている方にとっては便利になりそう。

Dart Generators — FlutterPub — Medium

Async Generatorは、使うことは稀かもしれませんが、BLoCパターンでStreamを制御する際に、活用できればかなりすっきりと書けることもあります。複雑で捉えがたいものもあるRxのmethodの代わりにどうやったらAsync Generatorで書けるだろうかと考えるのも楽しいです。

Flutter歴1ヶ月がオンラインハッカソンで初心者チームのTech Leadをしてみた — Qiita

情報源

https://twitter.com/ntaoo が、followさせていただいている方々

最新の情報を中心にしますが、少し古めでも私が見つけた際に有益と判断した情報も載せていきます。情報の網羅性の高さは不明です。継続を重視して省力化しています。

  • 公式情報は優先順位最高にして載せます。
  • それら以外の情報は、私の関心に基づいて適当に間引きます。
  • 基礎は、https://dart.dev/codelabs , https://flutter.dev/docs , Udemyなどのオンラインビデオトレーニングコース、または書籍などで体系的に学んで習得しましょう。

--

--