Flutter에서 탭 구조로 구성할 때, 탭의 state가 다 날아가는 현상이 있다. 이걸 방지하기 위해서 AutomaticKeepAliveClientMixin 와 IndexedStack을 사용해봤다.

AutomaticKeepAliveClientMixin

Flutter에서 주로 ListView.builder,GridView.builder와 같은 lazy loading 위젯과 함께 사용되는 mixin 이다. 스크롤 가능한 목록에서 항목이 화면 밖으로 스크롤 되었을 때, 해당 항목의 상태를 유지할 수 있다.

예를 들어, ListView.builder에 텍스트 필드가 있는 경우, 사용자가 텍스트 필드에 입력한 내용이 화면 밖으로 스크롤되었다가 다시 화면 안으로 돌아올 때 사라지게 되지만 이걸 사용하면 텍스트 필드의 상태를 유지할 수 있게 된다.

사용법

1. StatefulWidget 클래스에서 with AutomaticKeepAliveClientMixin를 추가한다
2. wantKeepAlive를 추가하고 메서드에서 true를 반환한다.
3. build 메서드에서 super.build(context)를 추가한다.

하지만 이것만으로는 TabView나 PageView 같은 위젯들과 함께 작동하지 않는다. 이럴 때 IndexedStack을 쓰면 된다.

IndexedStack

Stack 클래스의 하위 클래스로, 여러 자식 중 하나만 보여주는 동시에 다른 자식의 상태도 유지하는 위젯이다. Stack과 마찬가지로 모든 자식을 로드하지만 한번에 하나의 자식만 보여준다.

주 속성은 다음과 같다.

• index: 현재 보여줄 자식 위젯의 인덱스
• children: Stack 내부에 위치할 여러 개의 자식 위젯들

IndexedStack(
  index: _selectedIndex,
  children: _widgetOptions,
),