はじめに
flutterのレイアウトが描画される仕組みを理解するためには、以下の公式ドキュメントを読み込む必要があります。
ですがこれがまあとっつきにくいですよね。。
自分も何度挫折したことか。。
もちろん最終的には読むべきだとは思いますが、今の時代、優秀なエンジニアがinside flutterに対して、わかりやすく噛み砕いて解説して下さっている良記事に無料でアクセスできます。
これを使わない手はないですよね。
なのでまずは、公式ドキュメントを読む前にこれから紹介する記事を読んで大枠を掴んだ上で、公式ドキュメントに挑むのが賢い戦略と言えそうです。
今回は自分がinside flutterを学習する上で参考になった記事をご紹介します。
参考になった記事一覧
個人的に読むべきと思う順番に紹介していきます。
日本人のためのinside flutter用語解説
この記事は公式ドキュメントの翻訳というわけではないですが、難しい和訳の部分などを、噛み砕いて説明してくださってます。
この記事だけでもざっくり、inside flutterのざっくりした概要を掴むためのヒントになるかと思います。
【Flutter】Navigator.of(context) から理解する 3つのツリー
この記事もflutterのレイアウトの仕組みに対して、とてもとっつきやすい内容になっています。
widget,Element,RenderObjectの三つのツリーに対してそれぞれの役割が説明された上で、Navigator.of(context)を例にしてコードベースで三つのツリーが実際どのように使用されているのか学習できます。
Flutter の Widget ツリーの裏側で起こっていること
ElementからWidgetとRenderObjectがどのように生成されるのかに加えて、statefulWidgetのUI作成の仕組み（stateやelement）などの解説もあり、面白いです。
また、swiftのUIKitとの比較でいかにflutterが宣言的なUI構築にこだわっているかなど、別の視点からの考察があり、理解を深めることができました。
「Flutter 完全に理解した」状態を抜けた時に書いた記事たち
少し発展的な内容にはなりますが、setState()やText、など普段見慣れているものが、三つのツリーとどう関わっているかなど上記で紹介した内容を理解していないと理解できない内容の記事がいくつか紹介されています。
上記三つの記事を周回した後に少し覗いてみるといい勉強になるかもしれません。
最後に
前提として、inside flutterを完全に理解するのは難しいし時間がかかると思います。
公式ドキュメントも含めて、今回紹介した記事を何度も何度も読み込んで少しずつ理解を深めるのが正しい学習法なんだと思います。
それにしても本当にエンジニアにとっては恵まれた時代だなと思います。
多くの優秀なエンジニアが時間を捻出して書いてくださった記事に無料でアクセスできるのは本当にありがたいです。
ぜひ活用させてもらいましょう！
最後まで読んでいただきありがとうございました。
根気強く良く一緒に頑張ってつよつよエンジニアを目指しましょう！！