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

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

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

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

スポンサーリンク

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

CrossAxisAlignment.end
CrossAxisAlignment.stretch

textDirection

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

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

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

タイトルとURLをコピーしました