Flutter의 BottomNavigationBar 사용 시 발생하는 rebuild 문제, IndexedStack으로 해결

Flutter에서 BottomNavigationBar는 앱의 하단에 여러 탭을 표시하는 데 널리 사용되는 위젯입니다. 하지만, BottomNavigationBar를 사용하면서 다음과 같은 문제점을 경험한 적이 있나요?

1. 탭 이동 시 위젯 전체 재구성: 탭을 이동할 때마다 모든 위젯이 다시 구축됩니다. 이는 불필요한 성능 낭비를 야기하고, 깜박임 현상을 발생시킬 수 있습니다.
2. 리스트뷰 스크롤 초기화: 리스트뷰를 스크롤하다 다른 탭으로 이동 후 다시 돌아오면 스크롤 위치가 초기화됩니다. 이는 사용자 경험을 저하시키는 문제입니다.

 

IndexedStack 사용:

IndexedStack 위젯을 사용하여 탭별 위젯을 관리하면 탭 이동 시 위젯 재구성을 방지할 수 있습니다. IndexedStack은 현재 선택된 탭의 위젯만 표시하고 나머지는 숨겨 놓는 방식으로 작동합니다.

IndexedStack get pages => IndexedStack(
  index: _currentIndex,
  children: tabs
      .mapIndexed((tab, index) => Offstage(
            offstage: _currentTab != tab,
            child: TabNavigator(
              navigatorKey: navigatorKeys[index],
              tabItem: tab,
            ),
          ))
      .toList());

 

+ Flutter에서 Offstage 사용 시 얻을 수 있는 효과

Offstage는 Flutter에서 위젯을 화면에 표시하지 않고 메모리에 유지하는 데 사용되는 위젯입니다. IndexedStack과 함께 사용하면 다음과 같은 효과를 얻을 수 있습니다.

1. 성능 향상: Offstage는 표시되지 않는 위젯을 렌더링하지 않아 성능을 향상시킬 수 있습니다. 탭바와 같은 여러 페이지로 구성된 앱에서 특히 유용합니다.

2. 메모리 사용량 감소: Offstage는 표시되지 않는 위젯을 렌더링하지 않아 메모리 사용량을 줄일 수 있습니다.

3. 페이지 전환 애니메이션 효과: Offstage는 페이지 전환 시 애니메이션 효과를 쉽게 구현할 수 있도록 도와줍니다.

4. 깜박임 현상 방지: Offstage는 페이지 전환 시 깜박임 현상을 방지할 수 있습니다.

5. 사용자 경험 향상: Offstage는 위의 장점들을 통해 사용자 경험을 향상시킬 수 있습니다.