[Flutter] 레이아웃 관련 위젯(1) : Container, SizedBox, Card

Container

특징

• 가장 유연한 스타일링 위젯 : 여백, 패딩, 정렬, 크기, 배경색, 테두리, 그림자 등 다양한 기능 제공
• 복잡한 디자인을 구현할 때 유리
• 커스텀 스타일링 최적화
• 남발할 경우 성능 저하 우려

 

예시 코드

import 'package:flutter/material.dart';

class CustomContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Container'),
      ),
      body: Container(
        width: double.infinity, // 가로 길이 최대 확장
        height: 500, // 고정된 높이 설정
        padding: const EdgeInsets.all(16), // 내부 여백, 모든 방향으로 16px
        margin: const EdgeInsets.all(10), // 외부 여백, 모든 방향으로 10px
        decoration: BoxDecoration(
          color: Colors.blue, // 배경색
          borderRadius: BorderRadius.circular(15), // 모서리 둥글게 
          boxShadow: [ 
            BoxShadow(
              color: Colors.black.withOpacity(0.5), // 그림자 색상, 투명도 0.5
              blurRadius: 8, // 그림자가 퍼지는 정도
              offset: const Offset(4, 4), // 그림자 위치, x: 4, y: 4
            ),
          ],
        ),
        child: const Text(
          'Contents',
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  }
}

 

속성

• width : Container의 가로 크기 
• height : Container의 세로 크기
• padding
  • Container 내부의 여백 설정
  • 콘텐츠(여기서는 "Contents")와 Container 경계선 사이의 공간
  • EdgeInsets 클래스를 사용하여 값을 지정
• margin
  • Container 외부의 여백 설정
  • 해당 위젯과 주변 위젯 사이의 공간을 확보
• decoration : BoxDecoration 클래스를 통해 배경색, 경계선, 그림자, 둥근 모서리 등 다양한 시각적 요소 추가
• child
  • Container 안에 표시할 자식 위젯 지정
  • 자식은 단일 위젯만 가능하며, 여러 위젯을 넣기 위해서는 Column, Row, Stack 등을 사용해야 함.

 

결과

 

---

SizedBox

특징

• 공간을 확보하거나 고정 크기의 상자를 만들 때 사용
• 단순히 크기만 지정할 때는 Container보다 더 효율적
• 불필요한 레이아웃 계층 방지
• 여백(padding/margin) 및 스타일링 불가능

예시코드

• 자식 위젯의 크기 강제 조정

import 'package:flutter/material.dart';

class CustomSizedbox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Container'),
      ),
      body: Center(
        child: SizedBox(
          width: 200,
          height: 100,
          child: ElevatedButton(
            onPressed: () {},
            child: const Text('버튼'),
          ),
        ),
      ),
    );
  }
}

• 자식 위젯 없이 단순 공백용

import 'package:flutter/material.dart';

class CustomSizedbox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('단순 공백'),
      ),
      body: Column(
        children: [
          const Text('위 텍스트'),
          const SizedBox(height: 20), // 20px 공백 추가
          const Text('아래 텍스트'),
        ],
      ),
    );
  }
}

 

결과

• 자식 위젯(여기서는 ElevatedButton)의 크기 강제 조정

• 자식 위젯 없이 단순 공백용

 

SizedBox와 Spacer의 차이

특징	SizedBox	Spacer
간격 지정 방식	명확한 width 또는 height 값을 사용해 고정된 크기 설정	Flexible 속성을 기반으로 남은 공간을 자동으로 차지
자식 위젯	자식 위젯을 가질 수 있음 (child 속성 제공)	자식 위젯을 가질 수 없음 (child 속성 없음)
주요 용도	정확한 크기의 간격이 필요할 때	레이아웃 내에서 남은 공간을 동적으로 채울 때
레이아웃 제약	어떤 레이아웃이든 자유롭게 사용 가능	Row, Column과 같이 Flex 계열 위젯에서만 사용 가능

---

Card

특징

• 둥근 모서리와 그림자가 기본적으로 제공됨.
• 정보의 그룹화 및 시각적 구분에 유리
• 자식 위젯으로 ListTile을 사용할 경우 간결한 레이아웃 구현 가능
  • ListTile : 제목, 부제목, 아이콘 등을 쉽게 정렬할 수 있는 위젯
• elevation 속성으로 그림자의 강도 조절 가능

 

예시코드

• ListTile과 함께 사용

import 'package:flutter/material.dart';

class CustomCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ListTile과 Card'),
      ),
      body: Card(
        elevation: 5, // 그림자의 강도(입체감)
        margin: const EdgeInsets.all(10), // 카드 외부 여백 
        child: const ListTile(
          leading: Icon(Icons.person), // 왼쪽 아이콘
          title: Text('홍길동'), // 제목
          subtitle: Text('Flutter 개발자'), // 부제목
          trailing: Icon(Icons.arrow_forward), // 오른쪽 화살표
        ),
      ),
    );
  }
}

 

결과

 

속성

속성	설명	예시
child	카드 안에 표시할 자식 위젯	child: Text('Hello')
elevation	카드의 그림자 강도를 조절 (입체감)	elevation: 4
margin	카드 외부의 여백 설정	margin: EdgeInsets.all(10)
color	카드의 배경색 지정	color: Colors.blue
shape	카드의 모양을 변경 (둥근 모서리 등)	shape: RoundedRectangleBorder

 

 

Card와 Container의 차이점

기준	Card	Container
기본 스타일	둥근 모서리 + 그림자가 기본 제공	스타일 없음 (완전 커스텀 필요)
간편한 레이아웃	ListTile과 함께 사용 시 편리	복잡한 레이아웃에 유리
성능	상대적으로 가볍고 효율적	더 다양한 속성 제공 (유연하지만 무거움)
권장 사용 상황	정보 구분, 카드형 UI, 리스트 요소 구성에 적합	복잡한 레이아웃 구성, 맞춤형 디자인에 적합

---

 

결론 : 언제 어떤 위젯을 사용할까?

상황	추천 위젯
복잡한 스타일링 및 레이아웃 구성이 필요한 경우	Container
빈 공강 생성이나 크기 조정만 필요한 경우	SizedBox
카드형 UI, 터치 가능한 요소 구현	Card