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

07 Dec 2023

flutter

플러터의 IndexedStack 위젯은 여러 개의 자식 위젯을 배열 형태로 가지며, 현재 인덱스에 해당하는 자식 위젯만 보여주는 위젯입니다. 이 때, 인덱스가 변경되면 이전 페이지의 상태는 사라지게 됩니다. 그러나 어떻게 하면 인덱스를 변경해도 이전 페이지의 입력 상태를 유지할 수 있을까요?

해결 방법은 IndexedStack 위젯과 상태 관리를 위한 StatefulWidget을 조합하여 사용하는 것입니다. StatefulWidget을 사용하면 각자의 상태를 유지하고 필요한 데이터를 저장할 수 있습니다.

다음은 IndexedStack과 StatefulWidget을 조합하여 이전 페이지의 입력 상태를 유지하는 예제 코드입니다.

import 'package:flutter/material.dart';

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

class _MyIndexedStackState extends State<MyIndexedStack> {
  int currentIndex = 0;
  List<Widget> pages = [
    Page1(),
    Page2(),
    Page3(),
  ];

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

class Page1 extends StatefulWidget {
  @override
  _Page1State createState() => _Page1State();
}

class _Page1State extends State<Page1> {
  TextEditingController _textEditingController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(
              controller: _textEditingController,
              decoration: InputDecoration(labelText: 'Page 1'),
            ),
            ElevatedButton(
              child: Text('Next'),
              onPressed: () {
                setState(() {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => Page2()),
                  );
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

class Page2 extends StatefulWidget {
  @override
  _Page2State createState() => _Page2State();
}

class _Page2State extends State<Page2> {
  TextEditingController _textEditingController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(
              controller: _textEditingController,
              decoration: InputDecoration(labelText: 'Page 2'),
            ),
            ElevatedButton(
              child: Text('Next'),
              onPressed: () {
                setState(() {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => Page3()),
                  );
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

class Page3 extends StatefulWidget {
  @override
  _Page3State createState() => _Page3State();
}

class _Page3State extends State<Page3> {
  TextEditingController _textEditingController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(
              controller: _textEditingController,
              decoration: InputDecoration(labelText: 'Page 3'),
            ),
            ElevatedButton(
              child: Text('Previous'),
              onPressed: () {
                setState(() {
                  Navigator.pop(context);
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

이 예제 코드에서는 IndexedStack을 사용하여 세 개의 페이지를 관리합니다. 각 페이지는 StatefulWidget으로 구성되어 있으며, 입력 상태를 유지하기 위해 TextEditingController를 사용하고 있습니다.

이제 IndexedStack의 인덱스를 변경해도 각 페이지의 상태는 유지됩니다. 예를 들어, Page1에서 입력한 값은 Page2로 이동한 후에도 유지됩니다.

이와 같이 StatefulWidget을 사용하여 IndexedStack의 각 페이지의 상태를 유지할 수 있습니다. 생성된 페이지를 적절히 관리하면서 앱에서 필요한 입력 상태를 유지할 수 있습니다.

더 자세한 내용은 공식 문서를 참조하시기 바랍니다.