[flutter] 플러터(IndexedStack)에서 인덱스 변경시 이전 페이지와 새 페이지의 데이터를 동기화하는 방법은 무엇인가요?

07 Dec 2023

flutter

상태 관리: IndexedStack 위젯이 사용하는 인덱스를 상태로 관리해야 합니다. 상태 관리 방식으로는 Provider, Bloc 패턴, 상태관리 라이브러리 등을 사용할 수 있습니다.
데이터 동기화: 이전 페이지와 새 페이지의 데이터를 동기화하는 방법은 상태를 업데이트하는 것입니다. 인덱스 변경이 발생할 때마다 이전 페이지의 상태를 업데이트하고, 새 페이지에서는 해당 상태를 사용하여 데이터를 동기화합니다.

예를 들어, Provider 패턴을 사용하는 경우 다음과 같이 동작할 수 있습니다.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => MyData(),
      child: IndexedStack(
        index: Provider.of<MyData>(context).pageIndex,
        children: [
          // 이전 페이지
          Consumer<MyData>(
            builder: (context, myData, child) {
              return MyPreviousPage(data: myData.previousPageData);
            },
          ),
          // 새 페이지
          Consumer<MyData>(
            builder: (context, myData, child) {
              return MyNewPage(data: myData.newPageData);
            },
          ),
        ],
      ),
    );
  }
}

class MyData extends ChangeNotifier {
  int _pageIndex = 0;
  dynamic _previousPageData;
  dynamic _newPageData;

  int get pageIndex => _pageIndex;
  dynamic get previousPageData => _previousPageData;
  dynamic get newPageData => _newPageData;

  void changePage(int newIndex, dynamic previousData, dynamic newData) {
    _pageIndex = newIndex;
    _previousPageData = previousData;
    _newPageData = newData;
    notifyListeners();
  }
}

class MyPreviousPage extends StatelessWidget {
  final dynamic data;

  MyPreviousPage({this.data});

  @override
  Widget build(BuildContext context) {
    // 이전 페이지에 대한 UI 구현
    return Container();
  }
}

class MyNewPage extends StatelessWidget {
  final dynamic data;

  MyNewPage({this.data});

  @override
  Widget build(BuildContext context) {
    // 새 페이지에 대한 UI 구현
    return Container();
  }
}

위 예제에서 MyWidget은 IndexedStack을 사용하여 이전 페이지와 새 페이지를 표시하고, MyData는 인덱스와 페이지 데이터를 관리합니다. MyData의 changePage 메서드를 호출하여 인덱스와 데이터를 업데이트하고, 해당 상태가 변경될 때마다 위젯이 다시 렌더링되도록 notifyListeners()를 호출합니다. 따라서 이전 페이지와 새 페이지의 데이터가 동기화되는 것을 확인할 수 있습니다.

참고로, 위 예제에서는 Provider 패키지를 사용하여 상태 관리를 구현하였지만, 다른 상태 관리 방법을 사용해도 동일한 원리로 동작할 수 있습니다.