개요

플러터(Flutter)는 Google에서 개발한 UI 프레임워크로, 다양한 레이아웃 위젯을 제공합니다. 그 중에서도 Stack 위젯은 다른 위젯들을 겹쳐서 배치하는 기능을 제공하며, 다른 레이아웃 위젯과도 상호작용할 수 있습니다.

이번 블로그 포스트에서는 플러터의 Stack 위젯과 다른 레이아웃 위젯들의 상호작용에 대해 알아보도록 하겠습니다.

Stack 위젯 소개

Stack 위젯은 다른 위젯들을 겹쳐서 배치할 수 있는 위젯입니다. Stack 위젯 안에 위치한 위젯들은 좌표를 사용하여 배치할 수 있으며, 앞에 위치한 위젯이 더 위에 표시됩니다.

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

위의 예시에서는 빨간색 컨테이너가 전체 화면을 채우며, 파란색 컨테이너는 좌표를 사용하여 (50, 50) 위치에 배치되었습니다.

Stack 위젯과 다른 레이아웃 위젯의 상호작용

Stack 위젯과 Column/Row 위젯

Stack 위젯은 다른 레이아웃 위젯과 함께 사용할 수 있습니다. 예를 들어, Stack 위젯 안에 Column 혹은 Row 위젯을 배치하여 세로 또는 가로로 여러 위젯을 나란히 배치할 수 있습니다.

Stack(
  children: [
    Container(
      width: 200,
      height: 200,
      color: Colors.red,
    ),
    Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text("Stack 위젯과 Column 위젯"),
        SizedBox(height: 10),
        Text("상호작용 가능"),
      ],
    ),
  ],
)

위의 예시에서는 빨간색 컨테이너가 전체 화면을 채우고, Column 위젯 안에 두 개의 텍스트 위젯이 세로로 정렬되어 배치되었습니다.

Stack 위젯과 Expanded 위젯

Stack 위젯은 Expanded 위젯과 함께 사용할 수도 있습니다. Expanded 위젯은 부모 위젯의 남은 공간을 모두 차지하는 위젯으로, Stack 위젯 안에서 주어진 공간만큼 확장되어 배치될 수 있습니다.

Stack(
  children: [
    Container(
      width: 200,
      height: 200,
      color: Colors.red,
    ),
    Expanded(
      child: Container(
        color: Colors.blue,
      ),
    ),
  ],
)

위의 예시에서는 빨간색 컨테이너가 전체 화면의 일부를 차지하고, 파란색 컨테이너는 남은 공간을 모두 차지하게 됩니다.

결론

플러터의 Stack 위젯은 다른 레이아웃 위젯들과 상호작용하여 다양한 UI 디자인을 구현할 수 있습니다. 다른 위젯들을 겹쳐서 배치할 수 있는 Stack 위젯의 활용법을 익혀두면 UI 개발 과정에서 유용하게 사용할 수 있을 것입니다.

더 많은 정보를 원하신다면, 플러터 공식 문서를 참고해보세요.

• 플러터 공식 문서: https://flutter.dev/docs

이상으로 플러터에서의 Stack 위젯과 다른 레이아웃 위젯의 상호작용에 대해 알아보았습니다. 감사합니다!