技術記事

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

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

1. Rowとは？

Rowとは、日本語にすると「行」という意味になります。前回の記事で「Column=列」と紹介したように、RowとColumnで行と列となります。

こちらも、アプリ開発においてほぼ必須と言えるWidgetの1つになっています。

2. Rowの使い方

まずは、Rowを他のWidgetと同じように追加します。

このRowの中に、前回のColumnと同じように子要素としてのWidgetを追加していきます。今回はImageを追加します。

このように、横並びに画像が3つ表示されました。この子要素はいくつでも増やすことができます。

3. Rowの詳細設定

Rowは基本的にColumnと同じ仕様になっています。大きな違いは、縦並びなのか横並びなのかのみです。

Main Axis AlignmentをCenterにしてみるとこのようになり、

Space Betweenにしてみるとこのようになります。

今回は簡単に紹介しましたが、この部分について詳しく知りたい方はぜひColumnの解説記事をご覧ください。

Columnとは？｜初心者向けのFlutterFlow徹底解説

ここで、Cross Axis AlignmentのStretchを選択してみましょう。

すると以下のエラーが表示されました。

このように、不適切なものを選択すると自動でキャンセルされるようになっています。FlutterFlowではこういった自動キャンセルのおかげで実際のアプリにおいて表示されないなどのエラーを最小限に抑えることができます。

次に、ScrollableをONにするとColumnでは縦スクロールでしたがRowでは横にスクロールすることが可能になります。

このように横に複数のWidgetが並んでいると、途中で途切れてしまっています。

ここでScrollableをONにすると

スクロールして端まで見ることができるようになりました。

最後に、Item Spacing, Start Spacing, End SpacingですがこれらもColumnと同じです。Item Spacingを入れることで子要素同士の間隔が生まれ、

Start Spacing, End Spacingを入れることでそれぞれ左右に間隔が生まれます。

4. さいごに

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

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

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