Flutter UI/Layoutのチュートリアル

これについてやりながらメモしていきます。
https://flutter.dev/docs/development/ui/layout/tutorial

step 0 コードベース

普通に作り始めてしまった…。
よくみたら、hello, worldアプリを作って、そこから変えろって…。

step1 レイアウトを図解する

デザインをHTMLに起こすときとおんなじようなことしてる。

step2 タイトル行を実装する

CrossAxisAlignmentがない…！

おおおい…つづり間違いじゃ…><

できました。

む…ふと…CSSみたいなのってないのかな…？
よく見ると、styleベタ書きのHTMLみたいだ…。

step3 ボタン行を実装する

タイトルの下に電話/経路/シェア用のボタンを置く作業ですね…。

できた！

…なんだけど、自動整形がヘンで、まちがったのではないかと不安になる…。

step4 テキストセクションを実装する

softWrap、日本語でも有効なのかな…？

実に素直に終わった 👏

flutterのアップデートがきた…！
複数のアプリを持っているときに、バージョンをどうやって管理したらいいんだろう…？

とりあえずやった。

step5 画像セクションを実装する

あっさり。
pubspec.yaml に画像ファイル名を書くのは、アプリだからですかね。同梱するファイルをちゃんと管理する的な…？

step6 最後の仕上げ

小さい端末で見てみればよかったけど、イメージがでかくてディスクを圧迫するのでやめた…。

おわり 🎉