Flutter の公式ドキュメントの 1 ページである、 "Inside Flutter" を頑張って読んでみました。
元々はアドベントカレンダーのネタ探しのために読んでみたのですが、読んでいるうちに Widget が画面に描画される過程で何が起きているかが分かってきたり、 Text や setState() といった普段何気なく使っているクラスやメソッドの実装を読んで何が起きているのかが理解できるようになったりといろいろな発見がありました。
さらに、Flutter の仕組みを知れば知るほど、そこから派生する新しい発見や疑問が次々と湧いてきて、これは「Flutter 完全に理解した」状態を抜けて「Flutter 全然わからん」の状態に入ったと言えるのではないかと思い、その時に得た知見をいくつか Zenn に書いています。
この記事では、同じように 「Flutter 完全に理解した」 状態から一歩踏み出したい方の手がかりのひとつとして、それらの記事を一覧で紹介してみたいと思います。
【Flutter】Navigator.of(context) から理解する 3つのツリー
Inside Flutter の内容を、「なんとなく Flutter でのアプリ開発に慣れてきた人」向けの説明、という切り口で説明した記事です。
Widget ツリーや Element ツリー、 RenderObject、 BuildContext といった Flutter でたびたび目にするけれどもあまり意識されない要素について、 Inside Flutter の文章と Flutter のソースコードを読みながら説明した記事です。
こんな感じの図に興味がある方向けの記事です。
【Flutter】最小限のコードで理解する「宣言的な画面遷移」と Navigator 2.0
Navigator 2.0 and Router で説明されている Router API や Page API を使った「宣言的な画面遷移」について、モバイルアプリ開発の視点から説明してみたものです。
Navigator 2.0 は Web アプリにおける URL 直接入力や戻る / 進むボタンに対応できるようになることが目的の 1 つであるため、そのための記述が多くサンプルコードを読んでもなかなか理解が難しいのですが、モバイルアプリ開発だけであればだいぶすっきりしたコードで実現が可能であることや、「宣言的」な画面遷移は Navigator.push などの「命令的」な画面遷移から大きく設計や発想を変える必要があることを説明しています。
Navigator 2.0 の導入は学習コストが高いものではありますが、UI 構築と同じように画面遷移も宣言的に記述することによってさまざまなメリットも得られるため、まずは考え方だけでも頭に入れておいて損はないと思います。
【Flutter】 StatelessWidget が静的であるという誤解
Flutter 初学者向けの説明として、動的な UI は StatefulWidget で、静的な UI は StatelessWidget で、というものを良くみますが、ドキュメントやソースコードを読むとその説明があまり実際的ではなく、「自分専用の State を必要とするかどうか」の違いで使い分けるのが良いことが読み取れます。
それを踏まえた上で、それぞれの Widget の効果的な使い分け方や、 State を使わずに動的な UI を作る Flutter の仕組みについても説明しています。
その他
その他、普段何気なく利用するいくつかの Widget のドキュメントやソースコードから読み取れる内容をまとめた記事をいくつか書いています。
【Flutter】 InheritedWidget とは何か
【Flutter】 MediaQuery とは何か
【Flutter】 setState() とは何か
【Flutter】 Text とは何か
ただ「使い方」を覚えるのではなく、どのような仕組みでそれができているのか、どのように使うことを想定・推奨されているのかを理解することで、その考え方を自作の Widget のコーディングに活かせるのではないかと思います。
特に InheritedWidget は Provider パッケージの陰に隠れて直接使われることはありませんが、 MediaQuery や DefaultTextStyle, Navigator など、 Flutter の各種 Widget を実現する上で欠かせない存在となっていますので、これを知っているとだいぶ Flutter の Widget の使い方の理解が進むと思います。
ここで紹介している他にも、最近は Zenn の方に Flutter 関連の記事を書いていますので、よければ読んでみてください。