左端をそろえる

CoddyのFlutterジャーニー「はじめてのアプリ」セクションの一部。レッスン 23/32。

Columnのもう一方の方向、つまり横方向が交差軸です。デフォルトでは各子要素は列の横方向の中央に配置されるため、短い行と長い行は同じ位置から始まりません。

crossAxisAlignment:を使うと変更できます。

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [...],
)

Columnでは、CrossAxisAlignment.startは子要素を左揃えにし、endは右揃えにします。centerはデフォルトです。

チャレンジ

簡単

列のcrossAxisAlignment:を使って、両方の行の左端をそろえましょう。

自分で試してみよう

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Column(
            children: [
              Text('Name', style: TextStyle(fontSize: 24)),
              Text('A much longer line', style: TextStyle(fontSize: 24)),
            ],
          ),
        ),
      ),
    );
  }
}