Spacer가 간격을 벌려요

Coddy Flutter 여정의 화면 크기에 맞는 레이아웃 섹션에 포함된 레슨. 30개 중 4번째.

상단 바에는 왼쪽에 로고가 있고 오른쪽에 링크가 있는 경우가 많습니다. Spacer는 이 역할을 합니다. 행에서 남은 공간을 모두 차지하는 빈 위젯으로, 뒤에 오는 모든 항목을 반대쪽 끝으로 밀어냅니다.

Row(
  children: [
    const Text('Logo'),
    const Spacer(),
    const Text('Cart'),
  ],
)

Spacer는 간격이 있어야 하는 위치에 정확히 배치합니다. 앞에 있는 위젯은 왼쪽에 남고, 뒤에 있는 위젯은 오른쪽으로 이동하며, 같은 쪽의 이웃한 위젯 사이 간격은 설정한 대로 유지됩니다.

mainAxisAlignment: MainAxisAlignment.spaceBetween은 대신 모든 자식 위젯을 서로 떨어뜨려 배치합니다. 하나의 간격만 늘어나야 할 때는 Spacer를 사용하세요.

챌린지

쉬움

Coddy는 왼쪽에 두고 Help와 Log in은 오른쪽 끝으로 밀어 배치하되, 서로 16픽셀 간격을 유지하세요.

직접 해보기

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: Padding(
          padding: const EdgeInsets.fromLTRB(16, 48, 16, 16),
          child: Column(
            children: [
              Row(
                children: [
                  const Text(
                    'Coddy',
                    style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                  ),
                  const Text('Help'),
                  const SizedBox(width: 16),
                  const Text('Log in'),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}