[flutter] Flutter Riverpod에서 책 검색 앱 만들기

14 Dec 2023

flutter

Flutter Riverpod는 Flutter 애플리케이션의 상태 관리를 위한 강력한 라이브러리입니다. 이 라이브러리를 이용하면 Flutter 앱에서의 상태 관리를 효율적으로 할 수 있습니다. 이번에는 Flutter Riverpod를 사용하여 간단한 책 검색 앱을 만들어보겠습니다.

필요한 패키지 설치하기

먼저 pubspec.yaml 파일에 다음과 같이 riverpod 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^1.0.3

그리고 터미널에서 다음 명령을 실행하여 패키지를 설치합니다.

flutter pub get

API 키 등록하기

이번 예제에서는 Google Books API를 사용할 것이므로, Google Cloud Console에서 새로운 프로젝트를 생성하고 Google Books API를 활성화해야 합니다. 그리고 API 키를 발급받아 앱에 등록합니다.

Flutter Riverpod로 상태 관리하기

Riverpod를 사용하여 앱 전체에서 사용할 수 있는 상태를 관리합니다. 예를 들어, 책 목록과 선택된 책 정보를 관리할 수 있습니다.

final bookListProvider = StateProvider<List<String>>((ref) => []);
final selectedBookProvider = StateProvider<String?>((ref) => null);

API 호출하기

다음으로, Google Books API를 사용하여 책을 검색합니다. http 패키지를 사용하여 API를 호출하고, 결과를 처리합니다.

final httpClientProvider = Provider<http.Client>((ref) => http.Client());

final bookSearchProvider = FutureProvider.autoDispose.family<List<String>, String>((ref, query) async {
  final httpClient = ref.read(httpClientProvider);
  final response = await httpClient.get(Uri.parse('https://www.googleapis.com/books/v1/volumes?q=$query'));
  // 결과를 파싱하고 책 제목 목록을 반환
  return parseBookTitles(response.body);
});

UI 구성하기

마지막으로, UI를 구성합니다. 검색창과 검색 결과를 표시하는 부분을 구현합니다. 상태 변화에 따라 UI가 업데이트되도록 Riverpod를 활용합니다.

@override
Widget build(BuildContext context) {
  final selectedBook = context.read(selectedBookProvider).state;
  return Scaffold(
    appBar: AppBar(
      title: Text('책 검색 앱'),
    ),
    body: Column(
      children: <Widget>[
        TextField(
          onChanged: (query) {
            context.read(bookListProvider).state = [];
            context.read(bookSearchProvider(query)).whenData((value) {
              context.read(bookListProvider).state = value;
            });
          },
        ),
        if (selectedBook != null) Text(selectedBook),
        Expanded(
          child: Consumer(builder: (context, watch, child) {
            final bookList = watch(bookListProvider).state;
            return ListView.builder(
              itemCount: bookList.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(bookList[index]),
                  onTap: () {
                    context.read(selectedBookProvider).state = bookList[index];
                  },
                );
              },
            );
          }),
        ),
      ],
    ),
  );
}

여기까지가 간단한 책 검색 앱을 만들기 위한 Riverpod 활용 방법입니다. 이를 활용하여 더 다양하고 복잡한 앱을 만들 수 있습니다.

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