플러터 Container 위젯 사용법 및 옵션 완벽 가이드

플러터에서 가장 기본적인 위젯 중 하나인 Container 위젯은 다른 위젯들을 감싸고 배경색, 여백, 패딩 등을 설정하여 레이아웃을 구성하는 데 사용됩니다.

또한, decoration 속성을 사용하여 그림자, 테두리, 그라데이션 등 다양한 시각 효과를 추가할 수 있습니다.

이 블로그 글에서는 Container 위젯의 사용법과 주요 옵션들을 자세히 살펴보고, 실제 코드 예시와 함께 다양한 레이아웃과 시각 효과를 구현해 보겠습니다.

 

1. 기본 사용법

 

Container 위젯은 child 속성으로 감싸고 싶은 다른 위젯을 전달합니다.

기본적으로 투명한 배경색을 가지고 있으며, 여백과 패딩은 설정되지 않습니다.

Container(
  child: Text('플러터 배우기'),
)

 

2. 주요 옵션

Container 위젯에는 다양한 옵션들이 존재하여 레이아웃과 시각 효과를 자유롭게 조정할 수 있습니다. 주요 옵션들과 예시 코드는 다음과 같습니다.

• color: 배경색을 설정합니다.

  Container(
    color: Colors.blue,
    child: Text('플러터 배우기'),
  ),
  

   
• width: 너비를 설정합니다.

  Container(
    width: 100.0,
    child: Text('플러터 배우기'),
  ),
  

   
• height: 높이를 설정합니다.

  Container(
    height: 200.0,
    child: Text('플러터 배우기'),
  ),
  

• margin: 위젯 주변의 여백을 설정합니다.

  Container(
    margin: EdgeInsets.all(16.0),
    child: Text('플러터 배우기'),
  ),
  

   
• padding: 위젯 내부의 여백을 설정합니다.

  Container(
    padding: EdgeInsets.all(16.0),
    child: Text('플러터 배우기'),
  ),
  

   
• alignment: 자식 위젯의 정렬 방식을 설정합니다. Alignment.topLeft, Alignment.center, Alignment.bottomRight 등의 값을 사용할 수 있습니다.

  Container(
    alignment: Alignment.center,
    child: Text('플러터 배우기'),
  ),
  

   
• decoration: 그림자, 테두리, 그라데이션 등 다양한 시각 효과를 설정합니다.

  Container(
    decoration: BoxDecoration(
      color: Colors.red,
      border: Border.all(width: 2.0, color: Colors.black),
      boxShadow: [
        BoxShadow(
          color: Colors.grey,
          offset: Offset(4.0, 4.0),
          blurRadius: 10.0,
        ),
      ],
    ),
    child: Text('플러터 배우기'),
  ),
  

3. 다양한 레이아웃 구현

 

Container 위젯을 활용하여 다양한 레이아웃을 구현할 수 있습니다. 예를 들어, 다음과 같은 코드는 열 레이아웃과 행 레이아웃을 만듭니다.

Column(
  children: [
    Container(
      color: Colors.red,
      height: 100.0,
      child: Text('열 1'),
    ),
    Container(
      color: Colors.blue,
      height: 100.0,
      child: Text('열 2'),
    ),
  ],
),

Row(
  children: [
    Container(
      color: Colors.red,
      width: 100.0,
      child: Text('행 1'),
    ),
    Container(
      color: Colors.blue,
      width: 100.0,
      child: Text('행 2'),
    ),
  ],
),

 

4. 시각 효과 활용

decoration 속성을 사용하여 그림자, 테두리, 그라데이션 등 다양한 시각 효과를 추가할 수 있습니다.

• 그림자: boxShadow 속성을 사용하여 그림자를 설정합니다.

  Container(
    decoration: BoxDecoration(
      boxShadow: [
        BoxShadow(
          color: Colors.grey,
          offset: Offset(4.0, 4.0),
          blurRadius: 10.0,
        ),
      ],
    ),
    child: Text('플러터 배우기'),
  ),
  

   
• 테두리: border 속성을 사용하여 테두리를 설정합니다.

  Container(
    decoration: BoxDecoration(
      border: Border.all(width: 2.0, color: Colors.black),
    ),
    child: Text('플러터 배우기'),
  ),
  

   
• 그라데이션: gradient 속성을 사용하여 그라데이션을 설정합니다.

  Container(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        colors: [Colors.red, Colors.blue],
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
      ),
    ),
    child: Text('플러터 배우기'),
  ),
  

5. 팁

• Container 위젯은 다양한 레이아웃을 구성하는 데 매우 유용합니다.
• decoration 속성을 사용하여 다양한 시각 효과를 추가하여 디자인을 더욱 풍부하게 만들 수 있습니다.
• Container 위젯을 다른 위젯들과 함께 사용하여 원하는 레이아웃을 구현할 수 있습니다.

6. 마무리

플러터 Container 위젯은 다양한 옵션과 기능들을 제공하여 레이아웃과 시각 효과를 자유롭게 조정할 수 있도록 지원합니다.

이 블로그 글을 통해 Container 위젯에 대한 이해를 높이고, 실제 개발에 활용하시면 도움이 될 것입니다.

 

수발가족을 위한 일기장 “나비일기장”

 

https://play.google.com/store/apps/details?id=com.maccrey.navi_diary_release

 

비공개테스트를 위한 20명의 테스터모집 앱 "테스터 쉐어"

 

https://play.google.com/store/apps/details?id=com.maccrey.tester_share_release