IndexedStack 위젯으로 효율적인 화면 전환하기

728x90

Flutter에서는 화면 간 전환과 콘텐츠 표시를 위한 다양한 위젯을 제공하며, 그중 IndexedStack은 여러 자식 위젯을 겹쳐놓고 그중 하나만 표시하는 구조를 제공합니다. 이 글에서는 IndexedStack의 개념과 기본 사용법, 그리고 실전에서 어떻게 활용할 수 있는지를 알아보겠습니다. IndexedStack을 사용하여 효율적으로 여러 화면을 전환하거나 탭과 같은 인터페이스를 손쉽게 구현할 수 있습니다.

1. IndexedStack이란?

IndexedStack은 Stack 위젯과 유사하지만, 자식 위젯들 중 한 개만 표시되는 특징을 가지고 있습니다. 즉, 여러 자식 위젯을 겹쳐놓고 특정 인덱스의 위젯만 화면에 표시되도록 하는 방식입니다. 다른 자식 위젯들은 렌더링되지 않지만, 메모리 상에 유지되어 있어 필요할 때 빠르게 화면에 표시될 수 있습니다.

이 위젯은 여러 화면을 유지해야 하되, 한 번에 하나의 화면만 보여줘야 하는 UI에서 매우 유용하게 사용됩니다. 특히 탭 네비게이션이나 단계별 프로세스에서 사용자가 쉽게 화면을 전환할 수 있도록 돕습니다.

2. IndexedStack의 주요 속성

IndexedStack은 매우 단순한 구조를 가지고 있어, 몇 가지 중요한 속성들만 이해하면 쉽게 사용할 수 있습니다.

index
- 설명: 어떤 자식 위젯이 현재 화면에 표시될지를 결정하는 속성입니다. 숫자(인덱스)로 설정되며, 0부터 시작합니다.
- 예시: index: 2로 설정하면 세 번째 자식 위젯이 화면에 표시됩니다.
alignment
- 설명: Stack과 마찬가지로 자식 위젯의 정렬을 결정하는 속성입니다. Alignment.center, Alignment.topLeft 등 다양한 옵션을 사용할 수 있습니다.
- 예시: 자식 위젯들이 중앙에 위치하도록 alignment: Alignment.center를 사용할 수 있습니다.
children
- 설명: IndexedStack 내부에 쌓여 있는 자식 위젯들의 목록입니다. 모든 자식 위젯은 겹쳐서 렌더링되며, index에 따라 특정 위젯만 표시됩니다.
- 예시: 여러 개의 탭 내용이나 화면을 이 리스트에 넣을 수 있습니다.

3. IndexedStack 사용 예제

다음은 IndexedStack을 이용한 간단한 예시입니다. 탭 버튼을 클릭할 때마다 해당하는 내용이 전환되는 구조를 구현해보겠습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('IndexedStack Demo'),
        ),
        body: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: () {
                    setState(() {
                      _currentIndex = 0;
                    });
                  },
                  child: Text('화면 1'),
                ),
                ElevatedButton(
                  onPressed: () {
                    setState(() {
                      _currentIndex = 1;
                    });
                  },
                  child: Text('화면 2'),
                ),
                ElevatedButton(
                  onPressed: () {
                    setState(() {
                      _currentIndex = 2;
                    });
                  },
                  child: Text('화면 3'),
                ),
              ],
            ),
            Expanded(
              child: IndexedStack(
                index: _currentIndex,
                children: [
                  Container(
                    color: Colors.red,
                    child: Center(child: Text('화면 1')),
                  ),
                  Container(
                    color: Colors.green,
                    child: Center(child: Text('화면 2')),
                  ),
                  Container(
                    color: Colors.blue,
                    child: Center(child: Text('화면 3')),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드는 세 개의 버튼을 사용해 IndexedStack의 index를 변경하고, 각 버튼에 따라 다른 화면이 표시되도록 합니다. 버튼을 눌러 화면 전환을 할 때, IndexedStack 내부의 세 개의 컨테이너 중 하나만 보여지게 됩니다. 이 방식은 화면 간 전환이 필요할 때 매우 효율적으로 동작합니다.

4. IndexedStack의 활용 시나리오

IndexedStack은 다양한 UI 시나리오에서 활용될 수 있습니다. 그중 몇 가지 대표적인 사례는 다음과 같습니다.

탭 네비게이션

하나의 화면에서 여러 탭을 보여줘야 할 때, 각 탭마다 다른 화면을 IndexedStack을 이용해 관리할 수 있습니다. 사용자는 탭을 전환할 때마다 즉시 다른 콘텐츠를 볼 수 있습니다. 이때, 모든 화면이 메모리 상에 남아 있기 때문에 상태 유지가 필요한 상황에서 매우 유용합니다.

단계별 프로세스

회원가입이나 주문 절차처럼 여러 단계로 나누어진 프로세스를 처리할 때, IndexedStack을 사용해 각 단계를 관리할 수 있습니다. 사용자가 진행 상황을 한 단계씩 이동하면서 이전 단계의 데이터를 유지할 수 있기 때문에 매우 적합한 방식입니다.

상태 유지가 필요한 화면 전환

특정 화면을 자주 전환해야 하지만, 이전 화면의 상태를 유지해야 할 경우 IndexedStack을 사용하면 모든 위젯을 메모리에 남겨놓고 상태를 그대로 유지할 수 있습니다. 예를 들어, 여러 필드가 있는 양식을 작성하다가 화면을 전환하더라도 입력한 데이터가 그대로 남아 있게 할 수 있습니다.

5. IndexedStack의 장점과 단점

장점

빠른 전환: 모든 자식 위젯이 미리 메모리에 로드되어 있기 때문에 화면 간 전환이 매우 빠르게 이루어집니다.
상태 유지: 위젯이 전환되더라도 이전 위젯의 상태가 유지되므로, 상태를 다시 초기화할 필요가 없습니다.
간단한 구조: 구현이 쉽고, 탭 네비게이션 같은 일반적인 UI 구조에 적합합니다.

단점

메모리 사용량 증가: 모든 자식 위젯이 메모리에 남아 있기 때문에, 자식 위젯이 많아질수록 메모리 사용량이 늘어날 수 있습니다. 메모리 관리가 중요한 대규모 앱에서는 신중하게 사용해야 합니다.
초기 로드 시간: 모든 자식 위젯이 처음부터 로드되기 때문에, 자식 위젯의 로딩 시간이 길어질 수 있습니다. 특히 복잡한 위젯을 많이 포함하고 있다면 초기 로드 시간이 길어질 수 있습니다.

6. IndexedStack과 Stack의 차이점

IndexedStack은 Stack과 유사하지만, 두 위젯의 가장 큰 차이점은 Stack은 여러 자식 위젯을 동시에 겹쳐서 모두 보여주는 반면, IndexedStack은 한 번에 하나의 자식 위젯만 표시한다는 점입니다. 또한, Stack에서는 각 자식 위젯의 위치를 자유롭게 설정할 수 있지만, IndexedStack은 단순히 index로 관리되는 구조입니다.

Stack: 여러 위젯을 겹쳐 놓고, 각 위젯을 자유롭게 배치.
IndexedStack: 여러 위젯을 겹쳐 놓되, 하나의 위젯만 표시.

이 차이를 잘 이해하고, 상황에 맞게 적절한 위젯을 선택하는 것이 중요합니다.

7. 결론

IndexedStack은 여러 화면을 전환해야 할 때 유용하게 사용할 수 있는 Flutter 위젯입니다. 이 위젯을 통해 화면 간 빠른 전환을 구현할 수 있으며, 특히 상태를 유지해야 하는 탭 네비게이션이나 단계별 프로세스에서 큰 장점을 발휘합니다. 다만, 모든 자식 위젯이 메모리에 유지된다는 점을 고려하여 적절하게 사용해야 합니다. 앱의 구조에 맞게 IndexedStack을 활용하여, 효율적이고 자연스러운 화면 전환을 구현해 보세요.