이번에는 Flutter에서 Stack 위젯을 이용하여 다른 레이아웃 위젯을 조합하는 예시에 대해 알아보도록 하겠습니다.

Stack 위젯

Stack 위젯은 다른 위젯들을 겹쳐서 표시할 수 있는 위젯입니다. Stack 위젯은 리스트 형태로 위젯을 받아들이고, 각 위젯의 위치를 지정하여 겹쳐지게 됩니다. 여러 개의 위젯이 겹쳐지는 경우, 가장 마지막으로 추가된 위젯이 가장 위에 표시됩니다.

Stack(
  children: <Widget>[
    // 위젯들을 추가
  ],
)

조합 예시

Stack과 Positioned 위젯 조합

Stack 위젯과 Positioned 위젯을 조합하여 각 위젯의 위치를 지정할 수 있습니다. Positioned 위젯은 Stack 위젯 내에서 사용되며, 각 위젯의 위치를 지정하는 매개변수를 사용하여 위젯의 위치를 지정할 수 있습니다.

Stack(
  children: <Widget>[
    Positioned(
      top: 10,  // 위쪽에서 10px 떨어진 위치
      left: 20,  // 왼쪽에서 20px 떨어진 위치
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blue,
      ),
    ),
    Positioned(
      bottom: 10,  // 아래쪽에서 10px 떨어진 위치
      right: 20,  // 오른쪽에서 20px 떨어진 위치
      child: Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
    ),
  ],
)

위의 예시 코드는 Stack 위젯 안에 두 개의 Positioned 위젯을 포함하고 있습니다. 첫 번째 Positioned 위젯은 왼쪽 위에서 10px, 20px 떨어진 위치에 파란색의 정사각형 컨테이너를 표시하며, 두 번째 Positioned 위젯은 오른쪽 아래에서 10px, 20px 떨어진 위치에 빨간색의 정사각형 컨테이너를 표시합니다.

Stack과 Expanded 위젯 조합

Stack 위젯과 Expanded 위젯을 조합하여 화면을 여러 영역으로 나눌 수 있습니다. Expanded 위젯은 Stack 위젯 내에서 사용되며, 특정 방향으로 화면을 확장하는 역할을 합니다.

Stack(
  children: <Widget>[
    Container(
      color: Colors.blue,
    ),
    Expanded(
      flex: 1,
      child: Container(
        color: Colors.red,
      ),
    ),
  ],
)

위의 예시 코드는 Stack 위젯 안에 두 개의 Container 위젯과 Expanded 위젯을 포함하고 있습니다. 첫 번째 Container 위젯은 전체 화면을 차지하며 파란색으로 채워지고, 두 번째 Expanded 위젯은 남은 공간을 모두 차지하며 빨간색으로 채워집니다.

마무리

플러터에서 Stack 위젯을 이용하여 다른 레이아웃 위젯을 조합하는 방법에 대해 알아보았습니다. Stack과 Positioned 위젯을 조합하면 위젯의 위치를 지정할 수 있고, Stack과 Expanded 위젯을 조합하면 화면을 여러 영역으로 분할할 수 있습니다. 다양한 조합을 통해 복잡한 UI를 구성할 수 있으며, 창의적인 디자인을 구현할 수 있습니다.

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