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

07 Dec 2023

flutter

플러터에서 IndexedStack 위젯을 사용하면 여러 페이지를 겹쳐서 표시할 수 있습니다. 인덱스를 변경하면 새로운 페이지가 표시되는데, 이때 이전 페이지와 새 페이지의 로딩 상태를 관리하는 방법에 대해 알아보겠습니다.

1. 로딩 상태 관리 클래스 생성하기

먼저, 로딩 상태를 관리하는 클래스를 생성합니다. 이 클래스는 다음과 같은 역할을 수행합니다.

이전 페이지의 로딩 상태 저장하기
새 페이지의 로딩 상태 저장하기
로딩 상태를 변경하는 메서드 제공하기

class PageLoader {
  bool _previousLoading = false;
  bool _currentLoading = false;

  void setLoading(bool loading) {
    _previousLoading = _currentLoading;
    _currentLoading = loading;
  }

  bool getPreviousLoading() {
    return _previousLoading;
  }

  bool getCurrentLoading() {
    return _currentLoading;
  }
}

2. 인덱스 변경시 로딩 상태 설정하기

다음으로, IndexedStack을 사용하는 페이지에서 인덱스를 변경할 때 로딩 상태를 설정해야 합니다. 이를 위해 setState() 메서드를 사용하여 상태를 업데이트하고, PageLoader 클래스의 setLoading() 메서드를 호출합니다.

class MyPage extends StatefulWidget {
  @override
  _MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  PageLoader _pageLoader = PageLoader();

  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return IndexedStack(
      index: _currentIndex,
      children: [
        // 첫 번째 페이지
        FirstPage(),
        // 두 번째 페이지
        SecondPage(),
      ],
    );
  }

  void changeIndex(int newIndex) {
    setState(() {
      _pageLoader.setLoading(false); // 이전 페이지의 로딩 상태를 false로 설정
      _currentIndex = newIndex; // 인덱스 변경
      _pageLoader.setLoading(true); // 새 페이지의 로딩 상태를 true로 설정
    });
  }
}

3. 상태에 따라 로딩 표시하기

마지막으로, 이전 페이지와 새 페이지의 로딩 상태에 따라 로딩 표시를 처리합니다. 이를 위해 PageLoader 클래스의 getPreviousLoading()와 getCurrentLoading() 메서드를 사용하여 로딩 상태를 가져옵니다.

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    PageLoader _pageLoader = Provider.of<PageLoader>(context);

    return Center(
      child: _pageLoader.getPreviousLoading() // 이전 페이지의 로딩 상태 확인
          ? CircularProgressIndicator() // 로딩 중이면 로딩 표시
          : Text('첫 번째 페이지'), // 로딩 중이 아니면 페이지 내용 표시
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    PageLoader _pageLoader = Provider.of<PageLoader>(context);

    return Center(
      child: _pageLoader.getCurrentLoading() // 새 페이지의 로딩 상태 확인
          ? CircularProgressIndicator() // 로딩 중이면 로딩 표시
          : Text('두 번째 페이지'), // 로딩 중이 아니면 페이지 내용 표시
    );
  }
}

위의 예시 코드에서 PageLoader 클래스는 Provider 패키지를 이용하여 페이지 간에 상태를 공유하므로, 해당 패키지가 필요합니다. 따라서 Provider 패키지를 설치하고 ChangeNotifierProvider를 상위 위젯으로 사용하여 PageLoader 인스턴스를 제공해야 합니다.

이와 같이 IndexedStack을 사용하여 여러 페이지를 관리하면 페이지 간의 로딩 상태를 효과적으로 관리할 수 있습니다.

참고 자료: