패딩

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

텍스트에 딱 맞는 상자는 답답해 보입니다. padding:은 상자 안쪽에서 가장자리와 자식 요소 사이에 공간을 추가합니다.

Container(
  padding: EdgeInsets.all(16),
  color: Colors.yellow,
  child: Text('Room to breathe'),
)

EdgeInsets.all(16)은 네 변 모두에 16픽셀을 의미합니다. EdgeInsets.symmetric(horizontal: 24, vertical: 8)은 양옆과 위아래의 간격을 각각 설정합니다.

Container에는 margin:도 있습니다. 이는 상자 바깥쪽에서 상자와 주변 요소 사이의 공간입니다. 색이 칠해진 부분은 커지지 않습니다.

챌린지

쉬움

Fresh에 공간을 주세요. 초록색 상자 안쪽의 모든 면에 24픽셀의 패딩을 추가하세요.

직접 해보기

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: Container(
            color: Colors.lightGreen,
            child: Text('Fresh', style: TextStyle(fontSize: 32)),
          ),
        ),
      ),
    );
  }
}