再実装Flutter: UIフレームワークをゼロから自作する

速川 湧気

Jan 2023 · インプレスR&D

Mayelana nale ebook

Widgetを組み合わせるだけでさまざまな画面を作ることができるFlutterですが、なぜそのようなことが可能なのでしょうか。「setState()の魔法」で簡単に画面を書き換えられるのがFlutterですが、なぜそのようなことが可能なのでしょうか？

本書ではFlutterを自身で1から実装し直し、「Flume」という新たなUIフレームワークを作ります。再実装を通じて、UIフレームワークを支える複雑な世界と、Flutterの高速動作を支える差分更新システムの理解を目指します。

Flutter自体はすでに巨大かつ複雑なソフトウェアであり、隅々まで実装するのは困難です。そのためFlumeでは本質的に重要な機能のみをピックアップして説明・実装することにします。
またFlutterのEngineとフレームワークがどのような関係になっているのか、画面をいかに効率的に更新しているのかについて進み、それらを実装していきます。最終的には、自作のフレームワークでsetState()を使った○×ゲームを作ることができるようになります。

機能を絞るため、もちろん実用に足るフレームワークを作ることは叶いません。しかしUIの管理手法というのはFlutterだけでなくWebフレームワークやブラウザ、AndroidやiOSなどのネイティブアプリでも共通して利用されています。まずはシンプルなFlumeの仕様を理解することで、本家Flutterや他のフレームワークのコードを理解する後押しになることを目指しています。


【目次】
第1章　画面の表示とSkiaによる描画
第2章　Skiaで遊ぼう
第3章　TaskRunnerの実装
第4章　Layerツリーの実装と表示
第5章　RenderツリーからLayerツリーの構築
第6章　色々なRenderObject
第7章　Elementツリー・Widgetツリーの構築1
第8章　Elementツリー・Widgetツリーの構築2
第9章　テキストの表示
第10章　runAppとWidgetsFlutterBinding
第11章　Engineの隠蔽と画面の更新タイミング
第12章　Engineのキー入力対応
第13章　markNeedsPaint()
第14章　markNeedsLayout()
第15章　WidgetにGenericsを適用しよう
第16章　Widgetツリーの差分計算1
第17章　Widgetツリーの差分計算2
第18章　StatefulWidgetとStatelessWidgetの実装
第19章　○×ゲームを作ってみよう
第20章　ポインターイベントの処理
第21章　アニメーションの実装
第22章　InheritedWidgetの実装
第23章　○×ゲームを進化させよう

Mayelana nomlobi

速川 湧気
2001年埼玉生まれ。慶應義塾志木高等学校卒業。現在、慶應義塾大学理工学部に在籍。2020年に技術サークルComputer Society（KCS）の代表を務める。慶應義塾大学先導研究センターが主催する慶應義塾大学AI・高度プログラミングコンソーシアム（AIC）で「FlutterでWebアプリ開発 初級編」、「WebアプリをFlutterで作ろう」の２講座を担当。