플러터(Flutter)는 UI를 구성하는 위젯들을 조합하여 화면을 만들 수 있는 크로스 플랫폼 프레임워크입니다. 이 중에서도 Stack 위젯과 Container 위젯은 UI 레이아웃을 구성하는데 주로 사용되는 위젯입니다. 이번 포스팅에서는 이 두 위젯의 차이점에 대해 알아보겠습니다.

Stack 위젯

Stack은 위치와 크기를 지정하여 위젯들을 겹쳐서 배치하는데 사용됩니다. Stack 위젯은 자식(Child) 위젯들을 가장 위에 있는 위젯부터 아래에 있는 위젯으로 겹쳐서 배치합니다.

Stack(
  children: <Widget>[
    Positioned(
      left: 50.0,
      top: 50.0,
      child: Container(
        width: 100.0,
        height: 100.0,
        color: Colors.blue,
      ),
    ),
    Positioned(
      left: 100.0,
      top: 100.0,
      child: Container(
        width: 100.0,
        height: 100.0,
        color: Colors.red,
      ),
    ),
  ],
)

위의 예시에서는 두 개의 Container 위젯을 Stack 위젯으로 겹치게 배치하고 있습니다. Positioned 위젯을 사용하여 각각의 Container의 위치와 크기를 지정해주었습니다. 이렇게 하면 Stack 위젯 내부의 위젯들을 겹쳐서 배치할 수 있습니다.

Container 위젯

Container 위젯은 단일 위젯을 포함하고, 해당 위젯에 스타일이나 레이아웃 속성을 적용할 수 있는 위젯입니다. 주로 다른 위젯을 포함하는 역할로 사용됩니다.

Container(
  width: 200.0,
  height: 200.0,
  color: Colors.blue,
  child: Text(
    'Hello',
    style: TextStyle(
      color: Colors.white,
      fontSize: 20.0,
    ),
  ),
)

위의 예시에서는 Container 위젯 안에 Text 위젯을 포함하고 있습니다. Container 위젯은 너비(width), 높이(height), 색상(color) 등을 지정할 수 있으며, 해당 속성들은 자식 위젯에도 적용됩니다.

두 위젯의 차이점

• Stack 위젯은 여러 개의 위젯을 겹쳐서 배치할 수 있지만, Container 위젯은 단일 위젯을 포함할 수 있습니다.
• Stack 위젯은 Positioned 위젯을 사용하여 자식 위젯의 위치와 크기를 지정할 수 있지만, Container 위젯은 자체적으로 크기를 가지고 있습니다.
• Container 위젯은 추가적인 스타일이나 레이아웃 속성을 지정할 수 있지만, Stack 위젯은 그렇지 않습니다.

이렇게 간단하게 플러터에서의 Stack 위젯과 Container 위젯의 차이점에 대해 알아보았습니다. 어떤 위젯을 사용해야 하는지는 구현하고자 하는 UI의 요구사항에 따라 다를 수 있으므로 적합한 위젯을 선택하여 사용하시면 됩니다.

참고 자료:

• Stack class - flutter.dev
• Container class - flutter.dev