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

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

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