열 가운데 정렬하기

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

Column은 주어진 공간만큼 높이가 늘어나고, 자식 위젯을 맨 위에서 시작합니다. mainAxisAlignment:은 열의 주축인 높이를 따라 자식 위젯을 어디에 배치할지 지정합니다.

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [...],
)

MainAxisAlignment.start는 맨 위, center는 가운데, end는 맨 아래입니다. spaceEvenly는 자식 위젯 사이의 간격을 모두 같게 배치합니다. Row에도 같은 설정이 있으며, 너비를 따라 적용됩니다.

화면을 가로질러 보면 이 열은 가장 너비가 넓은 자식 위젯만큼만 너비가 넓어서 왼쪽에 머뭅니다. 다음 수업에서는 이 방향을 살펴봅니다.

챌린지

쉬움

세 숫자는 화면 맨 위에 있습니다. 열의 mainAxisAlignment:를 사용해 세로로 절반쯤 내려오도록 옮기세요.

직접 해보기

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: Column(
          children: [
            Text('One', style: TextStyle(fontSize: 32)),
            Text('Two', style: TextStyle(fontSize: 32)),
            Text('Three', style: TextStyle(fontSize: 32)),
          ],
        ),
      ),
    );
  }
}