はじめに
Flutterの習熟の一環としてcodelabの内容に取り組んでいるので、それぞれのセクションで感じたことをまとめてみた。取り組むたびに随時更新していく予定です。予定は予定です!(動画のワークショップは後回しにしてます)
事前にDartとFlutterのドキュメントを上から少しだけざっと読んだ程度+αの理解度で取り組んでいます。(画像参照)
読んだ箇所(写ってる範囲、公式HPから切り抜きました、手抜きです)
初めての Flutter アプリ
実施日:2025年1月末か2月上旬(少し前であやふやです)
状態管理の基本を学べる。
テーマを利用して見た目を整える方法の基礎を学べた。
高度なバージョンはまだまだ理解が難しい箇所もあった。
Dart のパターンとレコードを使ってみる
実施日:2025年2月20日(この期間なにしてんのよ...)
パターンを使って簡潔に記述する方法を理解できた。変数や明示的なチェックを省き、尚且つ予期しないエラーの発生を減らせると思う。switch式の存在を知らなかったのでよい勉強になった。
また、オブジェクトにパターンを適用して、要素の異なるオブジェクトをまとめて扱える方法は実用的だと感じた。(うまく説明できない。)
main.dartでは表示に関する内容が、data.dartではjsonの処理に関する内容が扱われていて、「関心の分離」の良いサンプルになっていると感じた。このセクションの流れのように、最初は変数で明記して段階的に変えていけば自分でも実現できそう。
レイアウトのエラーをデバッグする方法
実施日:2025年2月20日(この期間なにしてんのよ...)
How to debug layout issues with the Flutter Inspector
Dart DevTools を使ってアプリのレイアウトのエラーを解決する方法を紹介している。記事が2020年に作成されているので、一部内容を再現できないものがあった。ちなみに、公式が用意したものではなく、有志の方が作成した記事らしい。
WindowsのVScodeでは、DevToolsはアプリ起動後の操作用アイコンリストから起動できる。
例1・2・3を通してよくあるレイアウトの問題を解決していく。例1は再現できるか怪しいので飛ばした。
肝は「子ウィジェットの制約は親ウィジェットから引き継ぐ」ということ。
明示的に制約を与えない限り、高さが無限になったり0になったりするウィジェットがある。これらに高さの制約を与える方法として、Expanded
やSizeBox
で包むことによって解決していた。
Column
やRow
などの実際に内容を表示するウィジェットを他のウィジェットの子にすることで、意図した通りの見た目にするための制約を課す感じになるのかな。
DevToolsの見るべきポイントが紹介されていたので、取り上げられていない事例に遭遇した際も一つずつ原因を追っていくことで自力でエラーを解消できるようにしたい。