【Flutter】横行レイアウト指定：Row使い方を3分で解説!（サンプルコードあり）

2022-12-252023-03-20

Flutterで横・行のレイアウトの方法を知りたい
Flutterのrowの使い方を忘れたので知りたい。

そこで、今回はFlutterのColumnにおける基本的な使い方をサンプルコードとデモアプリで解説します。プログラミング初心者の方も０から分かるように簡単に解説します。不明点などありましたら、お気軽にお問い合わせ下さい。

この記事で分かること！

Rowって何？
Rowの使い方
Rowの基本プロパティ

ちなみに、Flutterのスキルを０から効率的に伸ばす方法は、仕事として実務を経験することです。そして、最速で転職・就職・副業するには学習をどんどん進め、ポートフォリオを最優先で完成させましょう！応募できそうなFlutter案件をチェックすると必要なスキルも分かり学習に身が入ります！Flutter案件/求人の探し方はコチラで詳しく解説していますので、ご参考にして下さい。

【Flutter】Rowとは？水平/横方向にウィジェットを並べることができる

上記イメージのように水平方向にウィジェットを並べることができるclassです。
水平方向に伸びるだけなため、スクロールに対応はしてません。
スクロール対応が必要な場合は、ListViewクラスです。List Viewウィジェットについてはコチラで詳しく解説してます。

Row classとは

A widget that displays its children in a vertical array.

（直訳）子を水平配列で表示するウィジェット。
引用：Flutter公式サイト「Row class」

【Flutter】Rowのサンプルコードと使い方を解説

Rowサンプルコードは以下の通りです。コピペでそのまま使えます。

import 'package:flutter/material.dart';

void main() => runApp(RowDemo());

class RowDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Row(横行)デモ')),
        body: Center(
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: const <Widget>[
              Text("テキスト1"),
              Text("テキスト2"),
              Text("テキスト3"),
            ],
          ),
        ),
      ),
    );
  }
}

サンプルコードのデモ画面

Rowの基本プロパティ

Rowの基本プロパティ以下の２つはしっかり押さえておきましょう！

プロパティ	内容
crossAxisAlignment: CrossAxisAlignment	垂直（縦）方向で子Widgetのレイアウト指定
crossAxisAlignment: CrossAxisAlignment.center 　crossAxisAlignment: CrossAxisAlignment.start 　crossAxisAlignment: CrossAxisAlignment.end 　crossAxisAlignment: CrossAxisAlignment.stretch	中央配置の中央揃え中央配置の左寄せ中央配置の右寄せ左端配置の左寄せ
mainAxisAlignment: MainAxisAlignment	水平（横）方向で子Widgetのレイアウト指定
mainAxisAlignment: MainAxisAlignment.start 　mainAxisAlignment: MainAxisAlignment.center 　mainAxisAlignment: MainAxisAlignment.end 　mainAxisAlignment: MainAxisAlignment.spaceEvenly	上寄せ中央寄せ下寄せ均等配置