[Flutter 트랙] 앱개발 종합반 2-7 - Container

Flutter Container 위젯

Container 위젯은 **플러터에서 가장 기본적인 레이아웃 구성 요소** 중 하나입니다. 이 위젯을 사용하여 **크기, 색상, 패딩, 마진, 그림자, 테두리 둥글기 등 다양한 스타일**을 적용할 수 있습니다.

---

1. Container 기본 개념

Container 위젯은 **레이아웃을 감싸는 박스형 위젯**으로, 내부에 차일드(child) 위젯을 포함할 수 있습니다.

Container 기본 예제

import 'package:flutter/material.dart';

void main() {
    runApp(MaterialApp(home: ContainerExample()));
}

class ContainerExample extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            body: Center(
                child: Container(
                    width: 200,
                    height: 150,
                    color: Colors.blue,
                    alignment: Alignment.center,
                    child: Text("Container", style: TextStyle(color: Colors.white, fontSize: 20)),
                ),
            ),
        );
    }
}

➡️ Container를 사용하면 **색상, 크기, 정렬** 등을 손쉽게 조절할 수 있습니다.

---

2. Container 패딩(Padding) 설정

padding 속성을 사용하면 내부 컨텐츠와 테두리 사이의 간격을 조정할 수 있습니다.

Padding 적용 예제

Container(
    padding: EdgeInsets.all(20),  // 모든 방향에 20px 패딩 적용
    child: Text("패딩 적용된 컨테이너"),
),

➡️ `EdgeInsets.all(20)`을 사용하면 **네 방향에 동일한 패딩 적용** 특정 방향에만 적용하려면 `EdgeInsets.only(left: 10, top: 20, right: 30, bottom: 5)`

---

3. Container 마진(Margin) 설정

margin 속성을 사용하면 **Container 외부 여백**을 조절할 수 있습니다.

Margin 적용 예제

Container(
    margin: EdgeInsets.all(30),  // 모든 방향에 30px 마진 적용
    color: Colors.green,
    child: Text("마진 적용된 컨테이너"),
),

➡️ `margin`은 **다른 위젯과의 간격을 조정**하는 역할을 합니다.

---

4. Container 배경색 및 스타일

Container의 배경색과 스타일을 지정하려면 `BoxDecoration`을 사용합니다.

배경색과 스타일 적용 예제

Container(
    width: 200,
    height: 100,
    decoration: BoxDecoration(
        color: Colors.orange,  // 배경색
        borderRadius: BorderRadius.circular(15),  // 모서리 둥글게
        border: Border.all(color: Colors.black, width: 3),  // 테두리
    ),
    alignment: Alignment.center,
    child: Text("스타일 적용"),
),

➡️ `BoxDecoration`을 사용하면 **둥근 모서리, 테두리, 배경색** 등을 쉽게 추가할 수 있습니다.

---

5. Gradient (그라디언트) 적용

Container 배경에 **그라디언트 효과**를 추가할 수도 있습니다.

그라디언트 배경 적용 예제

Container(
    width: 250,
    height: 150,
    decoration: BoxDecoration(
        gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [Colors.purple, Colors.blue],
        ),
        borderRadius: BorderRadius.circular(20),
    ),
    alignment: Alignment.center,
    child: Text("그라디언트 적용"),
),

➡️ `LinearGradient`를 사용하면 **위에서 아래, 왼쪽에서 오른쪽 등 다양한 색상 전환 효과**를 줄 수 있습니다.

---

6. 그림자(Shadow) 추가

BoxShadow를 사용하여 **입체적인 효과(그림자)**를 추가할 수 있습니다.

그림자 적용 예제

Container(
    width: 200,
    height: 100,
    decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(10),
        boxShadow: [
            BoxShadow(
                color: Colors.grey.withOpacity(0.5),  // 그림자 색상
                spreadRadius: 5,  // 그림자 확산 정도
                blurRadius: 7,  // 흐림 효과
                offset: Offset(3, 3),  // 그림자 위치 조정
            ),
        ],
    ),
    alignment: Alignment.center,
    child: Text("그림자 효과"),
),

➡️ `BoxShadow`를 사용하면 **부드러운 그림자 효과**를 추가할 수 있습니다.

---

7. Container 크기 자동 조절

Container 크기를 고정하지 않고 **자동으로 조정**하려면 `double.infinity` 또는 `constraints`를 사용할 수 있습니다.

크기 자동 조절 예제

Container(
    width: double.infinity,  // 가로 전체 확장
    constraints: BoxConstraints(minHeight: 100, maxHeight: 200),  // 최소/최대 높이 지정
    color: Colors.lightBlue,
    alignment: Alignment.center,
    child: Text("크기 자동 조절"),
),

➡️ `double.infinity`는 **가로를 부모 위젯 크기만큼 확장** ➡️ `BoxConstraints`는 **최소/최대 크기를 설정**

---

8. 결론

• Container는 **가장 기본적인 레이아웃 위젯**
• Padding → 내부 여백 설정 가능
• Margin → 외부 여백 설정 가능
• BoxDecoration → 배경색, 테두리, 둥근 모서리 설정
• Gradient → 그라디언트 색상 효과 추가
• BoxShadow → 그림자 효과 추가 가능
• double.infinity 또는 constraints로 크기 자동 조절 가능

다음 강의에서는 SizeBox 위젯을 살펴보겠습니다! 🚀