상자 안에서 정렬하기

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

Center는 자식을 자신이 차지하는 공간의 가운데에 배치합니다. Align은 원하는 위치에 자식을 배치합니다:

Container(
  height: 200,
  color: Colors.teal,
  child: const Align(
    alignment: Alignment.topRight,
    child: Text('Top right'),
  ),
)

위치 이름은 모서리와 가장자리의 이름을 따릅니다: Alignment.topLeft, topCenter, topRight, centerLeft, center, centerRight, bottomLeft, bottomCenter 및 bottomRight. Center는 Alignment.center를 사용하는 Align입니다.

Stack에도 alignment:가 있으며, 이는 Positioned가 아닌 모든 자식을 배치합니다: Stack(alignment: Alignment.bottomCenter, children: [...]).

챌린지

쉬움

Mountains 캡션을 표지의 가운데에서 왼쪽 아래 모서리로 옮기세요. 패딩을 사용하면 캡션이 양쪽 가장자리에서 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(
        appBar: AppBar(title: const Text('Travel')),
        body: Column(
          children: [
            Container(
              height: 240,
              color: Colors.indigo,
              child: const Center(
                child: Padding(
                  padding: EdgeInsets.all(16),
                  child: Text(
                    'Mountains',
                    style: TextStyle(fontSize: 28, color: Colors.white),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}