Flutterレイアウトメモ：ColumnとRowの組み合わせ
Flutterのレイアウトの作り方が特徴的で覚えるのにちょっと苦労しています。Androidネイティブ開発やJavaFX/SceneBuilderのようなデザイナー機能があればいいのですが今のところコーディングでしか実現できません。最初はFlutter/Dartの特徴的なレイアウト文法に迷うと思います。
今回作ったものは以下のような、上にアイコンボタンが並んでいてその下にテキストボックスが配置されているものです。
スマホアプリの一般的なレイアウトはボタン類が下に配備されているものが多いので、ググっても上のようなレイアウト例がなかったんですよね。
どのようにレイアウトされているかというと、まずColumn（ウィジェットを縦に配置させる）ウィジェットがあり、その中にRow（ウィジェットを横に配置させる）ウィジェットとTextFieldウィジェットを配置させ、さらにRowウィジェットの中にIconButtonを配置させるとツールボタンのようになります。
ソースコードはこんな感じです。
スポンサーリンク