【Flutter】Rowの基本的な使い方

この記事がおすすめな人

Flutterアプリ開発初心者
英語のFlutterドキュメントを読むのが難しい
Row Widgetの基本的な使い方が知りたい

Rowを使えば、複数のWidgetをx軸方向に配列できます。

\ Widgetの扱い方が不安な方はこちら！ /

【Flutter】Widget・Widgetツリーの基本的な仕組み｜ FlutterアプリのUI構造

Flutterアプリでアプリ開発する上で始めに理解しておきたい「Widget」について紹介します。Widgetとは、FlutterのUIを構築しているパーツのことを呼び、FlutterアプリはこのWidgetがツリー状(Widget)に組み合わさって構築されています。また、Widgetはクラスをインスタンス化したオブジェクトでもあります。

Rowの基本となるプロパティ

Rowの基本となるプロパティ

children：複数のWidgetを指定
mainAxisAlignment：メイン軸(Rowの場合「x軸」)におけるレイアウトを指定
crossAxisAlignment：クロス軸(Rowの場合「y軸」)におけるレイアウトを指定
textDirection：x軸上で配置される方向(左からまたは右から)を指定

children

Column(
  children: [ 
    WidgetA, 
    WidgetB,
  ],

childrenプロパティで、引数にListを代入します。また、ListにWidgetを追加します。

>>【Flutter/Dart】Listの基本的な使い方

//例）
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter入門アカデミー'),
        ),
        body: Row(
          children: [
            Container(
              width: 100,
              height: 100,
              color: Colors.yellow,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.red,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.green,
            ),
          ],
        ),
      ),
    );
  }
}

mainAxisAlignment

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [ 
    WidgetA, //黄色のContainer
    WidgetB, //赤色のContainer
    WidgetC, //緑色のContainer
  ],

mainAxisAlignmentでメイン軸(Rowの場合「x軸」)におけるレイアウトを指定します。また、mainAxisAlignmentの引数にMainAxisAlignmentを使用します。

>>【Flutter】mainAxisAlignmentプロパティの使い方｜MainAxisAlignment

crossAxisAlignment

Row(
  crossAxisAlignment: crossAxisAlignment.end,
  children: [ 
    WidgetA, //黄色のContainer
    WidgetB, //赤色のContainer
    WidgetC, //緑色のContainer

    // Containerのheightを使ってRowの横幅を最大限広げています。
    Container(
      height: double.infinity,
    ),
  ],

crossAxisAlignmentでクロス軸（Columnの場合「x軸」）におけるレイアウトを指定します。また、crossAxisAlignmentの引数にCrossAxisAlignmentを使用します。

>>【Flutter】crossAxisAlignmentプロパティの使い方｜CrossAxisAlignment

textDirection

Row(
  textDirection: TextDirection.rtl,
  children: [ 
    WidgetA, //黄色のContainer
    WidgetB, //赤色のContainer
    WidgetC, //緑色のContainer
  ]

textDirectionプロパティでx軸上で配置される方向（左からまたは右から）を指定できます。またtextDirectionの引数にTextDirectionを使用します。

>>【Flutter】textDirectionプロパティの使い方｜ TextDirection