Flutter의 Riverpod 사용법

Flutter에서 상태 관리는 애플리케이션 개발의 핵심 요소 중 하나입니다. 다양한 상태 관리 패턴 중 Riverpod은 간결하고 안전한 상태 관리를 제공하는 강력한 라이브러리입니다. Riverpod은 Provider 패턴의 단점을 보완하고, 더 나은 상태 관리 방법을 제공합니다. 이번 글에서는 Flutter에서 Riverpod을 사용하는 방법과 이를 구현하는 예제를 자세히 살펴보겠습니다.

1. Riverpod의 기본 개념

Riverpod은 상태 관리의 복잡성을 줄이고, 안전하고 간결한 상태 관리를 제공하는 라이브러리입니다. Riverpod은 프로바이더(provider)를 통해 상태를 정의하고, 필요한 곳에서 이를 사용할 수 있도록 합니다. 주요 구성 요소는 다음과 같습니다:

• Provider: 상태를 정의하고 관리합니다.
• ConsumerWidget: 상태를 구독하고, 상태 변화를 반영하여 UI를 업데이트합니다.
• ProviderScope: 프로바이더를 트리에 공급하고, 상태의 생명 주기를 관리합니다.

2. Riverpod 패키지 설치

먼저, flutter_riverpod 패키지를 pubspec.yaml 파일에 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  flutter_riverpod: ^1.0.0

 

그리고 pub get 명령어를 실행하여 패키지를 설치합니다.

3. Counter 예제 구현

이제 Riverpod을 사용하여 간단한 카운터 애플리케이션을 구현해보겠습니다.

 

Step 1: Provider 정의

프로바이더는 상태를 정의하고 관리합니다. StateProvider를 사용하여 상태를 정의합니다.

import 'package:flutter_riverpod/flutter_riverpod.dart';

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

 

Step 2: ProviderScope 설정

ProviderScope는 프로바이더를 위젯 트리에 공급하고, 상태의 생명 주기를 관리합니다.

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

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterScreen(),
    );
  }
}

 

Step 3: ConsumerWidget을 사용한 상태 접근

ConsumerWidget은 상태를 구독하고, 상태 변화를 반영하여 UI를 업데이트합니다.

class CounterScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final counter = ref.watch(counterProvider);

    return Scaffold(
      appBar: AppBar(title: Text('Riverpod Counter')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Text(
              '$counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          ref.read(counterProvider.notifier).state++;
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

 

위 코드는 ConsumerWidget을 사용하여 상태를 구독하고, 상태 변화를 반영하여 UI를 업데이트합니다. ref.watch를 사용하여 상태를 구독하고, ref.read를 사용하여 상태를 업데이트합니다.

 

 

반응형

 

4. 다양한 프로바이더 사용하기

Riverpod은 다양한 프로바이더를 제공합니다. StateProvider 외에도 FutureProvider, StreamProvider, ChangeNotifierProvider 등을 사용할 수 있습니다.

 

FutureProvider

FutureProvider는 비동기 작업의 결과를 제공하는 프로바이더입니다.

final fetchDataProvider = FutureProvider<String>((ref) async {
  await Future.delayed(Duration(seconds: 2));
  return 'Fetched Data';
});

class FutureProviderExample extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final asyncValue = ref.watch(fetchDataProvider);

    return Scaffold(
      appBar: AppBar(title: Text('FutureProvider Example')),
      body: Center(
        child: asyncValue.when(
          data: (data) => Text(data),
          loading: () => CircularProgressIndicator(),
          error: (error, stack) => Text('Error: $error'),
        ),
      ),
    );
  }
}

 

위 코드는 FutureProvider를 사용하여 비동기 작업의 결과를 UI에 반영하는 예제입니다.

 

StreamProvider

StreamProvider는 스트림의 데이터를 제공하는 프로바이더입니다.

final streamProvider = StreamProvider<int>((ref) async* {
  yield* Stream.periodic(Duration(seconds: 1), (count) => count);
});

class StreamProviderExample extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final asyncValue = ref.watch(streamProvider);

    return Scaffold(
      appBar: AppBar(title: Text('StreamProvider Example')),
      body: Center(
        child: asyncValue.when(
          data: (data) => Text('$data'),
          loading: () => CircularProgressIndicator(),
          error: (error, stack) => Text('Error: $error'),
        ),
      ),
    );
  }
}

 

위 코드는 StreamProvider를 사용하여 스트림의 데이터를 UI에 반영하는 예제입니다.

5. ChangeNotifierProvider 사용하기

ChangeNotifierProvider는 ChangeNotifier를 사용하는 프로바이더입니다. 상태를 관리하고, 변경 사항을 알릴 수 있습니다.

class CounterNotifier extends ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

final counterNotifierProvider = ChangeNotifierProvider((ref) => CounterNotifier());

class ChangeNotifierProviderExample extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final counterNotifier = ref.watch(counterNotifierProvider);

    return Scaffold(
      appBar: AppBar(title: Text('ChangeNotifierProvider Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Text(
              '${counterNotifier.count}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: counterNotifier.increment,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

 

위 코드는 ChangeNotifierProvider를 사용하여 상태를 관리하고, 변경 사항을 UI에 반영하는 예제입니다.

결론

Riverpod은 Flutter 애플리케이션에서 상태를 간결하고 안전하게 관리할 수 있는 강력한 도구입니다. Provider, ConsumerWidget, ProviderScope 등의 구성 요소를 통해 상태를 정의하고, 구독하며, 변경 사항을 반영할 수 있습니다. 다양한 프로바이더(StateProvider, FutureProvider, StreamProvider, ChangeNotifierProvider)를 활용하여 다양한 요구 사항에 맞는 상태 관리를 구현할 수 있습니다. Riverpod을 적절히 활용하여 유지 보수성과 확장성이 뛰어난 애플리케이션을 만들어보세요.