[FLUTTER] 상태 관리 패키지 (Provider) 준비하기

상태관리의 필요성

https://github.com/Eunice991217/Flutter-ToyProject/tree/main/bucket_list

GitHub - Eunice991217/Flutter-ToyProject: Flutter Project Practice

버킷 리스트 프로젝트는 페이지 수가 적고 Bucket에 대한 모든 CRUD(Create / Read / Update / Delete)가 HomePage 내에서 끝난다. 이렇게 작은 프로젝트에서는 StatefulWidget만 활용하여도 충분히 만들 수 있다.

 

이와 달리 만약 bucketList 데이터를 여러 페이지에서 CRUD할 수 있는 좀 더 큰 서비스를 만들게 된다면 필연적으로 발생하는 문제가 있다. 예를 들어, 아래 페이지가 많은 앱을 보시면 Page1에는 전체 BucketList를 보여주고, Page2와 3에서는 조건에 따라 특정 BucketList만 보여주는 앱이 있다고 생각해 보자. Page1에서 Bucket1을 삭제하면, Page2의 Bucket1도 삭제되어야 하고 그 반대도 마찬가지다. 뿐만 아니라 Page3과도 Page1도 마찬가지다. 이와 같이 최신 상태의 데이터를 보여주도록 페이지 간 데이터를 주고받고 관리하는 행위를 상태관리(State Management)라고 부른다. 위와 같은 문제를 해결하기 위해 현업에서는 상태 관리 패키지를 활용하여 문제를 해결한다.

 

위 문제의 근본적인 원인은, BucketList를 각 페이지에서 개별로 가지고 있기 때문이다. 따라서 대부분의 상태 관리 패키지들은 아래 사진과 같이 중앙 집중식으로 데이터를 한 곳에 모아서 관리한다. 앞으로 중앙 집중식으로 데이터를 담당하는 클래스를 서비스(Service)라고 부르도록 하겠다. 이렇게 되면 각 페이지에서는 데이터에 대한 CRUD는 모두 서비스에게 요청하는 방식으로 구현되고, 이를 통해 각 화면 간 데이터를 주고받는 문제를 해결할 수 있다.

여러가지 상태 관리 패키지 중 Provider라는 패키지를 이용해서 버킷 리스트 앱을 구현해 보도록 할 것이다!

why Provider? 사용법이 쉽고, Flutter 공식 문서에서도 추천하는 패키지이다.

 

1. Provider 패키지 추가

https://pub.dev/packages/provider/install

provider | Flutter Package

- 패키지 추가 방법은 이전 게시물 참고 (https://org9899.tistory.com/123)

 

2. BucketService 만들기

: 모든 버킷 데이터를 담당해줄 BucketService를 별도 파일로 만들것임!

 

• bucket_service.dart

import 'package:flutter/material.dart';

import 'main.dart';

/// Bucket 담당
class BucketService extends ChangeNotifier {
  // 변경된사항을 알려준다 (notifier)
  List<Bucket> bucketList = [
    Bucket('잠자기', false), // 더미(dummy) 데이터
  ];
}

 

BucketService의 bucketList가 변경되는 경우 해당 값을 보여주는 화면들을 갱신시켜 주는 기능을 구현하기 위해 ChangeNotifier 클래스의 기능을 물려 받았는데, ChangeNotifier를 상속 받은 경우 notifylisteners();를 호출하여 위젯들을 갱신하는 기능을 사용할 수 있다. (자세한 사용법은 뒤쪽에서 알아보도록 할것임)

 

앞으로 Bucket 관련 데이터는 모두 BucketService 에서 담당할 예정이므로, 이전에 HomePage에서 구현했던 bucketList 배열을 BucketService 에 추가 (8번째 Bucket은 바로 테스트를 진행할 수 있도록 넣은 가짜(dummy) 데이터)

 

3. Provider 패키지 설정

: Provider를 이용하여 BucketService를 위젯 트리(Widget tree)의 꼭대기에 배치하고, 어디서든 쉽게 접근할 수 있도록 만들어 줌

MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (context) => BucketService()),
      ],
      child: const MyApp(),
    ),

아래와 같이 기존 main 함수에 위 코드를 추가하여 Provider를 이용해, BucketService를 위젯트리 꼭대기에 배치!

void main() {
  runApp(
    const MyApp(),
  );
}

• main

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (context) => BucketService()),
      ],
      child: const MyApp(),
    ),
  );
}