現役エンジニアに悩みや疑問を30分間無料で質問し放題!

【Flutter】Columnの使い方|垂直方向に複数のWidgetを並べる

今回は「Column」の基本的な使い方について紹介します。

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

目次

Columnの基本プロパティ

children:複数のWidgetを配列にして並べる

childrenプロパティにWidget型の配列を使用します。

  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter"),
        ),
        body: Column(
          children: const <Widget>[
            SizedBox(
              width: 100,
              height: 100,
              child: Card(
                color: Colors.red,
              ),
            ),
            SizedBox(
              width: 100,
              height: 100,
              child: Card(
                color: Colors.green,
              ),
            ),
            SizedBox(
              width: 100,
              height: 100,
              child: Card(
                color: Colors.yellow,
              ),
            ),
          ],
        ),
      ),
    );
  }

mainAxisAlignment

mainAxisAlignmentプロパティでy軸の表示方法を指定します。

//ソース
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter"),
        ),
        body: Column(
          children: const <Widget>[
            SizedBox(
              width: 100,
              height: 100,
              child: Card(
                color: Colors.red,
              ),
            ),
            SizedBox(
              width: 100,
              height: 100,
              child: Card(
                color: Colors.green,
              ),
            ),
            SizedBox(
              width: 100,
              height: 100,
              child: Card(
                color: Colors.yellow,
              ),
            ),
          ],
        ),
      ),
    );
  }

crossAxisAlignment

crossAxisAlignmentプロパティでx軸の表示方法を指定します。

//ソース
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter"),
        ),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: const <Widget>[
            SizedBox(
              width: double.infinity,
            ),
            SizedBox(
              width: 100,
              height: 100,
              child: Card(
                color: Colors.red,
              ),
            ),
            SizedBox(
              width: 100,
              height: 100,
              child: Card(
                color: Colors.green,
              ),
            ),
            SizedBox(
              width: 100,
              height: 100,
              child: Card(
                color: Colors.yellow,
              ),
            ),
          ],
        ),
      ),
    );
  }

verticalDirection

verticalDirectionプロパティでy軸の開始位置を指定します。

//ソース
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter"),
        ),
        body: Column(
          verticalDirection: VerticalDirection.up,
          children: const <Widget>[
            SizedBox(
              width: 100,
              height: 100,
              child: Card(
                color: Colors.red,
              ),
            ),
            SizedBox(
              width: 100,
              height: 100,
              child: Card(
                color: Colors.green,
              ),
            ),
            SizedBox(
              width: 100,
              height: 100,
              child: Card(
                color: Colors.yellow,
              ),
            ),
          ],
        ),
      ),
    );
  }

以上です。

おすすめ記事

  • URLをコピーしました!
目次
閉じる