목차

• Stack 위젯 소개
• Stack 위젯의 테마 적용 방법
• 다른 레이아웃 위젯의 테마 적용 방법

Stack 위젯 소개

Stack은 플러터에서 사용되는 레이아웃 위젯 중 하나로, 다른 위젯들을 겹쳐서 배치할 수 있는 위젯입니다. Stack 위젯은 가장 위에 있는 위젯이 화면에서 가장 먼저 그려지며, 순서대로 다른 위젯들이 배치됩니다. 이를 통해 UI 요소들을 겹치거나 중첩하여 다양한 디자인을 만들 수 있습니다.

Stack 위젯은 children 속성을 통해 여러 위젯들을 추가할 수 있습니다. 이들 위젯들은 각각의 Positioned 위젯으로 감싸져야 하며, top, left, bottom, right 속성을 이용하여 위치를 지정할 수 있습니다.

Stack 위젯의 테마 적용 방법

Stack 위젯 자체에는 테마를 적용하는 기능은 제공되지 않습니다. 하지만 Stack 위젯 내부의 각각의 위젯에 대해서는 각 위젯의 테마를 개별적으로 설정할 수 있습니다.

각 위젯에 테마를 적용하기 위해서는 해당 위젯의 속성을 이용하여 테마를 설정하면 됩니다. 예를 들어, Stack 위젯 내부의 Text 위젯에 대해서 텍스트 스타일을 설정하고 싶다면, Text 위젯의 style 속성을 이용하여 테마를 적용할 수 있습니다.

Stack(
  children: [
    Positioned(
      top: 0,
      left: 0,
      child: Text(
        'Hello',
        style: TextStyle(
          color: Colors.red,
          fontSize: 24,
        ),
      ),
    ),
    Positioned(
      top: 50,
      left: 50,
      child: Text(
        'World',
        style: TextStyle(
          color: Colors.blue,
          fontSize: 18,
        ),
      ),
    ),
  ],
)

위 코드에서는 Stack 위젯 내부에 두 개의 Text 위젯이 포함되어 있습니다. 각각의 Text 위젯은 style 속성을 이용하여 테마를 설정하고 있습니다. 첫 번째 Text 위젯의 텍스트 색상은 빨강이고, 크기는 24입니다. 두 번째 Text 위젯은 파란색으로 텍스트 색상을 설정하고 크기는 18로 설정되어 있습니다.

다른 레이아웃 위젯의 테마 적용 방법

Stack 위젯처럼 다른 레이아웃 위젯들에도 테마를 적용할 수 있습니다. 각 위젯마다 테마를 설정하는 방법은 해당 위젯의 속성에 따라 다를 수 있습니다.

만약 Container 위젯에 대해서 배경색을 설정하고 싶다면, Container 위젯의 color 속성을 이용하여 배경색을 설정할 수 있습니다.

Container(
  color: Colors.red,
  child: Text(
    'Hello World',
    style: TextStyle(
      color: Colors.white,
      fontSize: 24,
    ),
  ),
)

위 코드에서는 Container 위젯의 color 속성을 이용하여 배경색을 빨간색으로 설정하고 있습니다. 또한, Container 위젯 내부의 Text 위젯에 대해서도 테마를 설정하였습니다. 텍스트 색상은 흰색이며, 크기는 24로 설정되어 있습니다.

다른 레이아웃 위젯에서도 각 위젯에 따라 다양한 테마를 적용할 수 있으며, 해당 위젯의 속성을 이용하여 테마를 설정하면 됩니다.

참고 자료

• Flutter 공식 문서: https://flutter.dev/docs
• Flutter 디자인 패턴 및 레이아웃 가이드: https://flutter.dev/docs/development/ui/layout