[flutter] Flutter Riverpod에서 명언 앱 만들기

14 Dec 2023

flutter

이번에는 Flutter와 Riverpod를 사용하여 간단한 명언 앱을 만들어보려 합니다. Riverpod는 상태 관리 라이브러리로, Flutter 앱을 보다 효과적으로 관리할 수 있도록 도와줍니다. 이번 튜토리얼에서는 Riverpod를 사용하여 명언 앱의 상태를 관리하고, 화면에 표시하는 방법을 알아보겠습니다.

1. Riverpod 소개

Riverpod는 Flutter 애플리케이션의 상태 관리를 위한 강력하고 직관적인 도구입니다. Provider 패키지를 개선한 것으로, 더 많은 기능을 제공하며 더 효율적으로 상태를 관리할 수 있습니다.

2. 프로젝트 설정

먼저, Flutter 프로젝트를 생성하고 Riverpod를 추가해야 합니다. pubspec.yaml 파일의 의존성에 riverpod 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^1.0.3

그리고 터미널에서 flutter pub get 명령을 실행하여 의존성을 업데이트합니다.

3. 명언 데이터 모델링

명언 앱을 위한 간단한 데이터 모델을 만들어봅시다. Quote 모델을 선언하고, 몇 가지 명언 데이터를 추가합니다.

class Quote {
  final String text;
  final String author;

  Quote({required this.text, required this.author});
}
  
final List<Quote> quotes = [
  Quote(text: "삶이 있는 한 희망은 있다.", author: "키케로"),
  Quote(text: "하루하루를 진실하게 살아라.", author: "관자"),
];

4. Riverpod를 사용한 상태 관리

Riverpod를 사용하여 명언 데이터를 관리합니다. riverpod 패키지를 import하고, Provider를 사용하여 quotes 상태를 생성해봅시다.

import 'package:flutter_riverpod/flutter_riverpod.dart';

final quotesProvider = StateProvider((ref) => quotes);

5. UI 구현

이제 명언을 화면에 표시해보겠습니다. Consumer 위젯을 사용하여 quotes 상태를 구독하고, 화면에 명언을 표시합니다.

Consumer(
  builder: (context, watch, child) {
    final quotes = watch(quotesProvider).state;
    return Column(
      children: quotes.map((quote) {
        return ListTile(
          title: Text(quote.text),
          subtitle: Text(quote.author),
        );
      }).toList(),
    );
  },
)

6. 테스트

프로젝트를 실행하고, 명언이 화면에 표시되는지 확인해봅시다. 또한, quotes 상태를 변경하여 화면이 업데이트되는지 테스트합니다.

7. 결론

이제 Riverpod를 사용하여 Flutter 앱에서 상태를 효과적으로 관리하는 방법을 배웠습니다. 명언 앱을 만들면서, 상태의 변화를 감지하고 화면에 적절하게 반영하는 방법을 익힐 수 있었습니다. Riverpod를 사용하면 복잡한 상태 관리도 더욱 쉬워집니다. 앞으로 Riverpod를 활용하여 더 다양한 Flutter 앱을 개발해보시기 바랍니다.

참고 문헌

이제 여러분도 Riverpod를 활용한 Flutter 앱 개발에 도전해보세요!

목차