Flutter에서 IndexedStack은 여러 개의 화면을 겹쳐놓고 하나의 화면만 보여주는 위젯입니다. 화면 전환 시에는 IndexedStack 위젯이 자식 위젯 중에 보여야 할 화면을 재생성하고 다시 그리는 작업이 필요합니다. 때로는 이 작업이 지연될 수 있으며, 사용자 화면 전환 경험에 부정적인 영향을 줄 수 있습니다.

이 문제를 해결하기 위해 몇 가지 방법을 소개하겠습니다.

1. 인덱스 순서 최적화하기

IndexedStack의 인덱스 값이 변경될 때마다, 자식 위젯들을 해제하고 다시 생성하는 작업이 발생합니다. 따라서, 자식 위젯들의 순서를 최적화하여 자주 사용하는 위젯을 앞에 위치시키는 것이 좋습니다. 이렇게 하면 자주 사용하는 위젯은 그대로 유지되고, 그 외의 자식 위젯들만 재생성하는 비용을 줄일 수 있습니다.

예를 들어, 가장 많이 사용되는 화면을 인덱스 0으로 설정하고, 그 외의 화면들을 순서에 따라 인덱스를 지정해주는 것이 좋습니다.

IndexedStack(
  index: currentIndex,
  children: [
    MostUsedScreen(),
    ...
  ],
)

2. 인덱스 변경 최소화하기

화면 전환이 지연되는 가장 큰 이유는 인덱스가 변경될 때마다 자식 위젯들을 모두 변경하고 다시 그리는 작업이 발생하기 때문입니다. 따라서, 인덱스 변경 횟수를 최소화하는 것이 중요합니다.

예를 들어, 특정 화면으로 이동할 때마다 전체 인덱스를 변경하는 대신, 현재 인덱스를 유지하고 해당 화면만 동적으로 변경하는 방식으로 코드를 구성하면 됩니다.

IndexedStack(
  index: currentIndex,
  children: [
    screen1,
    screen2,
    screen3,
  ],
),
...
GestureDetector(
  onTap: () {
    setState(() {
      currentIndex = 1;  // 화면 2로 전환
    });
  },
  child: Text('Go to screen 2'),
),

3. 캐시 매커니즘 사용하기

IndexedStack의 자식 위젯을 일시적으로 저장하고 재사용하는 캐시 매커니즘을 사용하면, 다시 그리는 작업이 필요하지 않으므로 전체적인 성능이 향상될 수 있습니다. 이를 위해 Flutter에서는 AutomaticKeepAliveClientMixin과 KeepAlive 위젯을 제공합니다.

class CachedScreen extends StatefulWidget {
  @override
  _CachedScreenState createState() => _CachedScreenState();
}

class _CachedScreenState extends State<CachedScreen> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return YourScreen();
  }
}

IndexedStack(
  index: currentIndex,
  children: [
    CachedScreen(),
    ...
  ],
)

위의 예시 코드에서 CachedScreen 위젯은 자동으로 캐싱되며, 화면 전환 시 다시 그려지지 않습니다.

이렇게 IndexedStack에서 화면 전환이 지연되는 문제를 해결하는 방법을 알아보았습니다. 각각의 방법을 적절히 조합하여 최적의 화면 전환 경험을 제공할 수 있도록 노력해보세요.

참고 자료

• Flutter 위젯 렌더링 최적화하기