플러터(Flutter)는 Google에서 개발한 크로스 플랫폼 모바일 앱 개발 프레임워크로, 기존의 Android나 iOS 앱을 개발할 때 사용되는 Java나 Swift/Objective-C와는 달리 Dart라는 언어를 이용하여 앱을 개발합니다. 이번 포스트에서는 플러터에서의 Stack 위젯과 Row 또는 Column 위젯을 조합하는 방법에 대해 살펴보겠습니다.

Stack 위젯 소개

Stack 위젯은 플러터에서 UI 요소들을 겹쳐서 배치할 수 있도록 도와주는 위젯입니다. Stack 위젯은 자식 위젯들을 Z 축 방향으로 배치할 수 있으며, 각 자식 위젯의 위치를 지정할 수 있습니다. Stack에서는 자식 위젯들이 겹쳐진 순서대로 배치되며, 가장 위에 있는 위젯이 가장 앞에 표시됩니다. Stack은 다음과 같이 사용할 수 있습니다:

Stack(
  children: <Widget>[
    // 첫 번째 자식 위젯
    Positioned(
      top: 100,
      left: 50,
      child: Container(
        color: Colors.red,
        width: 100,
        height: 100,
      ),
    ),
    // 두 번째 자식 위젯
    Positioned(
      top: 150,
      left: 100,
      child: Container(
        color: Colors.blue,
        width: 100,
        height: 100,
      ),
    ),
  ],
)

위의 예제 코드에서는 Stack 위젯에 두 개의 Positioned 위젯이 자식으로 사용되었습니다. Positioned 위젯은 위치를 지정할 수 있는 위젯으로, top과 left 속성을 이용하여 자식 위젯의 위치를 조정할 수 있습니다.

Row 또는 Column과 Stack을 조합하기

Row와 Column은 플러터에서 가로 또는 세로로 여러 위젯들을 배치할 때 사용되는 위젯입니다. Stack과 Row 또는 Column을 조합하여 다층의 인터페이스를 구성할 수 있습니다. 다음은 Stack과 Row를 조합하여 UI를 구성하는 예제 코드입니다:

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

위의 코드에서는 Stack 안에 두 개의 Positioned 위젯이 사용되었는데, 하나는 상단 왼쪽에 노란색의 Container를 배치하고, 다른 하나는 Row를 배치했습니다. Row는 빨간색, 파란색, 초록색의 세 개의 Container를 가로로 배치합니다.

결론

플러터에서 Stack 위젯과 Row 또는 Column 위젯을 조합하여 다양한 인터페이스를 구성할 수 있습니다. Stack은 UI 요소들을 겹쳐서 배치할 수 있으며, Positioned 위젯을 사용하여 자식 위젯의 위치를 조정할 수 있습니다. Row와 Column은 가로 또는 세로로 여러 위젯들을 배치할 때 사용되며, Stack과 조합하여 다층의 인터페이스를 구성할 수 있습니다.

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