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

crossAxisAlignment使い方
スポンサーリンク

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やRow Widgetなどのプロパティで使われ、childrenのクロス軸(Columnはx軸、Rowはy軸がクロス軸)におけるレイアウトを指定します。また、crossAxisAlignmentの引数にCrossAxisAlignmentを使います。

>>【Flutter】Widgetの基本的な仕組み/使い方

CrossAxisAlignmentの基本的な使い方

CrossAxisAlignment.start

CrossAxisAlignment.start

childrenをクロス軸の最初に配置します。

Columnの場合

CrossAxisAlignment.center

CrossAxisAlignment.center

childrenをクロス軸の中心に配置します。

Columnの場合

CrossAxisAlignment.end

CrossAxisAlignment.end

childrenをクロス軸の最後に配置します。

Columnの場合

CrossAxisAlignment.stretch

CrossAxisAlignment.stretch

childrenのクロス軸に対する横幅をいっぱいに広げます。

Columnの場合

サンプルコード

import 'package:flutter/material.dart';

void main() {
  runApp(
    MyApp(),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              width: double.infinity,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.yellow,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.red,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.green,
            ),
          ],
        ),
      ),
    );
  }
}
タイトルとURLをコピーしました