[flutter] Flutter Riverpod에서 학습 관리 앱 만들기

14 Dec 2023

flutter

본 블로그에서는 Flutter와 Riverpod를 사용하여 간단한 학습 관리 앱을 만드는 방법에 대해 알아보겠습니다.

1. Riverpod란 무엇인가?

Riverpod는 Flutter 애플리케이션의 상태 관리를 위한 강력하고 직관적인 패키지입니다. Riverpod는 Provider 패턴에 기초하여 상태를 관리하고 의존성을 주입하는 데 탁월한 성능을 보여줍니다.

2. Flutter Riverpod 패키지 설치

먼저, Riverpod 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 riverpod 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^1.0.0

그 후, 터미널에서 flutter pub get 명령어를 실행하여 패키지를 설치합니다.

3. 학습 관리 앱 UI 설계

앱의 UI를 설계하기 위해 필요한 위젯 및 레이아웃을 고려합니다. 학습 목록을 표시하고, 새로운 학습을 추가하고, 각 학습의 세부 정보를 표시하는 UI를 고려해야 합니다.

4. 데이터 모델 및 Provider 생성

각 학습 항목에 대한 데이터 모델을 만들고, 해당 데이터 모델을 조회하고 업데이트하는데 사용할 Riverpod Provider를 작성합니다.

class Study {
  final String title;
  final String subject;
  
  Study({required this.title, required this.subject});
}

final studyProvider = StateNotifierProvider<StudyNotifier, List<Study>>((ref) {
  return StudyNotifier([]);
});

class StudyNotifier extends StateNotifier<List<Study>> {
  StudyNotifier(List<Study> state) : super(state);

  void addStudy(Study newStudy) {
    state = [...state, newStudy];
  }
}

5. UI와 Provider 연결

UI 위젯 내에서 Provider를 사용하여 상태를 조회하고 업데이트하는 방법에 대해 고려해야 합니다. useProvider 훅을 사용하여 Provider를 읽고, ProviderContainer를 사용하여 상태를 업데이트할 수 있습니다.

final studyList = useProvider(studyProvider);

// ...

ProviderContainer(
  child: GestureDetector(
    onTap: () {
      context.read(studyProvider.notifier).addStudy(newStudy);
    },
    // ...
  ),
),

6. 테스트 및 디버깅

애플리케이션을 실행하고, UI와 Provider가 예상대로 작동하는지 테스트하고 디버깅합니다. Riverpod는 테스트 및 디버깅을 쉽게 할 수 있도록 지원합니다.

7. 결론

Riverpod를 사용하여 Flutter 애플리케이션에서 간단하고 효과적으로 상태를 관리하는 방법에 대해 알아보았습니다. 이를 통해 학습 관리 앱을 만드는 방법을 배웠습니다.

더 많은 정보를 원하신다면, Riverpod 공식 문서를 참고하시기 바랍니다.

목차