[flutter] 플러터에서의 Stack 위젯과 다른 레이아웃 위젯의 조건부 렌더링 방법

07 Dec 2023

flutter

Stack 위젯

Stack 위젯은 플러터에서 레이아웃을 만들 때 유용한 위젯 중 하나입니다. Stack 위젯은 자식 위젯을 겹쳐서 표시할 수 있으며, 각 자식 위젯의 위치를 조정할 수 있습니다.

Stack 위젯을 사용하기 위해서는 다음과 같은 절차를 따릅니다.

Stack 위젯을 생성합니다.
Stack 위젯의 자식 위젯들을 추가합니다. 각 자식 위젯은 positioned 위젯으로 감싸져야 합니다.
positioned 위젯의 bottom, top, left, right 등의 속성을 사용하여 자식 위젯의 위치를 조정합니다.

아래는 예시 코드입니다.

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

위 코드는 빨간색과 파란색의 사각형을 겹쳐서 표시합니다.

다른 레이아웃 위젯

Stack 외에도 플러터에는 다양한 레이아웃 위젯이 있습니다.

Row와 Column은 자식 위젯을 가로로 또는 세로로 배열합니다.
Container는 크기와 배경 색상, 그림자 등을 설정할 수 있는 위젯입니다.
Expanded는 레이아웃에서 사용 가능한 최대 공간을 차지하는 위젯입니다.
Flex는 비율에 따라 자식 위젯들을 분할하여 배치합니다.

각 위젯의 사용 방법은 공식 플러터 문서를 참고하시기 바랍니다.

조건부 렌더링 방법

플러터에서 조건부 렌더링을 하기 위해서는 if 문이나 삼항 연산자를 사용할 수 있습니다.

// 예시 1: if 문 사용
if (condition) {
  return WidgetA();
} else {
  return WidgetB();
}

// 예시 2: 삼항 연산자 사용
return condition ? WidgetA() : WidgetB();

위 코드에서 condition은 true나 false 값을 가질 수 있는 변수나 식입니다. 만약 condition이 true라면 WidgetA가 렌더링되고, false라면 WidgetB가 렌더링됩니다.

조건부 렌더링을 사용하여 Stack 위젯과 다른 레이아웃 위젯을 조합하여 동적인 UI를 구성할 수 있습니다.

이 문서에서는 플러터에서 Stack 위젯과 다른 레이아웃 위젯을 사용하여 UI를 구성하는 방법과 조건부 렌더링을 적용하는 방법에 대해 알아보았습니다. Stack 위젯과 다른 레이아웃 위젯의 다양한 속성과 사용법을 공부하여 플러터 애플리케이션의 UI를 자유롭게 설계할 수 있도록 해보세요!

목차

Stack 위젯

다른 레이아웃 위젯

조건부 렌더링 방법