Flutter으로 전화번호부 앱을 만들고자 합니다. 이를 위해 Riverpod를 사용하여 상태 관리를 할 것입니다. Riverpod를 사용하면 Flutter 앱을 효율적으로 관리하고 상태를 관리할 수 있기 때문에 선택했습니다.

Riverpod란 무엇인가요?

Riverpod는 Flutter 애플리케이션의 상태 관리와 의존성 관리를 위한 라이브러리입니다. Provider를 기반으로 하며 Provider 패키지의 불편함을 해소하고 hooks와 같은 새로운 기능을 제공합니다.

앱 구조

전화번호부 앱은 크게 두 가지 화면으로 구성됩니다.

1. 연락처 목록 화면
2. 연락처 상세 정보 화면

각 화면은 상태 관리가 필요한데, 이를 Riverpod로 처리할 것입니다.

프로젝트 설정

먼저, riverpod 패키지를 pubspec.yaml 파일에 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^1.0.3

그리고 패키지를 업데이트합니다.

$ flutter pub get

전화번호부 앱 구현

Riverpod 프로바이더 생성

앱에서 사용할 contacts와 같이 전역에서 사용할 상태나 함수를 정의하는 provider를 생성합니다.

import 'package:riverpod/riverpod.dart';

final contactsProvider = StateProvider<List<String>>((ref) {
  return []; // 초기 상태는 빈 배열
});

위의 코드에서는 StateProvider를 사용하여 전역 상태 contacts를 생성하고, 초기 상태는 빈 배열로 설정합니다.

연락처 리스트 가져오기

실제로 연락처 목록 데이터를 가져오는 함수를 작성하고, 해당 함수를 사용하여 contactsProvider를 업데이트합니다.

final contactsFetchProvider = FutureProvider.autoDispose<List<String>>((ref) async {
  // 연락처 데이터를 가져오는 비동기 함수 호출
  final contacts = await fetchContacts();
  return contacts;
});

UI에 상태 연결

UI에서 contactsProvider나 contactsFetchProvider를 사용하여 상태를 읽고 업데이트할 수 있습니다.

@override
Widget build(BuildContext context, WidgetRef ref) {
  final contacts = ref.watch(contactsFetchProvider); // 연락처 데이터 읽어오기
  return ListView.builder(
    itemCount: contacts.length,
    itemBuilder: (context, index) {
      return ListTile(
        title: Text(contacts[index]),
      );
    },
  );
}

위의 예시에서 ref.watch를 사용하여 리스너를 등록하고, 상태 변화를 관찰하며 UI를 업데이트합니다.

결론

Flutter Riverpod로 전화번호부 앱의 상태 관리를 어떻게 할 수 있는지에 대해 알아보았습니다. Riverpod를 사용하면 간단하게 상태를 관리하고, UI와 비즈니스 로직을 더 효율적으로 관리할 수 있습니다. 계속해서 Riverpod를 익히고, 실제 앱에 적용해보면서 더 많은 경험을 쌓아보도록 합시다.

GitHub - Riverpod Dev.to - Introduction to Riverpod