[flutter] Flutter Riverpod에서 도서 추천 앱 만들기

14 Dec 2023

flutter

Riverpod은 Flutter 애플리케이션의 상태 관리를 쉽게 해주는 패키지입니다. 이번 포스트에서는 Riverpod을 사용하여 도서 추천 앱을 만들어 보겠습니다.

1. Riverpod 소개

Riverpod은 Flutter에서 상태 관리를 위해 Provider 패턴을 사용하는 패키지입니다. 단순하고 직관적인 문법을 가지고 있어, Flutter 애플리케이션의 상태 관리를 보다 간단하게 만들어 줍니다.

2. 프로젝트 구성

첫 번째로 프로젝트에 필요한 패키지를 설치합니다. pubspec.yaml 파일에 다음과 같이 추가합니다:

dependencies:
  flutter_riverpod: ^1.0.3
  http: ^0.13.3

3. 도서 데이터 모델 정의

도서의 정보를 담는 데이터 모델을 정의해줍니다.

class Book {
  final String title;
  final String author;

  Book({required this.title, required this.author});
}

4. 도서 목록 가져오기

도서 목록을 가져오기 위해서, http 패키지를 사용하여 API 호출을 수행합니다.

import 'package:http/http.dart' as http;

Future<List<Book>> fetchBooks() async {
  final response = await http.get(Uri.parse('https://api.example.com/books'));
  if (response.statusCode == 200) {
    final List<dynamic> data = json.decode(response.body);
    return data.map((json) => Book(title: json['title'], author: json['author'])).toList();
  } else {
    throw Exception('Failed to load books');
  }
}

5. UI 구성

도서 목록을 화면에 표시해주는 UI를 만들어줍니다.

class BookListScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Book Recommendations')),
      body: Consumer(builder: (context, watch, child) {
        AsyncValue<List<Book>> books = watch(bookListProvider);
        return books.when(
          loading: () => CircularProgressIndicator(),
          error: (error, stack) => Text('Error: $error'),
          data: (bookList) {
            return ListView.builder(
              itemCount: bookList.length,
              itemBuilder: (context, index) {
                final book = bookList[index];
                return ListTile(
                  title: Text(book.title),
                  subtitle: Text(book.author),
                );
              },
            );
          },
        );
      }),
    );
  }
}

6. Riverpod으로 상태 관리

Riverpod을 사용하여 API 호출 및 결과 상태를 관리합니다.

final bookListProvider = FutureProvider<List<Book>>((ref) async {
  return fetchBooks();
});

7. 마치며

이제 Riverpod을 사용하여 도서 추천 앱을 만드는 방법을 알아보았습니다. Riverpod을 이용하면 간단하고 효율적으로 Flutter 애플리케이션의 상태 관리를 할 수 있습니다. 여러분도 한 번 도전해보세요!

목차