Google I/O 2021 Flutter 全体報告

Google I/O 2021　
Flutter 全体報告
1
robo
I/O Extended Japan 2021 - Flutter

自己紹介
名前
robo （兼高理恵）
好きなもの
モバイル端末
おしごと
アプリの要件定義と仕様策定、設計から実装まで
所属
GDG Kyoto (主催者) WTM Kyoto (主催者) Flutter Osaka (staff)
2

スライド構成
● 初めに
● Google I/O 2021 Flutter キーポイント
○ 世界中のプロダクトで採用される Flutter
○ Flutter 2.2 発表（向上への取組）
○ Flutter 注目点（セッション概要）
● むすび
○ キーポイントから垣間見た呼掛け
● 資料室
Google I/O 2021 Flutter Program 概要
3

5
Google I/O 2021 Flutter プログラム一覧
出展元：Wha's new in Flutter [23:10]

これら各プログラムは、大切な意味を持っています。
このため各プログラム動画を視聴するさいの足がかりとして、
スライド後半に資料室 Google I/O 2021 Flutter Program 概要章を設け、
各プログラム動画の概要と、詳細資料があれば URL リンクをまとめました。
6
例えば、Why null Safety? の概要資料では、
「何故、Flutter の開発性が高いのかや、Null 安全による効能を
　開発サイクルの削減とコンパイル後のコード」で紹介しています。

Google I/O 2021
Flutter キーポイント
7

Google I/O 2021 Flutter キーポイント
１．世界中のプロダクトで採用される Flutter
8

今や Flutterは、
SONY、TOYOTA、Canonical、Microsoft、
Samsung が対応を表明し、
Google Play 新規アプリの 20万件を占めています。
● Grap アプリ(東南アジア)は、2億以上のダウンロード
● BMW は、エンジニア 300人体制でサービス提供
● Tencent は、WeChat アプリ(12億ユーザー)だけ
でなく、より広範にアプリへの採用を予定。
　　採用実績は、大規模＆世界的になっています。
9

採用理由は、
同一コードでのマルチプラットフォーム対応と、
高い生産性 (コード量や開発期間の削減) により、
品質向上にリソースを割けられることである。
● ByteDance社のエンジニアは Flutterに切り替えて
新規アプリの公開が30%早くなったと言い、
● Google Payは、コードベースを Flutterに統合して
200万行のコードが110万行に削減できたと言う。
● Google 内でも 30以上のチームで、生産性から
Flutter が選択されている。
10
この時点での生産性やマルチプラットフォームは、
iOS/Android モバイル環境についての視点です。

２．Flutter 2.2 発表（向上への取組）
1. 開発エクスペリエンス向上
2. マルチプラットフォーム対応向上
3. アプリ収益化向上
4. Google エコシステム対応向上
5. その他
11

12
１．開発エクスペリエンス向上
● 型エイリアス
型エイリアスとして、
関数と関数以外の両者を扱うようして
特定用途を示す型記述にも、わかりやすく
短い名前(別名)が付けられます。
● null 安全
null 安全が、新しい Flutter アプリ
のデフォルト指定になりました。
また現時点で、
pub.dev 上位 1,000パッケージの
80％以上が null 安全に移行済です

13
● DevTools 改良 (Memoryタブ強化)
オブジェクト領域の割当コード先
の明示
や、メモリ割当タイムラインにカスタムイベ
ントを挿入できるようになりました。
Using the Memory view
https://flutter.dev/docs/development/tools/devtools/memory
Memory タブだけでなく、
Perfomance でイベントタイムラインを確認
したり、CPU Profiler で時間を要した箇所
のフレームチャートを確認すれば、デバッ
グだけでなくパフォーマンスチューニングに
も役立ちます。

14
２．マルチプラットフォーム対応向上
● デスクトップ対応のベータ版移行等
Windows, macOS, Linux ベータ版移行と
デスクトップ固有のテキスト挙動(キーイベ
ント等) の再構築、ユーザー補助やシステ
ム手動統合のサポートおよび、
Microsoft UWP 初期アルファ版も追加
Apple M1チップと Microsoft ゲーム機の対応実験も着手
● adaptive app design
同一コードで mobile, Web, desktop
アプリに対応するため、画面サイズや
入力モードやプラットフォーム固有の違い
に動的適応させる適応設計概念
Building platform adaptive apps | Session
https://www.youtube.com/watch?v=RCdeSKVt7LI&list=PLjxrf2q8roU19JGviPy
eWc-SpDzou8Ug8&index=7&t=1s

15
● SunnyPlace ゲーム (Flutter for Web版)
Flutter for Web 製のゲームですが
Bonfire ゲームエンジンを使い、
フルスピードで実行されます。
● FluterFlow サービス (Flutter for Web製)
ブラウザ上で Firebase 連携可能な
本格的 iOS/Android アプリをD&D
FASTER, EASIER, LESS CODE で作成。
bonfire 1.1.2
https://pub.dev/packages/bonfire
FlutterFlow - Build Flutter Apps Visually
https://flutterflow.io/
（Flutter for Web 対応の向上例）

16
３．アプリ収益化向上
● Google Mobile Ads SDK for Flutter
Ads SDK は Open Beta 版に移行。
null 安全や最新 iOS GMA SDK と、
Adaptive Banner (広告サイズの最適化
) に対応
google_mobile_ads 0.13.0
https://pub.dev/packages/google_mobile_ads
● Payプラグイン新規提供
Google Pay と Apple Pay に対応した
プラグインが Google から新規提供されま
した。
pay 1.0.5
https://pub.dev/packages/pay

17
● アプリ内購入プラグイン製品版移行
アプリ内でのゲームコインや仮想アイテム
の販売がベータ版から昇格しました。
(コー
ドラボも用意されています)
in_app_purchase 1.0.5
https://pub.dev/packages/in_app_purchase

18
● Material Design ガイドライン更新予定
Material Design ガイドラインは、
adaptive app design や大画面に対応し
た最新版になる予定です。(今年後半予定)
Navigation rail
https://material.io/components/navigation-rail
● Google APIs 組込の向上
Flutter アプリと Dart サービスで使える、
Google API パッケージは 180 以上あり、
Gmail, Youtubeや BigQueryを提供します。
Google APIs
https://flutter.dev/docs/development/data-and-backend/google
-apis
Power-up your Flutter app with Google APIs
https://www.youtube.com/watch?v=z4MsuZiEezY&list=PLjxrf2
q8roU19JGviPyeWc-SpDzou8Ug8&index=4&t=1s
４．Google エコシステム対応向上
大画面用に画面左右に縦配置する
Bottom Navigation Bar 類似 Widget

● Google Cloud service 対応（Dart サーバサイドサービス構築）
Dart はすべてのリリースのDockerイメージを提供しています。
Dockerfile から最新のSDKを搭載したコンテナを簡単に起動でき、
３つのファイルに対して 10行ほどのコードを書くだけで起動できます。
19
shelf 1.1.4
https://pub.dev/packages/shelf
Using Google Cloud
https://dart.dev/server/google-cloud
Dart の事前コンパイラによ
り、バイナリサイズは
750mb ⇒ 11mb のように
減少します。
Dockerfile から、
GCP Cloud Run への
デプロイも可能です。

20
● Google Cloud service 対応
数千の同時アクセスを捌くDartPad や毎
日数百万リクエストのpub.dev は、サービ
ス基盤が Google Cloud 上の
Dart サーバで構築されています。
つまり大規模運用にも耐えられます。

21
● I/O Photobooth
現状の Flutter for Web の可能性実証サービス
カメラでの撮影や Drag＆Drop UI もある。
● Flutter / Dart Team document
How It’s Made: I/O Photo Booth
https://medium.com/flutter/how-its-made-i-o-photo-booth-3b83
55d35883
I/O Photo Booth
https://photobooth.flutter.dev/#/
Announcing Flutter 2.2 at Google I/O 2021
https://medium.com/flutter/announcing-flutter-2-2-at-google-i-o
-2021-92f0fcbd7ef9
Announcing Dart 2.13
https://medium.com/dartlang/announcing-dart-2-13-c6d547b57067
What’s new in Flutter 2.2
https://medium.com/flutter/whats-new-in-flutter-2-2-fd00c65e2039
５．その他

３．Flutter 注目点（セッション概要）
1. 高開発生産性 (開発サイクル削減)
2. プラットフォーム連携 (チューニング＋既存資産)
3. adaptive app design (プラットフォーム最適UI)
4. Google APIs ＋ Google Cloud service 連携
22

23
１．高開発生産性
Hot Reload と
静的解析により
サイクル削減
開発サイクル
アプリ開発は、改良変更のサイクルです。
Flutter の開発サイクルは、Hot Reloadと静的解析により削減
されています。
静的解析 (static analysis) は、コンパイル前に矛盾を指摘します。
Hot Reload による変更差分コンパイル＋変更後状態の自動復元は、素
早い変更動作検証に役立ち、両者からサイクルが削減されます。
ヌル安全の導入は、アプリを魅力的にするものではありません
が、Null Pointer クラッシュの原因とバグ解析時間を更に減ら
してくれます。
ヌル安全前のコンパイルコードは、ヌルの可能性があり、ヌル
チェックやハンドリングが入るため、コード量はその分大きく実
行も遅くなります。
ヌル安全なコンパイルコードは、文脈上ヌルが来ないことが保
証されるため、コード量はその分小さく最適化され、パフォーマ
ンスも高くなります。

24
２．プラットフォーム連携
FFIは、foreign function interface の略で、
Dartコードから直接 Cライブラリ関数のコール …
つまり、プラットフォーム OS の Cライブラリ(Windows の
Win32 API等)を使った、ハイパフォーマンスな機能や、既存プ
ロジェクトの C プログラムやライブラリを呼び出せチューン
アップや既存資産の再利用に活用できます。
デスクトップの UIは、操作作法や外観が決まっているので、ア
プリがネイティブウィジェットを使用しているように見せるに
は、通常の Widget でなく raw レベルのカスタムウィジェット
の作成が必要なことに留意。
Widget は、Widget Tree(表示設定), Elemnt Tree(更新検知),
Render Tree(レイアウト/ペイント/ヒットテスト) で構成されていること
を踏まえ、カスタムウィジェットを作ります。

25
３．adaptive app design
Flutterは、単一のコードベースから
モバイルやデスクトップや Webのアプリを構築します。
ですがアプリが実行されるプラットフォームの環境は、
画面のサイズと形状、タッチやマウス＆キーボードなどの入力
対応、ユーザーが各プラットフォームに求める操作感や操作
作法（ダイアログのクローズボタンの位置や、タブによるフォー
カス移動、明示的な機能ボタンを使わないコンテキストメ
ニュー）が異なっています。
これらプラットフォームの違いを吸収して適応させた、
快適でシームレスな体験を提供するデザイン視点が必要です。
Visual Density 表示密度の概念により、
同一コードのボタンであっても、
タッチするモバイルはサイズが大きく、
マウスを使えるデスクトップだと小さくなる。

26
４．Google APIs ＋ Google Cloud service 連携
Dart は、フロントエンドだけでなく、
バックエンドサービスの両方の開発ができます。
Google API パッケージを使えば、180個を超えるサービスが
利用ができ、Cloud Run で GCPにデプロイもできます。
Eventarc で、異なるサービスからのメッセージや Cloud
Storage のバケット追加などをトリガーに指定して、何らかの
CloudEvent が発生するたびに Cloud Run サービスに送信し
てサービス連携を行なうこともできます。
Dart バックエンドサービスは、 DartPad や pub.dev が Dart
サーバで構築されているので、既に実績があります。

むすび
キーポイントから垣間見た呼掛け
27

● mobile multi-platform framework としての世界的認知
● 品質や生産性やパフォーマンスの既定路線の向上への注力
1コードベース、mobile, web, desktop アプリ高開発性の踏襲強化
desktop は、ベータに移行、adaptive app design 表明や、
Dart ffi 対応、rawレベルのカスタムウィジェット作成から、
プラットフォーム側に依存する課題に挑戦中のようです。
28

● Dart バックエンドサービスへの注視喚起
Google Cloud Functions/ Firebase Functions 対応未定の中
Clour Run, Cloud Pub/Sub, Eventarc を使った
Dart バックエンドサービス、Google Cloud Service 連携の提示。
アプリをどこでも実行できるようにする既定路線からの拡大喚起？
29

● 事業やサービスの技術基盤としての Flutter/Dart
Dart バックエンドサービスは、既定路線の拡大を表し、
フロントエンド(クライアント)＋バックエンドをカバーした
service oriented multi-platform framework への呼掛けを
個人的な想いですが、垣間見た気がします。
30
注意：各ベースプラットフォームのエキスパートの協力は必須！

31
ご清聴、
ありがとうございました。
情報修正があれば更新します
最新版スライドはこちらから

資料室
Google I/O 2021 Flutter Program 概要
32
見たい動画への参考にとどめ、
ご利用ください。

Google I/O 2021 Flutter Program 概要資料
Keynotes × 2
Sessions × 7
Q&As × 2
Workshops × 6
Demos × 3
Developer Stories × 1
Digest × 1
33
Google I/O 2021 で
発表や行なわれていた
Flutter 関係の催し動画

Google I/O 2021 Flutter Program 概要資料
Keynotes × 2
Sessions × 7
Q&As × 2
Workshops × 6
Demos × 3
Developer Stories × 1
Digest × 1
34
キーポイント概要報告のため、
軽い説明と資料 URL の紹介に
とどめています。
具体的な詳細については、
動画内で示されたコード例と、
URL 先資料の確認を願います。

Keynotes
（日本語字幕あり）
35

36
Developer Keynote (Google I/O '21)
https://www.youtube.com/watch?v=D_mVOAXcrtc&list=PLjxrf2q8roU19JGviPyeWc-SpDzou8Ug8&index=1&t=1772
Developer Keynote での２大キーポイント
● Flutter エコシステムの成長
○ 世界中の OSSコミュニティが開発に貢献
○ SONY、TOYOTA、Canonicle、Microsoft、
Samsung が Flutter デバイス対応を表明
○ Google Play 新規アプリの 20万件を占める
○ Google 内でも 30以上のチームで選択
● Flutter 2.2 発表
紙幅の関係で次ページに続く
Flutter 報告部 29:32〜33:41 ⇒ 1772〜2021 （約4分間）
発表時間が 4分ほどと短いため、
内容はダイジェストになっています。

Flutter 2.2 での取り組み
● 開発エクスペリエンス向上
○ デスクトップ向けのベータ版対応（
Windows、macOS、Linux）
○ 新規プロジェクトへのnull安全のデフォルト導入
○ 開発力強化 ⇒ DevTools の更新(メモリ割当元明示など)
● アプリ収益化
○ Google Mobile Ads SDK for Flutter を更新
○ Google Pay / Apple Pay プラグイン新提供
○ アプリ内購入プラグインを製品版に昇格
● Google エコシステム拡張
○ 今年後半提供の Material you に対応予定。
○ 利用可能な Google APIとクラウドサービスの拡張
○ Flutter Firebase のウェブサービス対応の進展
I/O Photobooth のような Flutter Web アプリも簡単に作れる。　
37

38
What's new in Flutter | Keynote
https://www.youtube.com/watch?v=40_tpAHwWcM&list=PLjxrf2q8roU19JGviPyeWc-SpDzou8Ug8&index=2
What's new in Flutter | Keynote キーポイント
● Flutter エコシステムの成長
○ 単一コードによるマルチプラットフォーム対応と
高い生産性とパフォーマンスによるコード量削減と開
発期間短縮から、品質向上にリソースが割け
世界で選ばれている。
○ Google Play 新規アプリの 20万件を占める。
○ Grap アプリ(東南アジア)は、2億以上のダウンロード
○ BMW は、エンジニア 300人体制でサービス提供
○ Tencent (中国) は、WeChat アプリ(12億ユーザー)だけ
でなく、より広範にアプリへの採用を予定。
…etc
● Flutter 2.2 発表
紙幅の関係で次ページに続く

Flutter 2.2 での取り組み (概要)
● 開発エクスペリエンス向上
○ 型エイリアスの追加
○ 新規プロジェクトへの null 安全デフォルト導入
○ Flutter for Web の進展（SunnyPlace ゲーム、FlutterFlow サービス）
○ デスクトップ対応のベータ版移行（ Windows、macOS、Linux）
○ adaptive app design
○ DevTools 改良（Memory タブ拡張）
● アプリ収益化
○ Google Mobile Ads SDKを更新
○ Google Pay / Apple Pay プラグイン新提供
○ アプリ内購入プラグインを製品版に昇格
● Google エコシステム拡張
○ Material Design ガイドライン更新予定
○ Dart でのサーバサイドアプリ構築
○ Google APIs 組込の拡張
● 開発者事例
○ STAIR 39
Google I/O 2021 における、
Flutter プログラム全体のまとめなので、
内容はダイジェストになっています。

40
● 型エイリアス
型エイリアスとして、
関数と関数以外の両者を扱うようして
特定用途を示す型記述にも、わかりやすく
短い名前(別名)が付けられます。
● null 安全
null 安全が、新しい Flutter アプリ
のデフォルト指定になりました。
また現時点で、
pub.dev 上位 1,000パッケージの
80％以上が null 安全に移行済です

41
● SunnyPlace ゲーム (Flutter for Web版)
Flutter for Web 製のゲームですが
Bonfire ゲームエンジンを使い、
フルスピードで実行されます。
● FluterFlow サービス (Flutter for Web製)
ブラウザ上で Firebase 連携可能な
本格的 iOS/Android アプリをD&D
FASTER, EASIER, LESS CODE で作成。
bonfire 1.1.2
https://pub.dev/packages/bonfire
FlutterFlow - Build Flutter Apps Visually
https://flutterflow.io/

42
● デスクトップ対応のベータ版移行等
Windows, macOS, Linux ベータ版移行と
デスクトップ固有のテキスト挙動(キーイベ
ント等) の再構築、ユーザー補助やシステ
ム手動統合のサポートおよび、
Microsoft UWP 初期アルファ版も追加
Apple M1チップと Microsoft ゲーム機の対応実験も着手
● adaptive app design
同一コードで mobile, Web, desktop
アプリに対応するため、画面サイズや
入力モードやプラットフォーム固有の違い
に動的適応させる適応設計概念
https://www.youtube.com/watch?v=RCdeSKVt7LI&list=PLjxrf2q8roU19JGviPy
eWc-SpDzou8Ug8&index=7&t=1s

43
● DevTools 改良 (Memoryタブ強化)
オブジェクト領域の割当コード先
の明示
や、メモリ割当タイムラインにカスタムイベ
ントを挿入できるようになりました。
● Google Mobile Ads SDK for Flutter
Ads SDK は Open Beta 版に移行。
null 安全や最新 iOS GMA SDK と、
Adaptive Banner (広告サイズの最適化
) に対応
Using the Memory view
https://flutter.dev/docs/development/tools/devtools/memory

44
● アプリ内購入プラグイン製品版移行
アプリ内でのゲームコインや仮想アイテム
の販売がベータ版から昇格しました。
(コー
ドラボも用意されています)
● Payプラグイン新規提供
Google Pay と Apple Pay に対応した
プラグインが Google から新規提供されま
した。
pay 1.0.5

45
● Material Design ガイドライン更新予定
Material Design ガイドラインは、
adaptive app design や大画面に対応し
た最新版になる予定です。(今年後半予定)
● Dart サーバサイドアプリ構築
数千の同時アクセスを捌くDartPad や毎
日数百万リクエストのpub.dev は、サービ
ス基盤が Google Cloud 上の
つまり大規模開運用も耐えられます。
Navigation rail
https://material.io/components/navigation-rail
大画面用に画面左右に縦配置する
Bottom Navigation Bar 類似 Widget

● Dart サーバサイドアプリ構築
Dart はすべてのリリースのDockerイメージを提供しています。
Dockerfile から最新のSDKを搭載したコンテナを簡単に起動でき、
３つのファイルに対して 10行ほどのコードを書くだけで起動できます。
46
shelf 1.1.4
Using Google Cloud
Dart の事前コンパイラによ
り、バイナリサイズは
750mb ⇒ 11mb のように
減少します。
Dockerfile から、
GCP Cloud Run への
デプロイも可能です。

47
● Google APIs 組込
Flutter アプリと Dart サービスで使える、
Google API パッケージは 180 以上あり、
Gmail, Youtubeや BigQueryを提供します。
● Developer Stories (開発者事例)
STAIRは、PTSDに苦しむ退役軍人さんの
心を支援するアプリです。
Google APIs
https://flutter.dev/docs/development/data-and-backend/google
-apis
STAIR (Flutter デベロッパーストーリー )
https://www.youtube.com/watch?v=2S-KkvFuLWs&list=PLjxrf2
q8roU19JGviPyeWc-SpDzou8Ug8&index=10
https://www.youtube.com/watch?v=z4MsuZiEezY&list=PLjxrf2
q8roU19JGviPyeWc-SpDzou8Ug8&index=4&t=1s

48
Google I/O 2021 Flutter プログラム一覧

49
● I/O Photobooth
Dash や Droid と記念撮影ができる
Flutter for Web 製のサービスです。
● Flutter / Dart Team document
https://medium.com/flutter/how-its-made-i-o-photo-booth-3b83
55d35883
I/O Photo Booth
https://medium.com/flutter/announcing-flutter-2-2-at-google-i-o
-2021-92f0fcbd7ef9
7067
039

Sessions
50

51
Why null safety?
ヌル安全は、ヌル排除を目指していません。
ただ変数をヌル許容と非ヌル許容に分割します。
①非ヌル許容には、ヌルを渡せなくなり。
②ヌル許容には、ヌルは渡せるがメソッドはチェック必須。
アプリ開発は、改良変更のサイクルです。
Flutter の開発サイクルは、Hot Reloadと静的解析により削減
されています。
ヌル安全の導入は、アプリを魅力的にするものではありません
が、Null Pointer クラッシュの原因とバグ解析時間を更に減ら
してくれます。
ただヌル安全も完全ではありません、
静的解析にも限界があるので、その対応の学習コストやコード
も増えますが、それに見合う見返りがあるのです。
Hot Reload と
静的解析により
サイクル削減
開発サイクル

52
Why null safety? | Session
https://www.youtube.com/watch?v=tP9TcrUZoIs&list=PLjxrf2q8roU19JGviPyeWc-SpDzou8Ug8&index=3&t=1s
Understanding null safety
https://dart.dev/null-safety/understanding-null-safety
ヌル安全前のコンパイルコードは、ヌルの可能性があ
り、ヌルチェックやハンドリングが入るため、コード量はそ
の分大きく実行も遅くなります。
ヌル安全なコンパイルコードは、文脈上ヌルが来ないこ
とが保証されるため、コード量はその分小さく最適化さ
れるので、大規模プログラムならサイズは小さく、パ
フォーマンスも高くなります。
デモ画面
function.dart
Why nullable types?
https://medium.com/dartlang/why-nullable-types-7dd93c28c87a
Sound null safety
https://dart.dev/null-safety

53
今日のアプリは、サービスとの連携が必須でしょう。
Google API パッケージを使えば、2カテゴリ(①②)かつ、
180個を超えるサービスが利用ができます。
　① ユーザアカウントデータ用 API（GMail, Youtube等）
　② クラウドサービス用 API (BigQuery, Compute Engine等)
①を使うには、GCP プロジェクトを作り、
使いたいサービスを提供する API を有効にして、
データアクセスのスコープを限定する設定を行います。
ユーザデータにアクセスするため OAuth 認証を行い、
認証済クライアントを取得してアクセスします。
②を使うには、上記にサービス側のサービスアカウントの作成
を追加して、サービスの認証情報を使ったサービスアカウント
を介したバックエンド API の操作を行います。
ユーザーに、バックエンドサービスを直接アクセスさせません。

54
数千の同時アクセスを捌く DartPad や、毎日数百万リクエスト
に耐える pub.dev は、サービス基盤が Google Cloud 上の
下記の完全にコンテナ化された10行コードの
Dart サーバは、Google Cloud Run に５分以内で
デプロイできます。
デモ画面
function.dart
Dart サーバは、バックエンドサービス基盤
としての要求を満たしている。

55
Power-up your Flutter app with Google APIs | Session
https://www.youtube.com/watch?v=z4MsuZiEezY&list=PLjxrf2q8roU19JGviPyeWc-SpDzou8Ug8&index=4&t=1s
Using Google Cloud
動画内では、具体的な googleapi パッケージのコード例や、
Firestore 設定や gcloud コマンド例が紹介され、
Google API パッケージによる、
Google が提供するサービス(GMail や Youtube等) や
Google Cloud の優れたバックエンドAPI を使った
Dart ベースのサーバサイド・バックエンドサービス構築
の検討を勧めています。
デモ画面
function.dart
Google APIs
https://flutter.dev/docs/development/data-and-backend/goog
le-apis
shelf 1.1.4

56
C interoperability with Dart FFI
FFIは、foreign function interface の略で、
Dartコードから直接 Cライブラリ関数コール…、
つまり、プラットフォームOS の Cライブラリ(Windows の
Win32 API等)や、既存プロジェクトのC プログラムやライ
ブラリを呼び出せます。
C言語の呼出規約に従ってコンパイルすれば、
C++、Rust、Go など、他のプログラミング言語で書かれ
たコードもコールできます。
C ソースコードの関数を呼び出すには、
関数を含むダイナミックライブラリを開いて検索すれば、
Dartでのシグニチャ(関数名や引数と返値の型)に対応させてコー
ルできます。
チューンアップや既存資産の再利用に活用できます。

57
C interoperability with Dart FFI | Session
https://www.youtube.com/watch?v=2MMK7YoFgaA&list=PLjxrf2q8roU19JGviPyeWc-SpDzou8Ug8&index=6
mit-mit/ffi-talk (Sample code from this taik)
https://github.com/mit-mit/ffi-talk
C interop using dart:ffi
https://dart.dev/guides/libraries/c-interop
構造体や参照渡し、Cから Dartへのコールバック、
Dart オブジェクトにネイティブのファイナライザをアタッ
チすることもできます。
（これらの機能の詳細は、ドキュメントを参照）
動画では、SQLite をラップするサンプルも紹介していま
す。
デモ画面
function.dart

58
Building a desktop design language with Flutter
Flutterは、
クロスプラットフォーム・フレームワークなので、
デスクトップアプリも作成できます。
ですがデスクトップの UIは、操作作法や外観が決まっている
ので、アプリがネイティブウィジェットを使用しているように見
せるには、通常の Widget でなく raw レベルのカスタムウィ
ジェットの作成が必要です。
Widget は、Widget Tree(表示設定), Elemnt Tree(更新検知),
Render Tree(レイアウト/ペイント/ヒットテスト) で構成されるので、カ
スタムウィジェットは StatelessWidget でなく、
RenderObjectWidget, RenderObjectElement, RenderBox
などを使って作成する必要があります。
さらに Mouse Input、Keyboard Input、Focus Management、
Key Handling、Accessbility 対応も必要です
カスタムウィジェットを作るには、
Widget 以上を独自パッケージに置換する
必要がある。

59
Building a desktop design language with Flutter | Session
https://www.youtube.com/watch?v=z6PpxO7R0gM&list=PLjxrf2q8roU19JGviPyeWc-SpDzou8Ug8&index=6&t=1s
Chicago widget デモアプリは、
古い 32bit デスクトップ UI を模した Flutter カスタムウィ
ジェットのサンプルです。Flutterは、デスクトップにもウェ
ブにも高い適応性を持っています。
デモ画面
function.dart
The Mahogany Staircase - Flutter's Layered Design
https://www.youtube.com/watch?v=dkyY9WCGMi0
tvolkert/chicago
https://github.com/tvolkert/chicago
Flutter's Rendering Pipeline
https://www.youtube.com/watch?v=UUfXWzp0-DU
tvolkert - interactive demo
https://tvolkert.github.io/#/
chicago 0.1.0-dev
https://pub.dev/packages/chicago

60
Building platform adaptive apps
Flutterは、単一のコードベースからモバイルや
デスクトップや Webのアプリを構築します。
ですが単なるクロスプラットフォームでなく、
アプリが実行される画面のサイズと形状、
タッチやマウス＆キーボードなどの入力対応、
ユーザーが各プラットフォームに求める操作感
や
操作作法（ダイアログのクローズボタンの位置や、タブによる
フォーカス移動、明示的な機能ボタンを使わないコンテキストメ
ニュー）の違いを踏まえた、
プラットフォームごとの違いに完全適応した、
快適でシームレスな体験の提供が必要です。
デフォルトボタンの位置は、
Windows は右側、macOS は左側

61
https://www.youtube.com/watch?v=RCdeSKVt7LI&list=PLjxrf2q8roU19JGviPyeWc-SpDzou8Ug8&index=7&t=1s
プラットフォームごとの違いに適応させる
デモアプリ Flutter Folio のソースコードを
確認してみてください。
デモ画面
function.dart
Visual Density 表示密度の概念により、
同一コードのボタンであっても、
タッチするモバイルはサイズが大きく、
マウスを使えるデスクトップだと小さくなる。
Flutter Material Design
https://material.io/develop/flutter
Flutter Folio
https://flutter.gskinner.com/folio/#g-download
Widget catalog
https://flutter.dev/docs/development/ui/widgets
Building adaptive apps
https://flutter.dev/docs/development/ui/layout/building-adapti
ve-apps

62
Lazy Flutter performance
アニメーションなどのアセットを持つアイテムを
SingleChildScrollView で単純にリスト表示すると、アイ
テムを100個にすればスクロールが引っかかるようにな
り、1000個にすればクラッシュします。
また Rowウィジェットで、子ウィジェットを大量に表示さ
せても同様の問題を引き起こします。
これは、Flutterは画面に表示されていなくてもウィジェッ
トを生成するからです。

63
Lazy Flutter performance | Session
https://www.youtube.com/watch?v=qax_nOpgz7E&list=PLjxrf2q8roU19JGviPyeWc-SpDzou8Ug8&index=8&t=1s
Debug and profile your app with Flutter DevTools | Demo
https://www.youtube.com/watch?v=J7s5bu49k3U&list=PLOU2XLYxmsIL
U62c5HdPY5EQnUATTk04_&index=15
Flutter Lazy Performance
https://github.com/justinmc/flutter-lazy-performance
スクロールする場合はListView#buildで、
大量表示する場合はInteractiveViewer#builder内で表
示有無をチェックして、アイテムを表示都度ビルドするよ
うに工夫してください。
ウィジェットは、パフォーマンスチェックを行い、
見える範囲または次に表示する範囲だけの生成に絞っ
たり、表示データを単純化するようにします。
デモ画面
function.dart

64
Go full-stack with Kotlin or Dart on Google Cloud
Google Cloud Tech のセッションです。
Kotlin と Dart は、フロントエンドだけでなく、
バックエンドサービスの両方の開発ができます。
Cloud Runは、高度にスケーラブルでコンテナ化された
アプリケーションの開発やデプロイができる
フルマネージドなサーバーレス・プラットフォームです。
Eventarc は、異なるサービスからのメッセージやCloud
Storage のバケット追加などをトリガーに指定して、何ら
かの CloudEvent が発生するたびに Cloud Run サー
ビスに送信することができます。

65
Go full-stack with Kotlin or Dart on Google Cloud | Session
https://www.youtube.com/watch?v=JwCmu_INnCg&list=PLOU2XLYxmsIInpx6VfDxsRQS52JRYxbgO&index=70&t=1s
Full stack demo with Flutter and Cloud Run
https://github.com/GoogleCloudPlatform/functions-framework-dart/tree/m
ain/examples/fullstack
functions_framework 0.4.1
https://pub.dev/packages/functions_framework
また公式サポートではありませんが、
アプリケーションを関数として記述できるように
する Functions Frameworks ライブラリもあるそうで、
セッション後半では、
Flull Stack demo With Flutter and Cloud Run を使い、
Dart 言語で Cloud Run サービスのデプロイや実行を
行うデモを行っています。
デモ画面
function.dart

Q&As (AMA)
（日本語字幕なし）
66

公式パッケージでは
　ないことに注意
67
Cloud, Dart, and full-stack Flutter | Q&A
https://www.youtube.com/watch?v=r8rVm4-RJJM&list=PLjxrf2q8roU19JGviPyeWc-SpDzou8Ug8&index=11&t=1s
Dart 言語は、
Firebae Functions / Cloud Functions に対応していないので、
サーバレスサービスで使いたいなら、Cloud Run を使用します。
(Eventarc および pub/sub を使うことで Cloud Functions と　
類似したことができるようになります)
Dart チームは、
Dockerfile から shelf アプリ(HTTPサーバアプリ)を生成できる、
つまりアプリを簡単にコンテナ化してバックエンドにデプロイし、
Dart 言語で HTTPリクエストとレスポンスを手軽に受付/返却する
フレームワーク ⇒ functions_framework ⇒ も作成しています。
(Dockerfileを使っているので Cloud Run にもデプロイできます)
…などが話されていました。
Using Google Cloud
Google APIs
https://flutter.dev/docs/development/data-and-backend/google-apis
shelf 1.1.4
https://pub.dev/packages/shelfs/overview

68
Flutter in production: Stadia and Google Pay | Q&A
https://www.youtube.com/watch?v=9d5TR4URHrk&list=PLjxrf2q8roU19JGviPyeWc-SpDzou8Ug8&index=12&t=1s
Android 版の Stadiaでは、高速描画のためネットワークスタックと
プロトコルを処理するネイティブのコンパイル済みライブラリで、
ネイティブビューでビデオを表示している。
Stadia や Google Pay アプリのパフォーマンスを上げるため、
Dart DevTools や ADB を使って、時間やメモリ割り当てを
浪費している箇所を特定しチューニングした。
プラットフォームごとのベストプラクティスが異なるため、
やはり Android と iOS の専門エンジニアが必要。
Google Payは、数ヶ月前に完全に Flutter に移行した。
また移行の際には、技術的負債を積み上がっていたので、
最初から再コーディングを行った。
Dart のソースコードジェネレーションは、よく使われている。
Google では Protocol Buffersや gRPC を使った通信を行っており、
ORM への応用など、もっと活用できるかどうかを検討している。
…そうです。
Flutter によりコードベースが共通化しているため、
１．Android および iOS の両方で、
　　パフォーマンスチューニング効果があった。
２．Webとモバイルの翻訳リソース共有ができた。
３．デスクトップとモバイルの UI デザインが
　　似通わないようアダプティブデザインが必要

Workshops (Codelab)
（日本語字幕なし）
69

70
Get to know Firebase for Flutter | Workshop
https://www.youtube.com/watch?v=4wunbF29Kkg&list=PLOU2XLYxmsIKToc_JFCyRJN9eyrxbS0FG&index=12&t=1
Firebase認証のメールサインインや
Cloud Firestoreを使った簡単なチャットアプリで、
iOS/Android/web 別に Firebase console での設定や
基本的なセキュリティルールのコードを追加して、 Firebase の
基本的な設定と使い方を学びます。
FlutterのFirebaseについて知る
https://firebase.google.com/codelabs/firebase-get-to-know-flutter#0

コンテンツが動画内容と一部異なることに注意
71
Dart null safety in Action | Workshop
https://www.youtube.com/watch?v=HdKwuHQvArY&list=PLjxrf2q8roU19JGviPyeWc-SpDzou8Ug8&index=13&t=1
DartPad を使って
インタラクティブに null 安全対応を学ぶコードラボです。
動画 DartPad Workshop の URL が不明なため
下記 URL は、embedded DartPad を使った一部が異なる
インタラクティブに null 安全対応コードを学ぶ資料です。
Null safety codelab
https://dart.dev/codelabs/null-safety

72
How to manage application states using inherited widgets | Workshop
https://www.youtube.com/watch?v=LFcGPS6cGrY&list=PLjxrf2q8roU19JGviPyeWc-SpDzou8Ug8&index=14&t=1s
Step.1〜9 の手順を持つ DartPad Workshop を使い、ショッピ
ングカートアプリの状態を InheritedWidget で
管理させれば、状態変更が UI に自動反映できることが
学べます。　
Inherited Widget Workshop
https://dartpad.dev/workshops.html?webserver=https://dartpad-workshops-io2021.web.app/inherited_wi
dget&utm_source=google-io21&utm_medium=referral&utm_campaign=io21-resources

( Flutter でスクロールするものはすべてsliver となります )
73
Building scrolling experiences in Flutter | Workshop
https://www.youtube.com/watch?v=YY-_yrZdjGc&list=PLjxrf2q8roU19JGviPyeWc-SpDzou8Ug8&index=15&t=1s
Step.1〜8 の手順を持つ DartPad Workshop を使い、
コンテンツのスクロールを SingleChildScrollView から ListView、
SliverList に変更したり、　
アプリバーを SliverAppBar に変更し、下スライドともに伸ばせる
ようにして、豊かなスクロール表現方法を学びます。
注意）Step.7 SHOW SOLUTION 32行目の丸ブレース末尾に',' の追加修正が必要
Sliver Workshop
https://dartpad.dev/workshops.html?webserver=https://dartpad-workshops-io2021.web.app/getting_start
ed_with_slivers&utm_source=google-io21&utm_medium=referral&utm_campaign=io21-resources
Using slivers to achieve fancy scrolling
https://flutter.dev/docs/development/ui/advanced/slivers

74
Building your first Flutter app | Workshop
https://www.youtube.com/watch?v=Z6KZ3cTGBWw&list=PLjxrf2q8roU19JGviPyeWc-SpDzou8Ug8&index=16&t=1s
flutter.dev の Write your first Flutter app, part 1 と同一の、
ランダム単語が無限スクロールするリストを作成します。
動画はパート１のみの実演ですが、
タッチした選択一覧を表示するパート２もあります。
このコードラボは、日本語版を選択することができます。
初めての Flutter アプリの作成（パート 2）
https://codelabs.developers.google.com/codelabs/first-flutter-app-pt2#0
初めての Flutter アプリの作成（パート 1）
https://codelabs.developers.google.com/codelabs/first-flutter-app-pt1#0

75
初めての Flutter アプリの作成 (補足資料)
このコードラボは、日本語で実践できますが、
実際に作業するには、 Fluter SDK のインストールや、
Android SDK / Xcode のインストール(環境構築)が必要です。
そこで環境構築をしなくても体験できるよう、
DartPad のみで実践可能にする手順資料を作りました。
画面下 URL の DartPad 実践用資料 PDF を参考に、
english_words パッケージと同等コードの main.dart への組
み込み…などの作業差分を行うことで、環境構築しなくてもブ
ラウザがあれば実践することができます。
よろしければ、御利用ください。
初めての Flutter アプリの作成 DartPad 実践用資料 (作業差分)
https://gdg-nara.github.io/codelabs-ja/ﬂutter/dartpad/Hands-on_subdocument_for_DartPad_participation.pdf

76
Build voice bots for mobile with Dialogflow and Flutter | Workshop
https://www.youtube.com/watch?v=O7JfSF3CJ84&list=PLOU2XLYxmsIKToc_JFCyRJN9eyrxbS0FG&index=22&t=1s
会話型UI 構築開発スイートの
Dialogflow Essentials (ES)を使った、
テキストと音声に対応した簡単な Flutter チャットボット
アプリの作り方の講座です。
dialogflow_grpcパッケージ( https://pub.dev/packages/dialogflow_grpc ) を
利用して、DialogFlow で設定したインテントと応対できるようにしていま
す。
DialogflowEssentialsとFlutterを使用してAndroid用のボイスボットを構築する
https://codelabs.developers.google.com/codelabs/dialogflow-flutter#0

Demos
77

78
Automatically adapt to API changes with Flutter Fix | Demo
https://www.youtube.com/watch?v=HVfOGVhevDM&list=PLjxrf2q8roU19JGviPyeWc-SpDzou8Ug8&index=18&t=1s
Flutter API の変更により、
既存のコードが非推奨指摘されることもありますが、
現在のFlutter SDKには APIの変更を表すルールが含まれ、
IDE のプラグインは、コードを適切に自動変更できます。
非推奨コード行に、修正を促す電球アイコンが表示されます。
プロジェクト全体を一括修正したいのなら、
dart fixコマンドを使います。　　　　
修正指摘一覧の表示には、 $ dart fix --dry-run
全修正を一括適用するなら $ dart fix --apply
…が利用できます。
Flutter Fix
https://flutter.dev/docs/development/tools/flutter-fix

詳細はこのリンク先を参照ください
79
Debug and profile your app with Flutter DevTools | Demo
https://www.youtube.com/watch?v=J7s5bu49k3U&list=PLjxrf2q8roU19JGviPyeWc-SpDzou8Ug8&index=19&t=1s
Flutter DevToolsは、Flutter SDK に同梱された
デバッグやプロファイリングのツール群です。
アプリ実行時にアイコンをクリックするか、
虎縞の Layout Overflow 例外のリンクで開くことができ、
Flutter Inspector で、UI レイアウトの詳細を確認、
Performance で再描画などのイベントを時系列で表示、
CPU Profiler でコールツリーの処理時間を確認、
Memory でタイムラインのメモリ消費を表示、
Network で HTTPS接続のヘッダやコンテンツ表示、
ロギングツールで、一般的なログと診断情報を表示、
アプリサイズアナライザで、コンパイルされたアプリの
領域が、どのように使われているのかを確認できます。
DevTools
https://flutter.dev/docs/development/tools/devtools/overview

80
Adaptive Design | Demo
https://www.youtube.com/watch?v=7HeXcA4zDxY&list=PLjxrf2q8roU19JGviPyeWc-SpDzou8Ug8&index=20&t=1s-SpDzou8Ug8&index=10
Flutterは、
iOS / Android / Web / Windows / macOS / Linux に
対応したマルチプラットフォーム SDKです。
画面サイズや縦横レイアウトの違いを
MediaQuery でサイズを調べてレスポンシブに、
タップやマウス＆キーボード入力の違いによる視覚密度を
デスクトップやモバイルごとの VisualDensity で指定し、
アダプティブに自動適応 (対応)させることができます。
マルチプラットフォーム開発に役立つテクニックと設計基礎
Creating responsive and adaptive apps
https://flutter.dev/docs/development/ui/layout/adaptive-responsive
Designing truly adaptative user interfaces
https://aloisdeniel.com/#/posts/adaptative-ui

Developer Stories
81

82
STAIR (Flutter デベロッパーストーリー)
https://www.youtube.com/watch?v=2S-KkvFuLWs&list=PLjxrf2q8roU19JGviPyeWc-SpDzou8Ug8&index=10
STAIRは、PTSDに苦しむ退役軍人さんの
心を支援するアプリです。
不安症状を自己管理できるよう、
取るべき行動のヒントを出し、
自分の感情や世界をどう受け止めるかを
コントロールできるようにします。
シングルコードベースでの開発により、
開発期間が少なくとも 30%短縮できたので、
より良いコンテンツの作成に時間をかけられ、
利用しやすいアプリが開発できたそうです。
Flutter は、
ゲームアプリやビジネスだけでなく、
心を支援することにも役立っています。

Google I/O 2021
Flutter Digest
83

84
Top 7 Flutter things to know from Google I/O 2021
https://www.youtube.com/watch?v=S5aK3TIOnIw
Google I/O Flutter Top 7 +α (トピックス)
1. Flutter 2.2
2. Null Safe by default
3. Desktop improvements
4. DevTools
5. Payments & monetization
6. Flutter in production
7. Flutter + Google
+. I/O Photo Booth
ダイジェスト(要約報告) なので、
トピックの詳細説明はありません。
ここで取り上げられたトピックが、
重要な理由や、どの様に利用するのかは
各セッションやURL 先のドキュメントを
確認する必要があります。
- Adaptive Design, Dart ffi
　デスクトップとの親和性
UP
- Null 安全
　バグを未然に防いで開発速度
UP
- デバッグ＋チューンアップ力向上
- Google mobile広告, アプリ内課金
　公式のプラグイン製品版を公開
- 30以上の Googleプロダクトが、
Flutterを採用　
- Google API 運用サービスも、
Cloud Run 上の Dartで運用　
- Flutter for Web 実用アプリ
　写真撮影＋Firebase連携アプリ
　プロジェクトリポジトリも公開
- Flutter 2.2
　Flutterの品質と生産性の向上

85
https://medium.com/flutter/announcing-flutter-2-2-at-google-i-o-2021-92f0fcbd7ef9
Flutter 2.2
Why nullable types?
https://medium.com/dartlang/why-nullable-types-7dd93c28c87a
Sound null safety
https://dart.dev/null-safety
null safety
関連資料

86
Creating responsive and adaptive apps
https://flutter.dev/docs/development/ui/layout/adaptive-responsive
C interop using dart:ffi
https://dart.dev/guides/libraries/c-interop
関連資料
DevTools
https://flutter.dev/docs/development/tools/devtools/overview
DevTools - Adding user custom events to the timeline
https://flutter.dev/docs/development/tools/devtools/memory#adding-u
ser-custom-events-to-the-timeline
Desktop improvements
DevTools

87
pay 1.0.5
関連資料
Apps take flight with Flutter
https://flutter.dev/showcase
Payments & monetization
Flutter in production

88
Google APIs
https://flutter.dev/docs/development/data-and-backend/google-apis
Using Google Cloud
https://dart.dev/server/google-cloud?utm_source=go-link&utm_medium=referral&ut
m_campaign=go-cloud
関連資料
I/O Photo Booth
https://medium.com/flutter/how-its-made-i-o-photo-booth-3b8355d35883
flutter/photobooth
https://github.com/flutter/photobooth
Flutter + Google
I/O Photo Booth

Flutter at Google I/O 2021
動画リスト
89

90
Flutter at Google I/O 2021 動画リスト
https://www.youtube.com/playlist?list=PLjxrf2q8roU19JGviPyeWc-SpDzou8Ug8

Google I/O 2021 Flutter 全体報告

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Google I/O 2021 Flutter 全体報告

Similar to Google I/O 2021 Flutter 全体報告 (20)

More from cch-robo

More from cch-robo (10)

Recently uploaded

Recently uploaded (9)

Google I/O 2021 Flutter 全体報告