Flutter의 핵심 위젯, Container 완벽 가이드: 속성부터 활용법까지

728x90

들어가기 전에

Flutter에서 가장 많이 사용되는 위젯 중 하나는 Container입니다. Container는 다양한 속성을 조합하여 레이아웃을 구성하고 UI를 꾸밀 수 있는 만능 위젯입니다. 이 글에서는 Container의 주요 속성과 사용 방법, 그리고 실전에서 활용할 수 있는 다양한 사례를 소개합니다. Flutter 앱을 만들 때 Container를 어떻게 활용할지 궁금하다면, 이 글을 통해 기본 개념부터 실전 팁까지 모두 알아보시죠.

Container란 무엇인가?

Container는 Flutter에서 요소를 감싸고 레이아웃을 구성하는 역할을 합니다. 특정 공간을 차지하며, 그 안에 다른 위젯을 포함할 수 있는 구조를 제공합니다. 이 위젯을 사용하면 크기, 배경색, 테두리, 모서리 곡선 등 다양한 스타일을 쉽게 설정할 수 있어, UI 구성에서 자주 사용됩니다.

Container의 주요 속성

Container는 다양한 속성을 가지고 있어 여러 상황에서 유연하게 사용할 수 있습니다. 각 속성을 하나씩 살펴보겠습니다.

child : child 속성은 Container 내부에 들어가는 위젯을 지정합니다. Text나 Image와 같은 위젯을 포함시킬 수 있습니다.
padding : padding은 Container 안에 들어가는 콘텐츠와 Container의 경계 사이의 여백을 설정합니다.
margin : margin은 Container의 외부에 설정하는 여백입니다. 즉, Container와 다른 요소들 사이의 간격을 조정할 수 있습니다.
color : color 속성은 Container의 배경색을 설정합니다. 단, decoration 속성이 없을 때만 사용 가능합니다.
width와 height : width와 height는 Container의 가로와 세로 크기를 설정합니다. 고정된 크기를 지정할 수 있으며, 부모 위젯에 따라 자동으로 크기가 결정되기도 합니다.
decoration : decoration 속성은 더 복잡한 스타일을 적용할 때 사용됩니다. BoxDecoration을 통해 그라디언트, 그림자, 테두리 등 다양한 스타일을 설정할 수 있습니다.
alignment : alignment 속성은 Container 내의 자식 위젯을 정렬하는 데 사용됩니다. Alignment 클래스의 상수들을 사용하여 중앙, 왼쪽, 오른쪽 등 원하는 위치에 자식 위젯을 배치할 수 있습니다.

실전 활용 예시

이제 Container의 다양한 속성을 활용해 실제로 사용할 수 있는 예시를 살펴보겠습니다.

프로필 카드 만들기 : Container를 사용하여 프로필 카드를 간단하게 만들 수 있습니다.

Container(
  padding: EdgeInsets.all(16),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(10),
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 2,
        blurRadius: 5,
      ),
    ],
  ),
  child: Row(
    children: [
      CircleAvatar(
        backgroundImage: NetworkImage('https://example.com/profile.jpg'),
        radius: 30,
      ),
      SizedBox(width: 10),
      Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('홍길동', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
          Text('Flutter 개발자', style: TextStyle(fontSize: 14, color: Colors.grey)),
        ],
      ),
    ],
  ),
)

그라디언트 배경 : Container의 decoration 속성을 이용해 그라디언트 배경을 만들 수 있습니다.

Container(
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [Colors.purple, Colors.blue],
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
    ),
  ),
  child: Center(
    child: Text(
      '그라디언트 배경',
      style: TextStyle(color: Colors.white, fontSize: 24),
    ),
  ),
)

결론

Container 위젯은 Flutter로 앱을 만들 때 사실상 제일 많이 쓰는 위젯 중 하나입니다.

크기, 패딩, 배경색, 테두리 등 다양한 속성을 쉽게 설정할 수 있어 복잡한 UI를 구성하는 데 매우 유용하게 활용되는데, 실무에서 자주 사용되는 만큼, 위젯의 특성을 충분히 이해하고 활용할 수 있다면 더욱 효율적인 UI 개발이 가능할 것 같습니다. 본문의 내용을 참고하셔서 flutter 앱을 예쁘게 잘 만드셨으면 좋겠습니다.