Flutter의 컨테이너 위젯(Container Widget)

Flutter에서 Container 위젯은 자식 위젯의 배치, 정렬 및 스타일링을 담당하는 다재다능한 위젯입니다. Container 위젯을 사용하면 배경색, 패딩, 마진, 테두리 및 기타 레이아웃 속성을 쉽게 설정할 수 있습니다. 이번 글에서는 Container 위젯의 다양한 기능과 사용법에 대해 자세히 살펴보겠습니다.

1. 기본 사용법

Container 위젯의 가장 기본적인 사용법은 자식 위젯을 포함하여 특정 크기와 배경색을 지정하는 것입니다.

 

Container(
  width: 200,
  height: 200,
  color: Colors.blue,
  child: Center(
    child: Text('Hello, Flutter!'),
  ),
)

 

위 코드는 파란색 배경을 가진 200x200 크기의 컨테이너를 생성하고, 그 안에 텍스트를 중앙에 배치합니다.

2. 패딩(Padding)

패딩은 컨테이너 내부의 여백을 설정하는 데 사용됩니다. EdgeInsets 클래스를 사용하여 패딩 값을 지정할 수 있습니다.

Container(
  padding: EdgeInsets.all(20.0),
  color: Colors.green,
  child: Text('Padded Text'),
)

 

위 코드는 모든 방향에 20픽셀의 패딩을 추가하여 텍스트를 컨테이너 내부에서 여백을 두고 배치합니다.

3. 마진(Margin)

마진은 컨테이너 외부의 여백을 설정하는 데 사용됩니다. EdgeInsets 클래스를 사용하여 마진 값을 지정할 수 있습니다.

Container(
  margin: EdgeInsets.all(20.0),
  color: Colors.orange,
  child: Text('Margin Container'),
)

 

위 코드는 컨테이너 외부에 20픽셀의 마진을 추가하여 다른 위젯들과의 간격을 둡니다.

4. 박스 데코레이션(BoxDecoration)

BoxDecoration 클래스를 사용하여 컨테이너의 모양과 스타일을 더 세밀하게 조정할 수 있습니다. 예를 들어, 테두리, 그림자, 둥근 모서리 등을 설정할 수 있습니다.

 

Container(
  width: 150,
  height: 150,
  decoration: BoxDecoration(
    color: Colors.purple,
    borderRadius: BorderRadius.circular(10),
    boxShadow: [
      BoxShadow(
        color: Colors.black26,
        offset: Offset(2, 2),
        blurRadius: 5,
      ),
    ],
  ),
  child: Center(
    child: Text('Decorated Container'),
  ),
)

 

위 코드는 둥근 모서리와 그림자를 가진 보라색 컨테이너를 생성합니다.

5. 변환(Transform)

Transform 속성을 사용하여 컨테이너의 변환 효과를 적용할 수 있습니다. 회전, 크기 조절, 이동 등의 효과를 줄 수 있습니다.

 

Container(
  width: 100,
  height: 100,
  color: Colors.teal,
  transform: Matrix4.rotationZ(0.1),
  child: Center(
    child: Text('Transformed'),
  ),
)

 

위 코드는 0.1 라디안만큼 회전된 컨테이너를 생성합니다.

6. 배경 이미지

BoxDecoration을 사용하여 컨테이너의 배경 이미지도 설정할 수 있습니다.

 

Container(
  width: 300,
  height: 200,
  decoration: BoxDecoration(
    image: DecorationImage(
      image: NetworkImage('https://example.com/image.jpg'),
      fit: BoxFit.cover,
    ),
  ),
  child: Center(
    child: Text(
      'Background Image',
      style: TextStyle(
        color: Colors.white,
        fontSize: 20,
        fontWeight: FontWeight.bold,
      ),
    ),
  ),
)

 

위 코드는 네트워크 이미지가 배경으로 설정된 컨테이너를 생성하고, 중앙에 텍스트를 배치합니다.

결론

Container 위젯은 Flutter에서 매우 유용한 레이아웃 도구입니다. 크기, 패딩, 마진, 데코레이션, 변환, 배경 이미지 등 다양한 속성을 사용하여 컨테이너의 모양과 스타일을 조정할 수 있습니다. 이러한 기능들을 잘 활용하면 복잡하고 정교한 UI를 쉽게 구현할 수 있습니다. Flutter의 Container 위젯을 통해 효율적이고 아름다운 애플리케이션을 만들어보세요.