[flutter] 플러터(IndexedStack)에서 인덱스 변경시 상태(State)를 초기화할 수 있나요?

07 Dec 2023

flutter

IndexedStack 위젯은 여러 개의 자식 위젯 중에서 하나만 화면에 표시하는 위젯입니다. 이 위젯은 선택된 자식 위젯의 인덱스를 사용하여 화면에 표시할 자식 위젯을 결정합니다. 따라서 인덱스가 변경되면 현재 화면에 표시된 자식 위젯이 변경됩니다.

IndexedStack 위젯은 선택된 자식 위젯이 변경될 때마다 해당 자식 위젯의 상태를 유지합니다. 이는 기본 동작이며, 인덱스가 변경되어도 자식 위젯의 상태는 초기화되지 않습니다.

하지만 필요한 경우에는 인덱스를 변경할 때마다 자식 위젯의 상태를 초기화할 수 있습니다. 이를 수행하기 위해서는 IndexedStack 위젯을 감싸는 상태를 관리하는 StatefulWidget을 사용해야 합니다.

다음은 인덱스를 변경할 때마다 자식 위젯의 상태를 초기화하는 예제 코드입니다:

class ResettableIndexedStack extends StatefulWidget {
  final List<Widget> children;

  ResettableIndexedStack({required this.children});

  @override
  _ResettableIndexedStackState createState() => _ResettableIndexedStackState();
}

class _ResettableIndexedStackState extends State<ResettableIndexedStack> {
  int currentIndex = 0;

  void changeIndex(int newIndex) {
    setState(() {
      currentIndex = newIndex;
    });
  }

  void resetChildrenState() {
    setState(() {
      currentIndex = 0;
      for (var i = 0; i < widget.children.length; i++) {
        if (widget.children[i] is StatefulWidget) {
          final StatefulElement element = widget.children[i].key as StatefulElement;
          element.state?.reassemble();
        }
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        IndexedStack(
          index: currentIndex,
          children: widget.children,
        ),
        ElevatedButton(
          onPressed: () {
            resetChildrenState();
          },
          child: Text('Reset State'),
        ),
      ],
    );
  }
}

위의 코드는 ResettableIndexedStack이라는 StatefulWidget을 정의하고, 이 위젯은 IndexedStack 위젯을 감싸는 역할을 합니다. 이 위젯은 인덱스를 변경할 때마다 현재 자식 위젯의 상태를 초기화하도록 구현되어 있습니다.

IndexedStack 대신에 ResettableIndexedStack을 사용하면 인덱스를 변경할 때마다 현재 자식 위젯의 상태가 초기화됩니다. resetChildrenState() 메서드를 호출하면 현재 인덱스를 0으로 설정하고, 각 자식 위젯의 상태를 초기화합니다.

이와 같은 방법으로 IndexedStack의 인덱스를 변경할 때마다 상태를 초기화할 수 있습니다. 이를 사용하여 플러터 애플리케이션을 개발하면 더욱 유연하고 동적인 화면 전환을 구현할 수 있습니다.