[flutter] Riverpod를 사용하여 앱의 카운터 기능을 구현하는 방법은 어떻게 되나요?

04 Dec 2023

flutter

1. Riverpod란?

Riverpod는 Flutter 어플리케이션의 상태 관리를 위한 Provider 패키지의 대체로 사용되는 패키지입니다. Provider 패키지와 비교했을 때 Riverpod는 더욱 간단하고 직관적인 코드를 작성할 수 있도록 도와줍니다.

2. 카운터 앱 구현하기

2.1. 의존성 추가하기

먼저, 카운터 앱을 구현하기 위해 Riverpod 패키지를 의존성으로 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^1.0.1

변경사항을 적용하기 위해 터미널에서 flutter pub get 명령어를 실행합니다.

2.2. Provider 생성하기

Provider란 앱 내에서 사용할 수 있는 값을 제공하는 클래스입니다. 카운터 값을 관리하기 위해 counter_provider.dart 파일을 생성하고 다음 코드를 작성합니다:

import 'package:flutter_riverpod/flutter_riverpod.dart';

final counterProvider = Provider<int>((ref) => 0);

위 코드에서 Provider<int>는 int 타입의 카운터 값을 제공하는 Provider를 생성한다는 의미입니다.

2.3. 앱 UI 구성하기

이제 앱의 UI를 작성해보겠습니다. main.dart 파일을 열고 다음 코드를 작성합니다:

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ProviderScope(
      child: MaterialApp(
        title: 'Counter App',
        home: CounterScreen(),
      ),
    );
  }
}

class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter App'),
      ),
      body: Center(
        child: Consumer(
          builder: (context, watch, child) {
            final counter = watch(counterProvider);
            return Text(
              '카운터 값: $counter',
              style: TextStyle(fontSize: 24),
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          context.read(counterProvider).state++;
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

위 코드에서 CounterScreen 위젯은 Provider를 사용하여 현재 카운터 값을 읽어와 화면에 표시하고, floatingActionButton을 누르면 카운터 값을 증가시킵니다.

2.4. 앱 실행하기

이제 flutter run 명령어를 사용하여 앱을 실행하고 동작을 확인할 수 있습니다. 앱이 실행되면 화면에 카운터 값이 표시되며, floatingActionButton을 누르면 카운터 값이 증가합니다.

3. 결론

이렇게 Riverpod를 사용하여 Flutter 앱에서 카운터 기능을 구현하는 방법을 알아보았습니다. Riverpod를 통해 상태 관리를 익히고, 더 복잡한 앱의 상태 관리에도 적용할 수 있습니다. 또한 Riverpod는 Provider 패키지와 호환되므로 기존 Provider 코드를 Riverpod로 전환하는 것도 가능합니다.