Offstage VS IndexedStack

body: Stack(
  children: [
    Offstage(
      offstage: _selectedIndex != 0,
      child: const VideoTimelineScreen(),
    ),
    Offstage(
      offstage: _selectedIndex != 1,
      child: const DiscoverScreen(),
    ),
    Offstage(
      offstage: _selectedIndex != 3,
      child: const InboxScreen(),
    ),
    Offstage(
      offstage: _selectedIndex != 4,
      child: const UserProfileScreen(),
    )
  ],
),

이 코드는 Stack 위젯을 사용하여 여러 위젯을 쌓아놓고, _selectedIndex의 값에 따라 특정 위젯만 화면에 보여주는 로직입니다.

• Stack 위젯은 여러 자식 위젯을 겹쳐서 표시합니다. 기본적으로 첫 번째 자식이 아래에 위치하고, 그 다음 자식이 그 위에 위치하는 방식으로 위젯들이 겹쳐져서 표시됩니다.

• Offstage 위젯은 주어진 조건에 따라 자식 위젯을 화면에 보이게 하거나 숨기게 합니다.

  • offstage 프로퍼티가 true일 경우, 해당 Offstage의 자식 위젯은 화면에서 숨겨집니다.
  • offstage 프로퍼티가 false일 경우, 자식 위젯은 화면에 표시됩니다.

코드를 상세히 살펴보면:

1. 첫 번째 Offstage는 _selectedIndex가 0일 때만 VideoTimelineScreen을 보여줍니다.
2. 두 번째 Offstage는 _selectedIndex가 1일 때만 DiscoverScreen을 보여줍니다.
3. 세 번째 Offstage는 _selectedIndex가 3일 때만 InboxScreen을 보여줍니다.
4. 네 번째 Offstage는 _selectedIndex가 4일 때만 UserProfileScreen을 보여줍니다.

즉, _selectedIndex 값에 따라 Stack 안에서 활성화되는 화면이 달라집니다. 나머지는 화면에서 숨겨집니다. 이 방식은 탭 기반의 네비게이션을 구현할 때 매우 유용합니다.

Offstage와 IndexedStack은 모두 Flutter에서 자식 위젯의 표시 여부를 제어하기 위해 사용되는 위젯입니다. 그러나 이 두 위젯은 동작 방식과 사용 케이스에 따라 특정 시나리오에서 더 효율적일 수 있습니다. 아래에서 각 위젯의 특징과 장단점을 살펴보겠습니다.

Offstage:

1. 동작 방식: Offstage 위젯은 offstage 속성이 true로 설정되면 해당 자식을 렌더 트리에서 제외합니다.
2. 장점:
   • 렌더링 비용 절약: 뷰에서 제거되므로 렌더링 비용이 발생하지 않습니다.
   • 메모리 절약: 사용되지 않는 위젯을 뷰에서 완전히 제거할 수 있습니다.
3. 단점:
   • 상태 유지: Offstage를 사용하여 위젯을 숨겼다가 다시 표시할 때 상태가 유지되지 않을 수 있습니다.

IndexedStack:

1. 동작 방식: IndexedStack은 모든 자식을 메모리에 로드하지만, index 속성에 따라 하나의 자식만 표시합니다.
2. 장점:
   • 상태 유지: 모든 자식 위젯의 상태가 계속 유지됩니다.
   • 빠른 전환: 렌더링된 위젯 사이에서 빠르게 전환할 수 있습니다.
3. 단점:
   • 높은 메모리 사용: 모든 자식 위젯이 메모리에 유지되므로 메모리 사용량이 늘어날 수 있습니다.

결론:

• 효율성의 관점에서:
  • Offstage: 자주 변경되지 않는 위젯이나 잠시 숨기고 나중에 다시 보여줄 필요가 없는 위젯에 적합합니다.
  • IndexedStack: 여러 화면 또는 탭 사이를 빠르게 전환하면서 각 화면의 상태를 유지해야 하는 경우에 적합합니다.

따라서, 어떤 위젯이 더 효율적인지는 사용하는 상황과 요구 사항에 따라 다릅니다. 상황에 맞게 적절한 위젯을 선택하는 것이 중요합니다.