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

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

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

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

スポンサーリンク

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

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

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: Column(
          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

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [ 
    Text('Hello World'),
    Text('Hello World 2'),
    Text('Hello World 3'),
  ],
),

mainAxisAlignmentプロパティで、メイン軸(Columnの場合「y軸」)におけるレイアウトを指定します。またmainAxisAlignmentの引数に、MainAxisAlignmentを代入します。

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

crossAxisAlignment

Column(
  crossAxisAlignment: CrossAxisAlignment.end,
  children: [ 
    Text('Hello World'),
    Text('Hello World 2'),
    Text('Hello World 3'),

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

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

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

CrossAxisAlignment.end
CrossAxisAlignment.stretch

verticalDirection

Column(
  verticalDirection: VerticalDirection.up,
  children: [ 
    Text('Hello World'),
    Text('Hello World 2'),
    Text('Hello World 3'),
 ],

verticalDirectionプロパティでy軸上で配置される方向(上からまたは下から)を指定できます。またverticalDirectionの引数にVerticalDirectionを使用します。

>>【Flutter】verticalDirectionプロパティの使い方|VerticalDirection

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