[Flutter 트랙] 앱개발 종합반 2-8 - Sized Box

Flutter SizedBox 위젯

이번 시간에는 Flutter에서 위젯 간의 간격을 조정할 때 유용하게 사용되는 SizedBox 위젯을 살펴보겠습니다.

SizedBox는 간단하지만 매우 많이 사용되는 위젯으로, **위젯 사이의 간격을 조절하거나 특정 크기의 빈 공간을 만들 때** 유용합니다.

1. SizedBox 기본 사용법

SizedBox는 주로 **가로(width)** 또는 **세로(height)** 값을 설정하여 위젯 간 간격을 조정하는 데 사용됩니다.

SizedBox(height: 20) // 위아래 간격 20
SizedBox(width: 10)  // 좌우 간격 10

2. 위아래 간격 주기

두 개의 컨테이너 사이에 **위아래 간격**을 주는 방법을 살펴보겠습니다.

Column(
    children: [
        Container(width: 100, height: 100, color: Colors.blue),
        SizedBox(height: 20),  // 20px 간격 추가
        Container(width: 100, height: 100, color: Colors.green),
    ],
)

➡️ `SizedBox(height: 20)`을 사용하여 위젯 사이의 세로 간격을 설정할 수 있습니다.

3. 좌우 간격 주기

Row를 사용하여 **좌우 간격**을 설정하는 방법을 살펴보겠습니다.

Row(
    children: [
        Container(width: 50, height: 50, color: Colors.red),
        SizedBox(width: 10),  // 10px 간격 추가
        Container(width: 50, height: 50, color: Colors.blue),
    ],
)

➡️ `SizedBox(width: 10)`을 사용하여 **위젯 간의 가로 간격**을 조정할 수 있습니다.

4. 특정 크기의 빈 공간 만들기

화면에서 특정 크기의 **빈 공간을 만들고 싶을 때**도 SizedBox를 사용할 수 있습니다.

SizedBox(height: 50) // 50px 높이의 빈 공간 추가

➡️ UI에서 일정한 간격을 유지할 때 유용하게 활용할 수 있습니다.

5. SizedBox로 정해진 크기의 위젯 만들기

SizedBox는 단순한 간격 조절뿐만 아니라, 내부에 위젯을 포함하여 **크기가 고정된 위젯**을 만들 수도 있습니다.

SizedBox(
    width: 150,
    height: 80,
    child: ElevatedButton(
        onPressed: () {},
        child: Text("고정 크기 버튼"),
    ),
)

➡️ `width`와 `height`를 지정하여 **버튼 크기를 조절**할 수 있습니다.

6. 결론

• **SizedBox는 위젯 사이 간격을 조정하는 데 가장 많이 사용되는 위젯**
• **height** 속성을 사용하면 **위아래 간격** 조정
• **width** 속성을 사용하면 **좌우 간격** 조정
• 화면에 **빈 공간을 만들 때도 활용 가능**
• **특정 크기의 위젯을 만들 때도 사용 가능**

➡️ 다음 강의에서는 Row와 Column 위젯을 살펴보겠습니다!