왼쪽 가장자리 맞추기

Coddy Flutter 여정의 첫 앱 만들기 섹션에 포함된 레슨. 32개 중 23번째.

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)),
            ],
          ),
        ),
      ),
    );
  }
}