Flutter Offstage 위젯 완벽 가이드 – 조건부 위젯 표시로 성능 최적화하기

Flutter에서 앱을 개발하다 보면 특정 상황에서 UI 요소를 숨기고 싶을 때가 많습니다. 이럴 때 Visible 속성이나 Opacity 속성을 사용할 수도 있지만, 화면에 렌더링하지 않으면서 상태를 유지하는 더 효율적인 방법이 있습니다. 바로 Offstage 위젯입니다. Offstage는 화면에 보여지지 않는 위젯을 렌더링하지 않고 메모리에 보관해 상태를 유지합니다. 이번 글에서는 Offstage 위젯의 특성과 사용법, 그리고 실제 사용 예제를 통해 Offstage 위젯을 효과적으로 활용하는 방법을 알아보겠습니다.

---

1. Offstage 위젯이란?

Offstage 위젯은 Flutter에서 위젯을 화면에 표시하지 않으면서도, 그 위젯의 상태를 그대로 유지할 수 있게 해주는 위젯입니다. 이 위젯을 사용하면 UI 요소를 숨기면서 성능 최적화를 꾀할 수 있습니다. Opacity 위젯이 보이지 않게 하지만 여전히 렌더링을 수행하는 반면, Offstage는 화면에 그리지 않고 메모리에서만 유지해 더 효율적입니다.

Offstage 속성

• offstage: true일 경우 해당 위젯이 화면에서 숨겨지고, false일 경우 화면에 표시됩니다.
• child: Offstage 위젯이 관리하는 자식 위젯입니다. Offstage는 이 위젯을 조건부로 보여주거나 숨깁니다.

장점

• 렌더링 최적화: UI를 보이지 않게 하는 방법으로 Visible이나 Opacity와 비교했을 때 불필요한 렌더링을 방지하여 성능에 좋습니다.
• 상태 유지: 위젯의 상태를 유지하면서도 화면에 표시하지 않을 수 있습니다.

2. Offstage 위젯의 기본 사용법

기본적인 사용법은 매우 간단합니다. offstage 속성만 true 또는 false로 설정해주면 됩니다.

Offstage(
  offstage: true, // 화면에 보이지 않음
  child: Text('이 텍스트는 보이지 않습니다.'),
)

위 코드에서는 offstage가 true로 설정되어 있어 Text 위젯이 화면에 표시되지 않습니다. 그러나 offstage를 false로 변경하면 Text 위젯이 보이게 됩니다.

3. Offstage 위젯의 활용 예제

(1) 특정 조건에서만 위젯 숨기기

다음은 Offstage 위젯을 이용하여 버튼을 눌렀을 때 특정 위젯을 조건부로 숨기는 간단한 예제입니다.

class OffstageExample extends StatefulWidget {
  @override
  _OffstageExampleState createState() => _OffstageExampleState();
}

class _OffstageExampleState extends State<OffstageExample> {
  bool isHidden = true;

  void toggleVisibility() {
    setState(() {
      isHidden = !isHidden;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Offstage(
          offstage: isHidden,
          child: Text('이 텍스트는 버튼을 누르면 나타납니다.'),
        ),
        ElevatedButton(
          onPressed: toggleVisibility,
          child: Text(isHidden ? '보이기' : '숨기기'),
        ),
      ],
    );
  }
}

isHidden 변수를 통해 Offstage의 offstage 속성을 true 또는 false로 토글하여 텍스트 위젯을 보이거나 숨깁니다. 버튼을 누를 때마다 텍스트의 가시성을 변경할 수 있습니다.

(2) Tab 전환 시 Offstage 사용

화면에 여러 Tab이 있을 때, Offstage 위젯을 사용하여 불필요한 Tab을 숨기고 메모리만 유지하여 성능을 최적화할 수 있습니다.

class OffstageTabExample extends StatefulWidget {
  @override
  _OffstageTabExampleState createState() => _OffstageTabExampleState();
}

class _OffstageTabExampleState extends State<OffstageTabExample> {
  int selectedIndex = 0;

  void selectTab(int index) {
    setState(() {
      selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            ElevatedButton(
              onPressed: () => selectTab(0),
              child: Text('Tab 1'),
            ),
            ElevatedButton(
              onPressed: () => selectTab(1),
              child: Text('Tab 2'),
            ),
          ],
        ),
        Expanded(
          child: Stack(
            children: [
              Offstage(
                offstage: selectedIndex != 0,
                child: Center(child: Text('Tab 1 내용')),
              ),
              Offstage(
                offstage: selectedIndex != 1,
                child: Center(child: Text('Tab 2 내용')),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

selectedIndex 값을 기준으로 Offstage의 offstage 속성을 조정하여 현재 선택된 Tab만 화면에 표시하고, 다른 Tab은 렌더링하지 않으므로 성능을 절약할 수 있습니다.

4. Offstage 위젯을 사용할 때 주의할 점

• 렌더링되지 않지만 메모리는 사용: Offstage로 숨긴 위젯은 화면에 표시되지 않지만 메모리에 유지되므로 너무 많은 위젯을 숨길 경우 메모리 사용량이 늘어날 수 있습니다.
• Animation과 함께 사용할 때 주의: Offstage로 숨긴 위젯에 애니메이션 효과를 적용해도 화면에 보이지 않으므로 애니메이션이 필요할 경우 다른 방법을 사용하는 것이 좋습니다.

5. Offstage vs Visibility vs Opacity 비교

기능	Offstage	Visibility	Opacity
화면에 표시 여부	렌더링하지 않음	렌더링하지만 보이지 않게 할 수 있음	렌더링하면서 불투명도를 조정하여 보이지 않게 함
상태 유지 여부	유지	유지	유지
성능	높음	중간	낮음

Offstage는 화면에 보여주지 않으면서 상태를 유지할 수 있는 가장 효율적인 방법이며, Visibility와 Opacity는 상태는 유지하지만 여전히 렌더링을 수행하므로 성능에 미치는 영향이 다릅니다.

결론

Flutter에서 Offstage 위젯은 화면에 렌더링하지 않으면서도 상태를 유지할 수 있는 효율적인 방법을 제공합니다. 특히, 화면에 표시할 필요가 없는 UI 요소를 숨기면서 성능을 최적화해야 할 때 유용하게 사용할 수 있습니다. Visibility나 Opacity보다 더 효율적인 렌더링 방식이 필요한 상황에서 Offstage를 사용하면 앱의 성능을 크게 향상시킬 수 있습니다. Flutter 앱 개발 시 Offstage 위젯을 적극적으로 활용하여 UI를 최적화해보세요!