はじめに
こんにちは。
今回はinside flutter(flutterのレイアウトの仕組み)について勉強したので、共有します。
この記事は、自分の知識を言語化し、定着化するために書いているので、正直この記事をみるより、ほかのつよつよエンジニアさんが書かれている有名な記事や公式ドキュメントを参照することを強くお勧めします。
自分がこの記事を書くにあたって参考にした記事の一覧は、この記事にまとめてあるので、興味のある方は是非覗いて見てください。
公式ドキュメントは以下です。
三つのツリーを理解する。
flutterを触ったことがある方なら、Widegetを使ったことがない方はいないでしょう。
そのwidgetは、別のwidget自体をネストしていき、
widget自体を積み重ねることでツリー状の構造を形成しています。
widgetに変更がある際に都度、変更を感知するたびに全てのwidgetを更新するようだと、あまりパフォーマンスの面でよろしくありません。
そこで、widgetの描画速度を高めるために、ElementとRenderObjectに役割を委任しています。
Elementについて
WIdgetと同様に、ElementやRenderObjectもツリー状の形状になっています。
そして三つのツリーの中で、このElementガ中心的な役割を担っています。
また、Elementは、Widgetとペアになっており、Widgetの数だけWidget.createElementによってペアになるElementが生成されます。
またElementの最大の特徴としては、親と子のElementを参照することができます。
実際に、Elementが親子のElementを上から下に走査することで、ライフサイクルやwidgetの変更差分の有無をbool値で管理したりといった役割を担っています。
RenderObjectについて
画面を描画する際に参照されるのがこのRenderObjectです。
RenderObjectは子のUI描画のための制約を更に、子に引き継いで末端のRenderObjectまで伝わります。
またその際に得られた計算結果はRenderObjectに保存され、
その計算結果に変化がない場合、計算を省くことによってパフォーマンスの高い処理を実現しています。
Widgetについて
widgetはほとんどの方にとって馴染み深いものと思いますが、実際にどのような責務を持っているのか説明しろと言われると。。。ってなっちゃいますよね。
実はwidgetの役割は非常にシンプルです。
具体的には、UIを構築するための設定（文字のスタイル、文言、カラーなど）の保持やWidget.createElementでwidgetのペアとなるElementを生成することです。
それ以外の計算やツリー構造の生成などをElementやRenderObjectに委任することで我々ユーザーは直感的にUIを構築できているんですね。（感謝）
最後に
最後まで、読んでいただきありがとうございました。
今回はかなりざっくりした記事になってしまいましたが、どなたかの役に立てば幸いです。
何か、ご指摘あればコメントいただけると非常に助かります。
ありがとうございました。