플러터(Flutter)는 크로스 플랫폼 모바일 애플리케이션 개발을 위한 프레임워크로, UI를 구성하는 위젯들을 조합하여 사용자 인터페이스를 구현합니다. 이번 포스트에서는 Stack 위젯과 Expanded 위젯을 함께 사용하는 방법에 대해 알아보겠습니다.

Stack 위젯

Stack 위젯은 여러 위젯을 겹쳐서 사용할 수 있는 위젯입니다. 그림 층(layer)을 구성하며, 가장 위에 있는 위젯이 다른 위젯들을 가리게 됩니다. Stack 위젯은 여러 가지 속성을 제공하여 위치와 크기를 조정할 수 있습니다.

다음은 Stack 위젯을 사용한 예시입니다.

Stack(
  children: [
    Container(
      width: 200,
      height: 200,
      color: Colors.blue,
    ),
    Positioned(
      top: 50,
      left: 50,
      child: Text(
        'Hello',
        style: TextStyle(fontSize: 20),
      ),
    ),
  ],
)

위의 예시 코드는 파란색 배경을 가진 사각형 위에 “Hello”라는 텍스트를 특정 위치에 출력하는 예시입니다.

Expanded 위젯

Expanded 위젯은 Flex 위젯 내에서 사용되며, 여분의 공간을 채우는 데 사용됩니다. Expanded 위젯은 Flexible 위젯을 자동으로 생성하고, 설정된 규칙에 따라 플렉스(flex)를 할당받아 크기를 조정합니다.

다음은 Expanded 위젯을 사용한 예시입니다.

Column(
  children: [
    Expanded(
      child: Container(
        color: Colors.red,
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.blue,
      ),
    ),
  ],
)

위의 예시 코드는 빨간색과 파란색을 가진 두 개의 컨테이너가 세로로 나열되며, 화면의 빈 공간을 차지하는 Expanded 위젯을 사용하는 예시입니다.

Stack 위젯과 Expanded 위젯 함께 사용하기

Stack 위젯과 Expanded 위젯을 함께 사용하여 UI를 구성하는 방법은 매우 간단합니다. Expanded 위젯을 사용하여 Stack 위젯의 크기를 조정할 수 있습니다.

다음은 Stack 위젯과 Expanded 위젯을 함께 사용한 예시입니다.

Expanded(
  child: Stack(
    children: [
      Container(
        color: Colors.red,
      ),
      Positioned(
        top: 50,
        left: 50,
        child: Text(
          'Hello',
          style: TextStyle(fontSize: 20),
        ),
      ),
    ],
  ),
)

위의 예시 코드는 화면 전체를 차지하는 빨간색 배경 위에 “Hello”라는 텍스트를 특정 위치에 출력하는 예시입니다. Stack 위젯을 Expanded 위젯으로 감싸면, Stack 위젯이 가능한 최대 크기로 확장되며, 화면 전체를 채우게 됩니다.

이제 Stack 위젯과 Expanded 위젯을 함께 사용하는 방법에 대해 알게 되었습니다. 직접 코드를 작성해보면서 다양한 UI를 구성해보세요.

참고: Flutter API 문서