[flutter] Flutter Riverpod에서 가계부 앱 만들기

14 Dec 2023

flutter

가계부 앱은 여러분의 소비 및 수입 내역을 기록하고 관리할 수 있는 편리한 도구입니다. 이번 블로그에서는 Flutter 프레임워크에서 상태 관리 라이브러리인 Riverpod을 활용하여 가계부 앱을 만드는 방법에 대해 알아보겠습니다.

Riverpod이란?

Riverpod은 Flutter 애플리케이션의 상태 관리와 의존성 관리를 위한 강력한 라이브러리입니다. Provider를 기반으로 하며, 개선된 구조와 강력한 기능을 제공합니다.

프로젝트 설정

Flutter 프로젝트를 새로 생성하고, riverpod 패키지를 추가합니다.

flutter create my_expense_tracker
cd my_expense_tracker

pubspec.yaml 파일을 열고 아래와 같이 riverpod을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^1.0.3

터미널에서 flutter pub get을 실행하여 패키지를 다운로드합니다.

데이터 모델 및 상태 관리 설정

우선, 가계부에서 사용할 Expense 데이터 모델을 만들어봅시다.

class Expense {
  final String name;
  final double amount;

  Expense(this.name, this.amount);
}

이제 Riverpod을 사용하여 Expense 목록을 관리하는 Provider를 만들어보겠습니다.

final expensesProvider = StateProvider<List<Expense>>((ref) => []);

사용자 인터페이스 구성

가계부 앱의 UI를 작성하기 위해 필요한 위젯들을 만들고, Riverpod Provider를 사용하여 Expense 목록을 표시합니다.

final expensesProvider = Provider<List<Expense>>((ref) {
  return ref.watch(expensesProvider).state;
});

class MyExpenseTrackerApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('가계부'),
        ),
        body: Consumer(builder: (context, watch, _) {
          final expenses = watch(expensesProvider);
          return ListView.builder(
            itemCount: expenses.length,
            itemBuilder: (context, index) {
              final expense = expenses[index];
              return ListTile(
                title: Text(expense.name),
                subtitle: Text('\$${expense.amount.toStringAsFixed(2)}'),
              );
            },
          );
        }),
      ),
    );
  }
}

결론

이제 Riverpod을 사용하여 간단한 가계부 앱을 만들어보았습니다. Riverpod을 사용하면 상태 관리를 효율적으로 처리할 수 있으므로, 복잡한 UI 및 데이터 처리를 다루는 앱을 더 쉽게 구축할 수 있습니다.

만약 Riverpod에 대해 더 알고 싶다면 공식 문서를 확인해보세요. Happy coding!

공식 Riverpod 문서 바로가기