[flutter] 플러터(IndexedStack)에서 인덱스 변경시 이전 페이지의 상태를 유지하는 방법은 무엇인가요?

07 Dec 2023

flutter

하지만 이전 페이지의 상태를 유지하고 싶다면, 상태를 관리하는 방법이 필요합니다. 예를 들어, StatefulWidget을 사용하여 상태를 유지할 수 있습니다. StatefulWidget은 상태를 관리하기 위해 StatefulWidget 자체와 State 클래스를 사용합니다.

다음은 IndexedStack 위젯에서 이전 페이지의 상태를 유지하는 예시입니다.

import 'package:flutter/material.dart';

class MyIndexedStack extends StatefulWidget {
  @override
  _MyIndexedStackState createState() => _MyIndexedStackState();
}

class _MyIndexedStackState extends State<MyIndexedStack> {
  int currentIndex = 0;
  List<Widget> pages = [
    PageOne(),
    PageTwo(),
    PageThree(),
  ];

  @override
  Widget build(BuildContext context) {
    return IndexedStack(
      index: currentIndex,
      children: pages,
    );
  }
}

class PageOne extends StatelessWidget {
  // PageOne 위젯의 상태를 관리하기 위해 StatefulWidget을 사용할 수도 있습니다.
  // 필요에 따라 StatefulWidget을 사용하여 상태를 유지할 수 있습니다.
  // 예를 들어, TextFormField의 입력 값을 유지하는 등의 상황입니다.
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('Page One'),
    );
  }
}

class PageTwo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('Page Two'),
    );
  }
}

class PageThree extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('Page Three'),
    );
  }
}

위 예제에서는 MyIndexedStack StatefulWidget을 정의하고, _MyIndexedStackState 클래스에서 인덱스와 자식 위젯 목록을 관리합니다. IndexedStack 위젯은 currentIndex 값을 사용하여 현재 인덱스에 해당하는 페이지를 표시합니다.

각각의 페이지 위젯(PageOne, PageTwo, PageThree)은 상태를 유지하고 싶은 경우 StatefulWidget으로 정의할 수 있습니다. 예를 들어, PageOne 위젯에 TextFormField 등의 입력 필드가 있다면, 사용자가 입력한 값을 유지하기 위해 StatefulWidget으로 정의할 수 있습니다.

이렇게 하면 IndexedStack 위젯에서 페이지 인덱스를 변경할 때 이전 페이지의 상태가 유지됩니다.