技術記事

micomia株式会社の井上です。今日はColumnについて解説していきます。

初心者にも分かりやすく解説していくのでぜひご一読ください。

1. Columnとは？

Columnとは、日本語にすると「列」になります。つまり、その名の通り縦に並べるときに使用するWidgetです。

一つの画面にWidgetを1つしか置かない場合はColumnを使わずに実装できますが、アプリ開発においては基本的に複数のWidgetを置きます。なので、ほとんどの場合で無くては実装できないWidgetの一つがColumnです。

2. Columnの使い方

実装時は、ページを追加した時点で既にColumnがあります。この画面にTextを縦に並べてみます。

このように、Textを2つColumnの中に入れてみました。これが基本的なColumnの使用方法になっています。

Textだけではなく、作成したComponentを並べたり画像を並べたりすることができます。

3. Columnの詳細設定

ここからはColumnのProperties Panelにある詳細設定について説明していきます。

まずはMain Axis Alignmentです。デフォルトは一番左側のStartになっています。これは子要素が上部に表示されます。

その隣にあるCenterは子要素が真ん中に表示されます。

Endは子要素が下部に表示されます。

Space Evenlyは子要素が等間隔で表示されます。

Space Aroundは子要素間は均等になりますが、上下のスペースは広くなります。

Space Betweenは子要素が上下に表示されます。

次に、Cross Axis Alignmentです。

これは、Columnの子要素を左寄せにするのか、中央にするのか、右寄せにするのか、横いっぱいに表示するのかを選択できるものです。

次に、Scrollableです。これは以前の記事でも紹介したので詳しく知りたい方はこちらをご覧ください。

スクロールできるようにするには？| FlutterFlowの使い方を徹底解説

これをONにすることでスクロールができるようになります。

最後に、Item Spacing, Start Spacingです。

Item Spacingは子要素同士の間隔を決めることができます。

このように値を入れることで、どれだけ子要素が増えても常に一定の間隔で表示されます。その横にあるApply to Start & EndをOnにするとItem Spacingに入力した値が上下にも反映されます。

ただ、この場合は上下どちらも同じ値が反映されるので上下の幅を変えたいときは、Start SpacingとEnd Spacingをそれぞれ指定することで実装できます。

4. さいごに

今回はColumnについて解説していきました。どんなアプリを実装するときでもほぼ必ずと言って良いほど必要なWidgetなのでぜひ今回の内容を活用してみてください！

本記事の内容を動画で見たい方は以下をご覧ください。

動画でもっと知りたい方はこちら