Flutter2を発表したFlutterEngageの基調講演の覚書

---

Flutterの記事を整理し本にしました

• 本稿の記事を含む様々な記事を体系的に整理し本にまとめました
• 今後はこちらを最新化するため、最新情報はこちらをご確認ください
• 10万文字を超える超大作になっています(笑)

---

概要

• 3/3のFlutter Engage Keynoteにて、Flutter2が発表されました
• 基調講演(key note)で重要で面白そうなことをたくさん言っていたので、整理してみました。
• 違っている可能性もあるので、気になる部分はオリジナルの動画でご確認ください

まとめ記事

• Flutter系の記事のまとめ

元動画

• https://www.youtube.com/watch?v=zSbsIiluixw

個人的に気になったポイントのまとめ

• 「デスクトップやモバイルアプリを作る上で、Flutterはデフォルトの選択肢になりつつある」というのは印象的

• iOS/Androidに加えて、WebがStableになった上、Windows/Mac/Linuxも対応となった

• GooglePayではFlutterでリライトしたことで、パフォーマンスが向上し、技術的負債がなくなり、Android/iOSの異なる作業が統一された

• デュアルスクリーンはまだ日本では使う機会がなさそうだが、将来性はあるし、シングルスクリーンでも問題ない作りになっているので良さそう

• Webがついに本格的に使えるようになったので、VueやReactと同じように使えそう

• 各OSのスタンドアロン版も作れるというのがまだ詳細が見えていないが、魅力的

• Null安全が導入されただけでなく、Null安全への移行ツールが準備されているのが嬉しいし、Null安全にすることで性能が上がるというのも嬉しい。

• トヨタの事例で、組み込みにまで応用できるというのがすごい

• Firebase関連のパッケージが更新されたのには期待(まだ詳細がわからないけど)

• 広告がオーバレイ以外に普通にWidgetに組み込めるようになったのは本当に助かる!!

• あらゆる場所でパフォーマンスに関する改善が行われており、かなりチューニングしている印象

詳細

はじめに (0:51〜)

• 今年のテーマはFlutterの柔軟性と可搬性
• Flutterはあらゆるプラットフォームのアプリを構築する上で役立つ
• FlutterのメジャーアップグレードとなるFlutter2がローンチされた
• ターゲットにするプラットフォームから始めるだけでなく、作りたいものに追従していける
• Flutterは、Beautiful,fast,productive,open,portableを実現する
  • portableはFlutter2で強化されている
• flutterパッケージは150000を超え、昨年の2倍に以上になった

マルチプラットフォーム対応(iOS/Android+Win/Mac/Linux/Web)　(4:50〜)

• Flutter2では、iOS/Androidだけでなく、Windows,MacOS,Linux,Webの4つのターゲットを加える
• 上記6つのプラットフォームに対応したgskinnerのflutter folioというアプリがある
  • モバイルはポータビリティに優れ、カメラを内蔵している
    • 素早く起動して作業ができる
  • PCは画面が大きくなり、使えるスペースが増える
    • モバイルとは違うUIやショートカットキーが使える
    • 最大化サイズやメニューの内容はモバイルと異なる
  • 5つのOSで快適に動作し、Webでも95%以上のソースを再利用して開発できた
• 日々UIやガジェットが追加されている
  • 複数行テキスト編集、キーボードショートカット、インタラクティブなスクロールバー、null安全など
• 6000以上の課題を解決し、プルリクは200ページのドキュメントになった

Google PayでのFlutterでのリライト (10:30〜)

• googleには1000人以上のエンジニアがDart/Flutterで開発を行っており、30以上のチームがある
• 下記のサービスにはすでにFlutterが使われている
  • Admob,G Pay,Google Ads,Nest Hub,Google Analytics,Blogger,Cloud Search,Google One,STADIA
  • Google Payはその中でも最も利用しているプロジェクト
  • Google PayがFlutterに移行した際に、社内から有効だったかという質問が多かった
    • Google Payは30カ国でローンチしており、iOS/Androidで1億5000万人以上が使っている
      • 結果2つのコードベースができた。iOSとAndroid合わせて170万行で、機能の相違もあった。開発ペースも異なり技術的な負債も多かった
      • リライトとマイグレーションを検討し、リライトした。結果35%のコードベースの縮小(110万行に減った)ができたし、技術的負債も90%減った
      • エンジニアの生産性は20%向上した。重複のある作業(リリースプロセスやテスト、セキュリティレビュー)もマージできた
      • すべてのエンジニアが同じコードで作業できる。エンジニアリング効率はすぐに50%になった
    • 複数のプラットフォームで開発を行っているすべてのチームに移行をおすすめする

デュアルスクリーンデバイス対応 (12:56〜)

• モバイルには、様々な形やサイズがあり、最新のトレンドは折りたたみ式である。Surface DUOなど
• デュアルスクリーンはユーザに新しい経験を生み出す
• 2つでの画面でアプリを実行できる
  • 2画面を最大化して使う、単ページだけを使う、左右で違うコンテンツを出すなどのデザインパターンが考えられる
  • 2つの画面で別々のアプリを表示させデータをコピーしたい場合もでてくると想定される
• デモ(Flutter Galleryアプリ)
  • 起動すると単一画面で起動するが、両画面で最大化することもできる
  • ダイアログの表示も左の画面か右の画面かなどを選べる
  • TwoPane Widgetが追加されている
    • 左右で別々の情報が表示されるが、1画面しかないデバイスでも左右に分かれてうまく表示してくれる。メニューとメイン画面のようなものを簡単に作れる

towpane.dart

TwoPane(
  page1, // Widget
  page2, // Widget
  paneProportion, // double
  singlePane, // pane1 ,pane2
)

Webへの可搬性 (16:53〜)

• 昨年Webサポートのプレビュー版がリリースされ、本日stableになった
• forkでも別エディションでもなく、全く同じdartで動く
• 特にアプリ的なWebサイトの構築に強い (インタラクティブ、シングルページ、オフライン、既存のモバイルアプリの移植)
• Vue,React,Angularなど多くのWebフレームワークが生まれた。そこにFlutterが加わった
• Webにはユビキタスやリーチの広さに利点がある。Flutterのアプリ作成者はアプリストアの外に到達できる
• Webが拡大したのは、プラットフォームの改善(レンダリングの高速化)と　信頼性のある柔軟性(Project Fugu)
  • PWAとFlutterはすごく相性がよい
• FlutterではWebのパフォーマンス向上にかなり努めてきた
  • 結果、生産性/使いやすさ/性能を高いレベルで実現した
  • https://flutterplasma.dev でデモを見ることができる
• Webブラウザで実行されるflutterアプリはWebアプリのように感じられる
  • ハイパーリンクやテキストの入力、ルーティングなどもできる
• Webアプリはサイズや環境に依存しない
  • ユーザ補助機能やスクリーン制御もできる

iRobotロボットの例 (24:35〜)

• iRobotはコーディング可能で、flutterで作られている
  • 本日そのWeb版をリリースする
    • https://code.irobot.com/#/
  • 左側でビジュアルコーディングを行い、右側でシミュレータが動く
• DartPadもブラウザで動作している
  • https://dartpad.dev

Windows/MacOS/Linuxへの可搬性(27:15〜)

• デスクトップ版もステーブルになる
  • スタンドアロンの実行可能ファイルを作成できる
  • Flutterがネイティブになる
  • windows(Microsoft)/linux(Canonical) が協力している
    • UbuntuでFlutterを利用できる
      • インストーラーも準備中
    • FlutterSDKをSnapStoreで利用できる
  • マルチウィンドウ、デスクトップ通知、Bluetoothなどの技術仕様が決まるつつある
• デスクトップやモバイルアプリを作る上で、Flutterはデフォルトの選択肢になりつつある

トヨタ自動車の例(32:45〜)

• 6つプラットフォームに加えて、組み込みにも対応する
• トヨタでは次世代インフォティメントシステム
• Flutterを選んだのは事前コンパイルで高性能なため、車載ユーザエクスペリエンスを実現できるため、
  • また、スマートフォンとの連携でき、スマートフォン以外のタッチスクリーンとのUXをFlutterで改善でき、どこで動作しても違和感がない
  • デベロッパエクスペリエンスも高い。マルチプラットフォームで高い生産性で開発ができる
  • 車載アプリの開発を合理化した
• Flutterの使われ方
  • Embedder API　+ AutoMotive Grade linuxによるインフォティメントシステムを実現するために使った
    • flutterで作ったものをクロスコンパイルして、ラップ後Embedder APIで利用する
  • デザインから開発の一貫した開発にもFlutterは役立った
• コミニティの支援も大きかった

Dartについて (38:15〜)

• Dartには可搬性があり、マルチプラットフォームで動作する。反復開発に向いているし、null-safeランタイムシステムである
• Null safetyが追加された
  • 非null型が追加されただけではない
  • late変数や名前付きrequiredパラメタ
  • null安全とnull安全でないものは共存でき、段階的に移行できる
  • nullチェックはコンパイラの最適化に対しても有効に作用する
    • 通常コンパイラはnullの可能性があるため、チェックなどを行うがnull安全があれば処理を高速化できる
• その他の改善によって高速化を実現している
  • Google payのコードサイズを14%削減した
  • Dartは内部的にはUTF-8だがDecoerが最大で20倍早くなっている
  • ネイティブライブラリを呼び出せるdart:ffiも高速化されている
• Dartはメタプログラミングが可能だが、よりよい改善を検討している

Dartのデベロッパツール (44:15〜)

1. Flutter Fix

• 非推奨APIをすべて移行できる
• これによりソースを壊すこと無く常に最新のソースコードを維持できる

1. Null Safetyの解析ツール

• dart Migrateコマンドにより実現できる
• 起動するとツールはコードを分析する
  • nullを許容するべきものと、許容しないべきものを判断する

1. デバッグツール

• エラーコンソールから対象Widgetに飛べる。
• Flutter Inspectorではエラーを起こしているWidgetの詳細が見れる
  • これまではブラウザでDevtoolを開く必要があったが、IDEに直接組み込まれている
    • VSCode, IntelliJ,AndroidStudioで使える
• レイアウトエクスプローラーを使って、幅の修正ができる
  • SingleChildScrollなどをラップするなどがすぐに気づいて修正できる

1. ブラウザでのDevTool

• パフォーマンス、ネットワーク、メモリなどを見れる
• レイアウトエクスプローラーで固定幅のWidgetの表示と、あらゆるレイアウト問題のデバッグができる
• 差分ビューワーもあるので、新旧を確認できる

Dartのパッケージ(52:00〜)

• 提供パッケージは15000を超えている
• Firebaseのパッケージをアップグレードした
  • Authentication,Firestore,Functions,Messaging,Storage,Crashlytics
  • 全てのパッケージでnull安全をサポートした
  • Messagingは大きく改定した

広告 (53:15〜)

• 現在はオーバーレイバナー、インタースティシャル、動画リワードなど
  • インラインバナー、ネイティブ広告はない
• Google Mobile Ads SDK for Flutterをリリースした
  • インラインバナー、ネイティブ広告も提供する
  • Widgetツリーの中に広告を入れられる
  • UXを邪魔せず収益化できる
  • StatelessWidgetを継承し、広告用のWigetを作成し、使う側の必要な場所で呼び出すだけ

※　アフリカでの取り組み及びBigFixUpについては、省略