Stack과 Positioned 위젯으로 겹침 레이아웃 구현하기

Stack과 Positioned 위젯 마스터하기를 시작합니다.

• 플러터(Flutter) 시작을 위한 다트(Dart) 강좌는 19강 단위 테스트 강좌를 끝으로 종료가 되었습니다.
• 플러터(Flutter) 프로젝트 시작 전 디자인을 위한 레이아웃 강좌를 지속적으로 연재 중입니다.

플러터(Flutter) Stack과 Positioned 위젯 마스터하기

• 플러터(Flutter)는 다재다능한 UI 프레임워크로, 단일 코드베이스로 iOS와 안드로이드 플랫폼에서 동작하는 애플리케이션을 만들 수 있습니다.
• 플러터는 다양한 위젯을 제공하여, 복잡한 레이아웃도 쉽게 구성할 수 있도록 도와줍니다.
• 그 중에서도 Stack과 Positioned 위젯은 여러 위젯을 겹쳐 배치하는 데 매우 유용합니다.
• 이번 포스팅에서는 Stack과 Positioned 위젯의 동작 원리와 사용 방법을 자세히 살펴보겠습니다.

Stack 위젯이란?

• Stack 위젯은 플러터에서 여러 자식 위젯을 겹쳐서 배치할 수 있게 하는 레이아웃 위젯입니다.
• 이는 HTML의 z-index와 비슷하게 동작합니다.
• Stack을 사용하면 자식 위젯들이 서로 겹쳐서 표시되며, 첫 번째로 추가된 자식 위젯이 가장 아래에 위치하고, 나중에 추가된 자식 위젯들이 그 위에 쌓이게 됩니다.

Stack의 주요 속성

• Stack 위젯에는 다양한 속성이 있지만, 주요 속성은 다음과 같습니다.
• alignment: Stack 내의 자식 위젯들을 정렬하는 방법을 지정합니다. 기본값은 Alignment.topLeft이며, 이는 Stack의 왼쪽 상단을 기준으로 자식 위젯들을 배치합니다.
• fit: Stack의 크기를 자식 위젯의 크기에 맞출지, 부모 위젯의 크기에 맞출지 결정합니다. 기본값은 StackFit.loose이며, 자식 위젯의 크기에 맞춰집니다.
• overflow: Stack 내에서 자식 위젯들이 Stack의 경계를 벗어날 경우 어떻게 처리할지를 지정합니다. 현재는 deprecated 되었으며, clipBehavior로 대체되었습니다.

Stack의 기본 사용 예제

• 아래는 기본적인 Stack 위젯의 사용 예제입니다.

Stack(
  alignment: Alignment.center,
  children: <Widget>[
    Container(
      width: 200,
      height: 200,
      color: Colors.red,
    ),
    Container(
      width: 150,
      height: 150,
      color: Colors.green,
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.blue,
    ),
  ],
)

• 위 코드는 200x200 크기의 빨간색 사각형, 150x150 크기의 초록색 사각형, 그리고 100x100 크기의 파란색 사각형이 순서대로 쌓이는 모습을 보여줍니다. 자식 위젯들은 기본적으로 중앙에 정렬되며, 크기에 따라 겹쳐지게 됩니다.

Positioned 위젯이란?

• Positioned 위젯은 Stack 위젯 내에서 자식 위젯의 위치를 지정할 수 있게 해주는 위젯입니다.
• Positioned를 사용하면 자식 위젯을 top, right, bottom, left 속성을 사용해 Stack의 경계에 상대적으로 배치할 수 있습니다.

Positioned의 주요 속성

• top, right, bottom, left: 각 속성은 해당 방향에서의 거리(픽셀)를 의미합니다.
• 예를 들어, top: 10은 위쪽에서 10픽셀 떨어진 위치에 자식 위젯을 배치하게 됩니다.
• width와 height: 위젯의 너비와 높이를 지정합니다. Stack의 경계 내에서 상대적인 크기를 지정할 수 있습니다.

Positioned의 사용 예제

• 아래는 Positioned 위젯을 사용한 예제입니다.

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

• 이 예제에서는 빨간색 사각형을 배경으로 하여, 초록색 사각형이 상단에서 50픽셀, 왼쪽에서 50픽셀 떨어진 위치에 배치됩니다.
• 파란색 사각형은 Stack의 오른쪽 하단 모서리에 배치됩니다.

Stack과 Positioned의 결합 사용

• Stack과 Positioned 위젯은 조합하여 사용함으로써 매우 복잡하고 유연한 레이아웃을 만들 수 있습니다.
• 예를 들어, 사용자 인터페이스(UI)에서 동적인 요소를 겹쳐 배치하거나, 겹치는 애니메이션을 구현할 때 유용합니다.
• 아래 예제는 이미지 위에 텍스트와 아이콘을 겹쳐서 배치하는 예제입니다.

Stack(
  children: <Widget>[
    Image.network(
      'https://flutter.dev/assets/homepage/carousel/slide_1-bg-1-4eb8c56f7f92a3e2a9f3a7ed2e01c57e25a4c7d5e0a60bb902f3b9c9120a0b13.jpg',
      width: 300,
      height: 200,
      fit: BoxFit.cover,
    ),
    Positioned(
      bottom: 10,
      left: 10,
      child: Text(
        'Flutter',
        style: TextStyle(
          fontSize: 24,
          color: Colors.white,
          fontWeight: FontWeight.bold,
        ),
      ),
    ),
    Positioned(
      top: 10,
      right: 10,
      child: Icon(
        Icons.star,
        color: Colors.yellow,
        size: 30,
      ),
    ),
  ],
)

• 이 코드는 이미지 위에 텍스트와 아이콘을 겹쳐서 표시합니다. 텍스트는 이미지의 왼쪽 하단에, 아이콘은 오른쪽 상단에 위치하게 됩니다.
• 이를 통해 UI 요소들이 서로 겹치며 시각적으로 강조되는 효과를 줄 수 있습니다.

Stack과 Positioned 활용 시 유의사항

• Stack과 Positioned 위젯을 사용할 때 몇 가지 주의할 점이 있습니다.
• 레이아웃 오버플로우: Stack의 자식 위젯들이 너무 커서 부모 위젯의 경계를 벗어나면 레이아웃 오버플로우가 발생할 수 있습니다. 이 경우 화면에 경고 메시지가 표시될 수 있습니다. 이를 방지하려면 자식 위젯의 크기를 적절히 조정하거나, clipBehavior 속성을 사용하여 경계를 넘어가는 부분을 잘라낼 수 있습니다.
• 복잡성 증가: Stack 위젯에 너무 많은 자식 위젯을 추가하면 코드의 복잡성이 증가할 수 있습니다. 복잡한 레이아웃을 만들 때는 Stack을 적절히 분할하거나 다른 레이아웃 위젯과 병행하여 사용하는 것이 좋습니다.
• 성능: Stack 위젯을 과도하게 사용하거나, 너무 많은 레이어를 쌓는 경우 성능 저하가 발생할 수 있습니다. 특히, 애니메이션과 함께 사용할 때는 주의가 필요합니다. 성능 문제를 피하기 위해서는 필요하지 않은 레이어를 최소화하는 것이 좋습니다.

맺음말

• Stack과 Positioned 위젯은 플러터에서 매우 강력한 도구로, 복잡한 레이아웃을 쉽게 구현할 수 있게 해줍니다.
• 특히, 여러 위젯을 겹쳐서 배치해야 할 때 매우 유용합니다. 이 두 위젯을 잘 활용하면 더욱 유연하고 시각적으로 매력적인 UI를 만들 수 있습니다.
• 다음 포스팅에서는 ListView 와 GridView 위젯으로 스크롤 가능한 레이아웃 구현하기 강좌로 돌아오도록 하겠습니다.