Flutter_Forward_Extended_Kyoto-Keynote_Summary

Flutter Forward
Keynote まとめ
1
robo
Flutter Forward Extended Kyoto

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

Flutter Forward 概要
Flutter Forward は、
Flutter のこれまでの成果として
開発に役立つツールのライブデモや実際の活用事例の紹介と、
Flutterのこれから向かう方向について、
ウェブ、モバイル、その他の分野でどのように投資するのか
現在の進捗状況を共有したイベントです。
4
Flutter Forward
https://flutter.dev/events/flutter-forward
開催日時：2023/01/25 PST 06:30-08:30
開催場所：ナイロビ（ケニア）
開催形態：オンライン YouTube Live

6
Keynote 35:00 - 35:17
With this event, we want to give you some sneak previews
of a lot of different features that aren't yet stable quality but
represent work in progress.
Because we don't want just you to buy into Flutter for what
we have today, but also based on where we're going.
Keynote 35:00 - 35:17
このイベントでは、まだ安定した品質ではなく、
多くの開発進行中を表すさまざまな機能の
プレビューを提供したいと考えています。
Flutter の現在の機能だけでなく、
今後の方向性に基づいて判断してもらいたいからです。
Flutter Forward イベント方針

おわび
Flutter Forward は、
Flutter がこれから進む方向性を共有するイベントのため、
新機能は、開発中プレビュー版を使った紹介になっています。
このため安定版 API の提供や使い方の説明もなく、
アプリ開発で活用できるような具体的な技術情報は限られます。
新技術情報を提供できず、申し訳なく思います。
7

8
Keynote 中では、
GitHub 貢献者数 3位のOSS であることや、
Flutter 3.7 リリースの発表もありましたが、
技術的な詳細に触れられていないものは、
まとめから割愛させていただきます。
報告のみ発表は、割愛します
Flutter 3.7正式リリース。
スクリーンサイズにUIレイアウトが自動対応、GPU活用による高速描画エンジン「Impeller」がプレビューに
https://www.publickey1.jp/blog/23/flutter_37uigpuimpeller.html

Flutter 3.7 リリース報告
9

10
● マテリアル３サポート強化
ラジオボタン、スライダー、バッジなどのウィジェットが
マテリアル３に移行されます。
マテリアル３サポート強化

11
● アダプティブレイアウト対応
プラットフォームや画面サイズに応じて
適切なUI表現ができるようにする仕組みを強化した。
アダプティブレイアウト
対応

12
● メニューバー、カスケードコンテキストメニュー対応
メニューバーとカスケードコンテキストメニューを
作成できるようになりました。
メニューバー、カスケード
コンテキストメニュー対応

13
● Impellerプレビュー対応
開発中の Impeller レンダリングエンジンが、
iOS 安定版チャンネルでプレビューできるようになりました。
Impeller プレビュー対応

14
● iOS リリースプロセスサポート強化
Xcodeが必要な iOS アプリの App Storeリリース前検証について、
検証の一部を $ flutter build ipa コマンドで対応できるようになりました。
iOS リリースプロセス
サポート強化

15
● DevTools アップデート
メモリデバッグツールを全面的に刷新し
アプリのメモリ使用量を分析する新機能を追加しました。
DevTools アップデート

16
【参考】Flutter 3.7 詳細については、こちらを参照ください。
What’s new in Flutter 3.7
https://medium.com/flutter/whats-new-in-flutter-3-7-38cbea71133c

Flutter Forward Keynote
Agenda
17

18
開発ツール紹介
● Flutter Firebase
● FlutterFlow
● Widgetbook
活用事例紹介
● PUBG MOBILE
● Google
Classroom
Flutter & Dart 新機能プレビュー
● Dart 3α
○ records and patterns
○ Sound null safety
● Dart portability
○ RISC-V
○ WebAssembly
● Flutter web optimizations
● Element embedding
● Pixel shaders
● Flutter News Toolkit
● Wonderous
● FFIgen & JNIgen
● Impeller
○ 3D support
Flutter Forward Keynote Agenda

開発ツール紹介〜活用事例紹介
19

Flutter Firebase ライブデモ
20
ライブデモでは、
Firebase SDK 導入やログイン・ページにGoogle Sign in を追加して、
アプリバーにログイン・アカウントのアイコンを表示させていました。
特に目新しい技術的情報はありません。

FlutterFlow ライブデモ
21
FlutterFlow - Build beautiful, modern apps incredibly fast!
https://flutterflow.io/
教育機関のメールアドレスがあれば、
学生と教育関係者は FlutterFlow の
プレミアム機能を全て無料で使えるそうです。
FlutterFlow は、
Flutterアプリのビジュアル開発ツールです。
ライブデモでは、２画面を持つアプリを
背景画像を差し替えたり、多言語対応させて作
りあげるだでけなくApp Store にデプロイできる
とも説明されていました。
ライブデモと発表を行った、
CEO Abel Mengistu、CTO Alex Greaves の
お二人は、元Google エンジニア。

Widgetbook 紹介
22
Widgetbook - The Custom Widget Library for Flutter
https://www.widgetbook.io/
Widgetbook は、
UIウィジェットをカタログ化するコラボレーション・パッ
ケージです。
使い方としては、アプリ開発プロジェクト内に
Widgetbook 用のプロジェクトを配置して、アプリで
使っている UI Widget を import させれば、
Widgetbook をアプリとして起動すると、
誰でも手軽に UIウィジェットを一覧表示したり、テーマ
や画面サイズごとの外観の変化を確認できるようにな
ります。
ウィジェットのカタログ化パッケージは、
Widgetbook のほかにもコミュニティ内で、
dashbook、monarch、storybook_flutter が
公開されているそうです。

PUBG MOBILE 事例紹介
23
PUBG MOBILE
https://pubgmobile.com
"PUBG MOBILE" 開発チームが、
プレーヤー体験のキーパートとなる機能の作成
に Flutter を役立てた事例です。
"PUBG MOBILE" は、
プレーヤーが無人島に降り立ち、
独力またはチームメイトと一緒に最後の１人にな
るまで戦うバトルロイヤルゲーム

Google Classroom 事例紹介
24
Google Classroom は、
世界中の 4000万〜1億5000万人以上の生徒
や教師が利用する、教育現場のオンライン学習
を効率化させるコラボツールです。
Flutter により、モバイルコードの 98% を共有す
ることができただけでなく、
現在ベータ版ですが、ブラウザで練習問題をデ
ジタルペンを使って解答できるよう、
WebGL
ベースのグラフィックスキャンバスで手書きを表
現することもできたそうです。

Flutter & Dart 新機能プレビュー
25

Dart 3α
26
Dart 3 安定版は、今年中のリリース予定
Dart 3αは、ファーストプレビュー版
● 新言語機能
○ records （タプル）
○ patterns （パターンマッチング）
● 重大変更
○ 100% null safety
● プラットフォームサポート
○ RISC-V
○ WebAssembly

records
27
records のデモでは、
言語仕様的な解説は少なく、
緯度と経度のペアを使った、
実装の方法に絞った説明をされて
います。

patterns
28
patterns のデモでも、
言語仕様的な解説は少なく、
Shape インターフェースを
実装した Square と Circle の
型による振り分けと、
フィールド値の仮引数への割当
実装の方法に絞った説明をされて
います。

records
複数の異なる型（あるいは同じ型）の値の組み合わせを表すオブジェクトを定義します。
● 新たにクラスを作らなくても、
複数の値の組み合わせを一括で表すオブジェクトが作れるようになりました。
手軽に関数結果で返したり受け取ることができるようになります。
● 表記は、丸括弧で型の組み合わせを指定します。
29
records は、Python や Swift でいう Tuple (タプル) に近い概念です。
タプル ⇒ https://ja.wikipedia.org/wiki/%E3%82%BF%E3%83%97%E3%83%AB
// （例）商品IDから、商品情報（商品名と価格）を取得する。
(String, int) getProductInfo(int id) => (nameMap[id], priceMap[id]);

patterns
Dart言語でのパターンマッチ機能です。
30
代数的データ型とパターンマッチ入門
https://zenn.dev/blackenedgold/books/compiling-pattern-matching/viewer/pattern_matching_basics
代数的データ型
https://ja.wikipedia.org/wiki/%E4%BB%A3%E6%95%B0%E7%9A%84%E3%83%87%E3%83%BC%E3%82%BF%E5%9E%8B
【引用】代数的データ型とパターンマッチ入門
“ パターンマッチとは、代数的データ型などのデータ型を
パターン（pattern）を用いて分解し、値を変数に束縛する機能です。
“

patterns
【私的意訳解説】
● データを表すオブジェクトの型のパターンを満たすもののみふるい分け、
オブジェクトの型から特定した構成要素の値を仮引数に割り当てる機能です。
Dart でのパターンマッチングは、switch 文（または式）で適用されます。
switch 文/式では、さらに when 条件式のパターンを用いたふるい分けもできます。
31
// パラメータ名 name と price を持つタプルを生成
({String name, int price}) info = (name: 'チョコレート', price: 100);
// 上記タプルの持つ price 値をパターンマッチ特定して出力
int price = switch (info) {
(name: String id, price: int value) => value, _ => 0, };
print('値段 $price円'); // 値段 100 円

records & patterns ドキュメント
Dart 言語でのタプルとパターンマッチングの仕様は、
以下のドキュメントに従うと思われます。
32
Records Feature Specification
https://github.com/dart-lang/language/blob/master/accepted/future-releases/records/records-feature-specification.md
Patterns Feature Specification
https://github.com/dart-lang/language/blob/master/accepted/future-releases/0546-patterns/feature-specification.md
Bringing pattern matching to Dart
https://www.youtube.com/watch?v=KhYTFglbF2k&list=PLjxrf2q8roU3LvrdR8Hv_phLrTj0xmjnD&index=11

records & patterns を試す
33
DartPad （Dart master チャネル）
https://dartpad.dev/?channel=master&id
DartPad では、
Dart master channel を
選べば、Dart 3α が利用
できます。
records と patterns を
DartPad で体験してみて
ください。

100% null safety （制約）
● Dart 3 では、100% null safety のコードしか実行できません。
Dart 3 では、すべてのコードが null safety on で実行されます。
このため null safety 非対応の Dart 2.12 未満や、
Dart 2.12 以降であってもコードファイル中の // @dart=2.9 指定
などで null safety off でビルドされていると実行できなくなります。
備考：通常 Flutter 2.0.0 以上であれば、Dart 2.12.0 以上になっています。
また null 安全移行済みのほとんどのコードは、問題なく動作するとのこと。
34
Sound null safety
https://dart.dev/null-safety

100% null safety （恩恵）
● 100% null safety のおかげでコードが小さく速くなります。
コンパイラは、コードの not null 保証ができるようになることから、
よりコードの最適化ができるようになります。（下記命令数例参照）
Dart 1 では、コンパイラが 26個のマシンコード命令を生成します。
Dart 2 で sound null safety を使えば、マシンコード命令を10個にできます。
Dart 3 は、100% null safety により、マシンコード命令を３つにできます。
35

Dart 3α
● Dart 3α 入手方法
Dart 3 アルファ版は、現在(2023/03/25)
Dart dev チャンネルと Flutter マスターチャンネルで取得可能です。
Dart SDK archive#Dart 3 alpha
https://dart.dev/get-dart/archive#dart-3-alpha
● Dart 3 下位互換性
Dart 3 の重大な変更に依存しないコードであれば、
Dart 2.12.0 以上で上限が 3.0.0 未満のパッケージは、
Dart 3と下位互換性があるとして移行可能です。
Sound null safety#Dart 3 and null safety
https://dart.dev/null-safety#dart-3-and-null-safety
36
下位互換バージョン設定例
environment:
sdk: '>=2.12.0 <3.0.0'

Dart portability
37
Dart コードからのネイティブコード・コンパイルに、
RISC-V と WebAssembly 対応が追加されました。
● portability
モバイルやデスクトップに Webなど、
異なるアプリ実行環境の垣根を超えた
コードの移植性のこと。
Dartコードから実行環境のプロセッサ
(ARM, Intel CPUなど) のマシンコードへの
コンパイルができることが前提になっています。
（考察）既存限界突破のためWebプリミティブと、
新規分野開拓のため組込機器にも手を拡げた？

Dart portability
38
● RISC-V（リスクファイブ）wikipedia より
縮小命令セットコンピュータ (RISC) の原則に基づいた、
オープン標準の命令セットアーキテクチャ。
使用料のかからないオープンソースライセンスで提供されている。
32、64、128ビットの3つのワード幅と、さまざまなサブセットをサポート。
● WebAssambly については、次の Flutter web optimizations で説明します。
RISC-V
https://ja.wikipedia.org/wiki/RISC-V
RISC-V向けAndroidが本格化、ARMと同等の扱いに
https://gihyo.jp/article/2023/01/android-weekly-topics-230119

Dart portability
39
RISC-V 対応は、組込分野からモバイルおよび様々なデバイスでメリットがあるとのこと。
ライブデモでは、ハンディデバイス（
Linux環境の RISC-V 搭載試作機）のターミナルから
Dart で書いたデモアプリ ⇒ demo.exe （Dart ⇒ RISC-V コンパイルした実行可能ファイル）を実行
させていました。

Dart portability
40
【補足】
Dart & Flutter は、
すでに組み込み機器で
使われています。
Nest Hub の CPU は、
Arm Cortex-A55 だそうで
す。
Wikipedia -
Google Nest
(スマートスピーカー) より

Flutter web optimizations
41
Flutterの実装は、汎用的なDOMベースの web framework として設計されていない。
目指すのは、新標準アーキテクチャに特化した the first web framework になることである。
新標準アーキテクチャ⇒ DOM をバイパスしてピクセルを直接描画できるCanvas、
Web で動作する JavaScript 以外の言語である WebAssembly を使った Web Archtecture。
CanvasKit は、Skia を使用して、
Canvas API よりも高度な機能セットをCanvas 要素
に描画する WebAssembly モジュールです。
CanvasKit - Skia + WebAssembly
https://skia.org/docs/user/modules/canvaskit/
CanvasKit - Quickstart
https://skia.org/docs/user/modules/quickstart/

42
● CanvasKit reductions (サイズの縮小)
● Font size reductions (サイズの縮小)
● Deferred loading (遅延読込)
● Improved concurrency(並行処理向上)
Flutter における Web 最適化として、
CavnasKit や Font サイズをコンパクトにして
遅延読込および同時実行制御を改善したことで、
ページ読み込み時間を40%短縮した。
ページ起動時の読込速度の改善(起動時間短縮)は、これからも続けるとのこと。

WebAssembly
43
デモでは、Chrome Canary 上の Flutter カウントアプリの
モジュール構成より main.dart.js と同列に main.dart.wasm が追加され、
Dart コードが WebAssembly にコンパイルされることを明示していました。
これからの Flutter では、
Web 環境で JavaScript を利用せず、
WebAssembly で動作させることが告げられ
ました！
ただし開発版Chrom (Chrome Canary)の
Experimental 機能を必要とするため、
まだ利用できないことも判明しています。

WebAssembly
44
デモ機 Chrome Canary の
設定画面(chrome://flags/)より
以下の Experimental 機能が
必要なようです。
● Experimental WebAssembly
● Experimental WebAssembly
JavaScript Promise Integrtion
(JSPI)
● WebAssembly Garbage
Colloction

WebAssembly
45
main.dart.js
● JavaScript を使わなくなる
ためか、中身が簡素になっ
ています。

WebAssembly
46
main.dart.wasm
● 新しく追加された
main.dart.wasm には、
WebAssembly コードが含
まれています。

WebAssembly
47
【補足】
Flutter (Dart) と
WebAssembly は、
昨年の Google I/O でも
発表されています。
この発表では、
WebAssembly にGCを
追加して、高水準言語対
応させるというものでし
た。

WebAssembly
48
【補足】私の昨年の Google I/O 2022 Extended
Web apps with Flutter: A love letter to modern browsers 報告から抜粋
● 新たなWeb標準の展望（Webにネイティブアプリの体験を )
すべてのプログラミング言語をWebAssembly のターゲットとするべく、
W3C と Chrome に WASM-GC (https://github.com/WebAssembly/gc)という
WebAssembly にガベージコレクションをサポートさせる追加提案をしている。
WebAssembly
https://webassembly.org/
Web apps with Flutter: A love letter to modern browsers
https://io.google/2022/program/8d2af92f-0fab-4c42-8036-a9a964552f71/

WebAssembly
49
Flutter は、ガベージコレクションの新標準である
開発中の WebAssembly GC を必要とするため、
この拡張機能が公開されれば、Web の Flutte は、
WebAssemblyにコンパイルするようになるようです。
WebAssembly が利用できれば、読込速度も向上し、
WebAssembly にコンパイルした他の言語と連携できます。

Element embedding
50
Flutter アプリ表示は、現在でも<iframe>で入れ子にして埋め込むことができますが、
この場合だと、<iframe>(サンドボックス)内と外部との連携ができない問題が生じます。
Element embedding とは、
Flutter アプリ表示を Webページの HTML 要
素として埋め込むことを表します。
これにより埋め込まれた Flutter アプリ画面
は、親Webページの子要素として表示制御で
きるだけでなく、親の JavaScript と連携でき
ることが特徴です。

51
Flutter カウンターアプリコンポーネントが埋め込まれた Web ページが紹介され、
アプリ ⇒ Web は、FAB ボタンタップで、Value テキストボックスのカウント値(緑枠)が
リアルタイムに反映更新される確認だけでなく、
Web ⇒ アプリとしてカウント値変更や、
CSS 操作でのドロップシャドウ、および横表示への変更などをさせていました。

52
さらに、アプリ表示を傾けてイメージ写真にハメ込み合成できることや、
傾いていてもテキスト入力が可能であること、アプリ表示の３
D回転までさせています。
これらは、Web ページに Flutter コンポーネントが div 要素で埋め込まれており、
Shadow ボタンや Value テキストも、単なる HTML 要素であることが説明されました。

53
<article>
<div id=”flutter_target”></div>
</article>
Web ページのHTML構造

Element embedding
前ページの説明
● 左上は、Flutter コンポーネント (赤枠)を埋め込んだ Webページです。
Shadow ボタン(紫枠) や Value テキストボックス(緑枠) も持っています。
○ コンポーネント(カウンターアプリ)は、div 要素に埋め込まれています。
54
Flutter コンポーネント
<div id=”flutter_target”></div>
Shadow ボタン
<input value="Shadow" data-fx="shadow" type="button" 〜省略〜 />

Element embedding
前ページの説明づづき
55
Value テキストボックス周り
<label for="value">
Value
<input id="value" value="" type="text" 〜省略〜 />
</label>
HTML 要素の詳細な設定内容やJavaScript のコードについては、
ライブデモで紹介されなかったため不明。

Pixel shaders
56
Pixel shaders は、
ローカルGPUでハードウェアアクセラ
レータを使ったグラフィック効果を実行
させる低レベル関数です。
ブラウザのスライダーに合わせ、リア
ルタイムで画像を粗くしたり高精細表
示させていましたが、いつリリースされ
るか約束できないとのこと。
Writing and using fragment shaders
https://docs.flutter.dev/development/ui/advanced/shaders
【注意】Pixel Sharders
との関連は不明

Flutter News Toolkit 紹介
57
ニュースパブリッシャー用のモバイルニュースアプ
リ開発用テンプレートです。
Firebase と Google Mobile Ads を含み、
データ分析、ソーシャルログイン、通知などが用意
されており、一部の先行ユーザーは、開発時間を
最大 80%短縮できたとのこと。
News Toolkit
https://flutter.dev/news
flutter/news_toolkit
https://github.com/flutter/news_toolkit
Overview | Flutter News Toolkit
https://flutter.github.io/news_toolkit/

Wondrous 次バージョン紹介
58
昨年8月にリリースされたリファレンスアプリにアダ
プティブデザインが採用され、さまざまな画面サイ
ズでイラストやアニメーションを美しく表示できるよ
うになりました。
Wondrous
https://flutter.gskinner.com/wonderous/
gskinnerTeam/flutter-wonderous-app
https://github.com/gskinnerTeam/flutter-wonderous-app

FFIgen & JNIgen
59
FFI は、
forigin function interface の略称です。
Dartから他のプログラミング言語の API を呼び出
す相互運用を表します。
ffigen.yaml に Objective-C の API 設定を記述し、
jnigen.yaml に Android - Java の API を記述して、
Dart から直接ネイティブAPI が利用できることを
紹介しています。（MethodChannel を使わない）
FFIgen は Dart から C API を、
JNIgen は Java Native Interface API との「相互運用性のためのパッケージ」です。
pub.dev に同名のプラグインが有りますが、現行とデモ版とでは仕様が異なっています。

60
iOS のネィティブAPI を利用するには、
ffigen.yaml に利用する Objective-C API を
呼び出すための設定を追加します。

61
ターミナルで、ネイティブ API との相互運用コードを生成
するコマンドを実行します。
$ flutter pub run ffigen --config ffigen.yaml

62
コマンド実行とともにコード生成ログが出力され、
./lib/ ディレクトリに Dart からネイティブ API を呼ぶ
xxxxxxxx_binding_generated.dart が生成されました。

63
生成された Dart ⇒ ネイティブAPI
バインディング(xxxxxxxx_binding_generated.dart) の
コード内容は、このようになっています。

64
Android のネィティブAPIを利用するには、
jnigen.yaml に利用する Android API を
呼び出すための設定を追加します。
補足

FFIgen & JNIgen
ライブデモで利用された FFIgen と JNIgen は、試験運用版です。
● iOS/macOSでは、FFI に Swift と Objective-C のサポートを追加中です。
● Android では、FFI と Android の Java Native Interface (JNI) を利用して、
Kotlin 記述の Jetpack ライブラリと Java 記述の Android ライブラリを
呼び出すことができるようにするそうです。
● ネイティブコードのヘッダー/インターフェースファイルに基づいて、
言語間の相互運用コードのバインディングを自動生成させるそうです。
65
iOSの Core Motion APIと Androidの HealthConnect API を呼び出すデモアプリ
flutter/samples/experimental/pedometer
https://github.com/flutter/samples/blob/main/experimental/pedometer

Impeller
66
Impeller は、
Flutter の新レンダリングランタイムです。
単純なシェーダーセットをプリコンパイルするこ
とで、アプリ実行時のシェーダーのコンパイル
ジャンクをなくし、現在以上のパフォーマンスを
目指しています。
Android はまだですが、iOS なら下記コマンドでプレビュー版を利用できます。
$ flutter run --enable-impeller
Impella 詳細やプレビュー版については、以下のドキュメントを参照ください。
Impeller ⇒ https://github.com/flutter/flutter/wiki/Impeller

Impeller + 3D support
67
複数アニメーションの描画デモ
左側の Skia が 7〜10fpsに対し、
右側の Impeller は 60fpsを出す。
Impeller は、ハイパフォーマンスだけでな
く、新しいユースケースのサポート（例として
3D描画）にも対応します。
3D対応は、まもなく公開されるとのこと

68
Image(image: AssetImage("assets/dash.png")); で、2D画像が表示される。

69
Scene(node: Node.asset("models/dash.glb")); で、3Dモデルが表示される。
.glb ファイルは、3Dモデルデータを表す。（デモでは、Blender を使ったと説明）

70
3Dモデル dash.glb ファイルは、
Blender で作成したそうです。

71
Scene(node: Node.asset("models/dash.glb", animations: “walk”)); で、
3Dモデルがアニメーション(ウォーキング)で表示される。 (モデルの色を変更しています )

Scene(node: manyNodes(Node.asset("models/dash.glb", animations: [“walk”])));
で、7x7x7 の 3Dモデルがアニメーション(ウォーキング)で表示される。
72

Keynote 締めくくり
73
すでに述べたように、これらはすべて実験的なものです。〜略〜
ですが重要な点は、これらが私たちの進む方向なのだということです。
As we've said, these are all experimental.
- snip -
But the key point here is that
they represent the direction we're going.

end
74

Flutter Forward #AskFlutter
Part 1
76
John Ryan - Flutter and Dart team
Kate Lovett - Flutter framework team
Rody Davis - Material Design team
Taha - Flutter contributors

#AskFlutter - Part 1
● Material 3 への移行を開始する適切な時期はいつですか
?
進捗とロードマップの確認はどうしたらよいのですか？
Material 3 への移行は、“今すぐ”です。
ThemeData で “useMaterial3: true” と設定しましょう。
サポート済みのウィジェットは、new colore scheme 表示に変わります。
ThemeData の useMaterial3 プロパティのAPIドキュメントにアクセスして、
サポートされているウィジェットの一覧をご確認ください。
ドキュメントにミスがあれば、バグレポートを送ってくださいとのこと。
77
この Q/A は、意訳と認識してください。
誤訳があると存じますので指摘をお願い申し上げます。
ThemeData class - useMaterial3 property
https://api.flutter.dev/flutter/material/ThemeData/useMaterial3.html

● Material 3 を完全に組み込んでいるサンプルアプリはありますか？
セッション動画(Material 3 from design to deployment)で利用した、
Pestoというレシピ発見アプリがあります。
また“reply”サンプルベースの flutter_adaptive_scaffold というパッケージもあります。
補足：NavigationRail や BottomNavigationBar は、大きく変わってますとのこと。
78
Material 3 from design to deployment ⇒ https://www.youtube.com/watch?v=7nrhTdS7dHg
material-foundation/pesto_flutter ⇒ https://github.com/material-foundation/pesto_flutter
flutter_adaptive_scaffold 0.1.2 ⇒ https://pub.dev/packages/flutter_adaptive_scaffold

● Material 3が完全にサポートされるのはいつですか？
移行を簡単に済ませられるよう、影響範囲を最小限にしたいことと、
Flutterをアップグレードしたために困った事態が起きないようにするため、
今のところ、まだ少しフォローアップが必要な段階です。
一部のウィジェットはMaterial 2 バージョンからシグニチャの変更がないので、
そのまま Material 3 のウィジェットに置き換え可能なものもありますが、
将来的には、置き換えるべきウィジェットの組み合わせと
Material 3 の効果を最大限に得るために微調整が必要なウィジェットについて
ガイドをまとめてユーザーに公開したいそうです。
79

● FlutterでMaterial 2のサポートを廃止する予定はありますか?
もし廃止するならスケジュールはどうなっていますか？
ライブラリについては、ほぼ完了しており、
ウィジェットはすでにほとんどMaterial 3 の仕様に移行していますが、
全て完了するのがいつになるのか、今はまだはっきりしていないそうです。
Material 2 のすべての機能を廃止しないが、
IDE のアナライザー警告がでるので、
IDE のクイックフィックス機能やfix コマンドを使った修正を勧めています。
80
dart fix | Dart ⇒ https://dart.dev/tools/dart-fix
Flutter Fix | Flutter ⇒ https://docs.flutter.dev/development/tools/flutter-fix

● Flutterを学ぶための資料はどこで入手できますか？
flutter.dev サイト、APIドキュメント、Codelabs、サンプルリポジトリ...
たくさんのコンテンツが公開されてるので自分の好きなスタイルをどうぞとのこと。
81
Flutter documentation | Flutter ⇒ https://docs.flutter.dev/
Flutter - Dart API docs ⇒ https://api.flutter.dev/
Codelabs & workshops ⇒ https://docs.flutter.dev/codelabs
flutter/samples リポジトリ ⇒ https://github.com/flutter/samples
Google Codelabs - Flutter ⇒ https://codelabs.developers.google.com/?product=flutter

● どうすれば Flutterのコントリビューターになれますか？
Contributing to Flutter ガイドをまず読んで
問題を探し自分で修正できそうだと思える問題を選択してください。
問題の解決に自信があるのでしたら、テストを書き、
PRを書き、
レビューを受けて PR を承認してもらうプロセスに進みましょう。
これらのプロセスや大量の問題に取り組むことに慣れてくださいとのこと。
82
flutter/CONTRIBUTING.md - Contributing to Flutter
https://github.com/flutter/flutter/blob/master/CONTRIBUTING.md

● 全ての Material 2 ウィジェットを、Material 3 ウィジェットに対応させるのですか
?
大抵のウィジェットは、Color と Semantics の両方とも以前と一致してますが、
現在のデザインに影響を与えるような大幅に変更されたウィジェットもあります。
ですので Material 3 の新しいデモアプリや、（以前に回答した）サポート済み
ウィジェットの一覧やAPI ドキュメントをチェックしてくださいとのこと。
83
（注）具体的なリンクが明示されていないので確証はありません。
Material Design for Flutter | Flutter ⇒ https://docs.flutter.dev/development/ui/material
Flutter – Material Design 3 ⇒ https://m3.material.io/develop/flutter
Material 3 ⇒ https://flutter.github.io/samples/web/material_3_demo/#/

Flutter Forward #AskFlutter
Part 2
84
John Ryan - Flutter and Dart team
Kate Lovett - Flutter framework team
Frand Van Puffelen - Firebase team

● デスクトップで Firebaseのフルサポートを受けられるのはいつですか？
（デスクトップ ⇒ Flutter for Windows）
Flutter での Firebase は、フェデレーションプラグイン方式を採用しています。
これは、ターゲットとする機能をFlutter で直接実現するのでなく、
ラップしている iOS や Android などのベースとなるプラットフォームを介して、
そのシステム用に提供されている機能を利用させてもらう相互運用方式です。
Windows は、Firebase がまだ完全に対応していないプラットフォームのため、
いつサポートができるようになるかは断言できない
…とのことです。
85

● firebase.flutter.devのコードサンプルが更新されないのはなぜですか？
Firebase の Flutter ライブラリは、昨年のGoogle I/Oで firebase.flutter.dev から
google.com での公式管理に切り替わり役目を終えています。
（アーカイブ済み）
ですが Flutter用の独自記述によりFirebase 公式に適合しないページがあったため、
公式の最新ドキュメントへのリンクを入れて公開を続けているのです。
ドキュメント間の不一致を調べている最中なので、協力を要請されています。
86
https://firebase.flutter.dev/ ⇒ アーカイブであり最新情報は以下を参照と注記済み
https://firebase.google.com/docs/flutter/setup#available-plugins

● Firebase SDKに関して何か知っておくべき新しいことはありますか？
現在の Firestore には、ドキュメント総数のカウントがサポートされています。
RDBでは、SELECT * とか COUNT * でターゲット総数を簡単に得られるのに対し、
NoSQLデータベースでは、原理上カウントするという選択肢がないのですが、
現在のFirestoreには、Firebase ドキュメントの総数を取得する
count() 集約クエリのサポートが追加されています。
87
注: この機能は公開プレビュー版です。
集約クエリを使用してドキュメントをカウントする
https://firebase.google.com/docs/firestore/query-data/aggregation-queries?hl=ja

● （iOS や Android では非同期呼び出しになっていないのに）
Firebase Flutter SDK では、非同期呼び出しが多いのはなぜですか？
ネットワークを介してサーバーからの結果を受け取る理由だけでなく、
フェデレーションプラグインのため相互運用先の結果を非同期で待つ必要があるから
…とのこと。（プラグインは非同期メソッドMethodChannel#invoke を利用する）
88
MethodChannel#invokeMethod<T> method
https://api.flutter.dev/flutter/services/MethodChannel/invokeMethod.html
Writing custom platform-specific code
https://docs.flutter.dev/development/platform-integration/platform-channels

● アプリを再起動するとログインユーザーがnull になるのはなぜですか？
Firebase Authentication は、
ログイン・ユーザーの認証情報をローカルストレージに保管しますが、
アプリ再起動時には、アプリが止まっている間にユーザ情報に変更がないかを
サーバーに確認しにいくので、完了までの間はnull になります。
89
詳細な説明や具体的な対応のサンプルコードとして、
下記の公式ドキュメントとスニペットを確認してくださいとのこと。
Firebase でユーザーを管理する
https://firebase.google.com/docs/auth/unity/manage-users?hl=ja

動画元リンク
91
Flutter Forward #askflutter - Part 2
https://www.youtube.com/watch?v=Ak-xlSOg-7g&list=PLjxrf2q8roU3LvrdR8Hv_phLrTj0xmjnD&index=5
Flutter Forward #askflutter - Part 1
https://www.youtube.com/watch?v=7740DZrN75c&list=PLjxrf2q8roU3LvrdR8Hv_phLrTj0xmjnD&index=19
https://www.youtube.com/watch?v=goL7tvLQ7Dw&list=PLjxrf2q8roU3LvrdR8Hv_phLrTj0xmjnD&index=3
Flutter Forward 再生リスト
https://www.youtube.com/playlist?list=PLjxrf2q8roU3LvrdR8Hv_phLrTj0xmjnD

関連資料リンク
92
Announcing the Flutter News Toolkit
https://medium.com/flutter/announcing-the-flutter-news-toolkit-180a0d32c012
Introducing Dart 3 alpha
https://medium.com/dartlang/dart-3-alpha-f1458fb9d232
What’s new in Flutter 3.7
https://medium.com/flutter/whats-new-in-flutter-3-7-38cbea71133c
What’s next for Flutter
https://medium.com/flutter/whats-next-for-flutter-b94ce089f49c
How it’s made: Holobooth
https://medium.com/flutter/how-its-made-holobooth-6473f3d018dd
Adapting Wonderous to larger device formats
https://medium.com/flutter/adapting-wonderous-to-larger-device-formats-ac51e1c00bc0

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

Flutter_Forward_Extended_Kyoto-Keynote_Summary

Recommended

Recommended

More Related Content

Similar to Flutter_Forward_Extended_Kyoto-Keynote_Summary

Similar to Flutter_Forward_Extended_Kyoto-Keynote_Summary (20)

More from cch-robo

More from cch-robo (15)

Flutter_Forward_Extended_Kyoto-Keynote_Summary