플러터(Flutter)는 구글이 개발한 모바일 애플리케이션 개발 프레임워크로, 다양한 위젯을 활용해 사용자 인터페이스를 구성할 수 있습니다. 이 중에서 Stack 위젯은 다른 위젯들을 중첩하여 화면을 구성할 때 유용하게 사용됩니다.

Stack 위젯

Stack 위젯은 다른 위젯들을 겹쳐서 배치하는 컨테이너 위젯입니다. Stack 위젯은 자식 위젯들을 쌓아놓을 수 있으며, 자식 위젯들은 서로 겹쳐져 화면에 보여집니다. Stack 위젯을 사용하면 기본적으로 위젯의 크기만큼 자식 위젯들이 겹쳐지게 됩니다.

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

위의 예제에서는 Stack 위젯 내에 두 개의 Container 위젯이 중첩되어 있습니다. 첫 번째 Container는 (0, 0) 좌표에서 시작하여 빨간색으로, 두 번째 Container는 (50, 50) 좌표에서 시작하여 파란색으로 표시됩니다.

다른 레이아웃 위젯과 중첩 사용 방법

Stack 위젯은 다른 레이아웃 위젯들과 자유롭게 중첩하여 사용할 수 있습니다. 예를 들어, Container, Row, Column 등의 다른 레이아웃 위젯 안에 Stack 위젯을 위치시킬 수 있습니다.

Container(
  width: 200,
  height: 200,
  color: Colors.grey,
  child: Row(
    children: <Widget>[
      Expanded(
        child: Container(color: Colors.red),
      ),
      Stack(
        children: <Widget>[
          Container(width: 50, height: 50, color: Colors.blue),
          Container(width: 100, height: 100, color: Colors.green),
        ],
      ),
      Expanded(
        child: Container(color: Colors.yellow),
      ),
    ],
  ),
)

위의 예제에서는 Container 안에 Row 위젯이 위치하고 있습니다. Row 위젯 안에는 세 개의 Expanded 위젯이 있으며, 그 사이에 Stack 위젯이 중첩되어 있습니다. Stack 위젯 내에는 두 개의 Container가 겹쳐져서 화면에 보여집니다.

이처럼 Stack 위젯은 다른 레이아웃 위젯과 함께 사용하여 복잡한 UI를 구성할 때 유용하게 사용될 수 있습니다.

결론

플러터에서 Stack 위젯은 다른 위젯들을 중첩하여 UI를 구성하는 데에 유용한 도구입니다. Stack 위젯을 사용하면 다양한 위젯들을 겹쳐서 배치할 수 있으며, 다른 레이아웃 위젯과도 자유롭게 함께 사용할 수 있습니다. 플러터에서 UI 개발 시에는 Stack 위젯을 활용하여 필요한 UI 요소들을 자유롭게 배치해보세요.

더 자세한 내용은 Flutter 공식 문서를 참고하시기 바랍니다.